Merge branch 'b20.2.0'
This commit is contained in:
Sean Landsman
38
package.json
38
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "ag-grid-react-example",
|
||||
"version": "20.1.0",
|
||||
"version": "20.2.0",
|
||||
"description": "Example Reach applicaiton using ag-Grid.",
|
||||
"main": "dist/ag-grid-react-example.js",
|
||||
"scripts": {
|
||||
@@ -17,7 +17,8 @@
|
||||
"build-dashboard": "webpack --config config/webpack.config.trader.js --progress --profile --bail",
|
||||
"build-all": "npm run build-examples && npm run build-dashboard",
|
||||
"build": "npm run clean && npm run mkdirs && npm run build-all && npm run copy",
|
||||
"start": "npm run examples"
|
||||
"start": "npm run examples",
|
||||
"test": "./ts-tests/runTsTests.sh"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
@@ -37,13 +38,15 @@
|
||||
},
|
||||
"homepage": "http://www.ag-grid.com/",
|
||||
"devDependencies": {
|
||||
"@babel/core": "7.3.3",
|
||||
"babel-loader": "8.0.5",
|
||||
"@babel/preset-env": "7.3.1",
|
||||
"@babel/preset-react": "7.0.0",
|
||||
"@babel/plugin-proposal-class-properties": "7.3.3",
|
||||
"@babel/core": "7.3.4",
|
||||
"@babel/plugin-proposal-class-properties": "7.3.4",
|
||||
"@babel/plugin-proposal-function-bind": "7.2.0",
|
||||
"css-loader": "2.1.0",
|
||||
"@babel/preset-env": "7.3.4",
|
||||
"@babel/preset-react": "7.0.0",
|
||||
"@types/react": "16.8.8",
|
||||
"@types/react-dom": "16.8.2",
|
||||
"babel-loader": "8.0.5",
|
||||
"css-loader": "2.1.1",
|
||||
"file-loader": "3.0.1",
|
||||
"gulp": "3.9.1",
|
||||
"merge2": "1.2.3",
|
||||
@@ -52,21 +55,22 @@
|
||||
"prop-types": "15.7.2",
|
||||
"rimraf": "2.6.3",
|
||||
"style-loader": "0.23.1",
|
||||
"webpack": "4.29.5",
|
||||
"webpack-cli": "3.2.3",
|
||||
"webpack-dev-server": "3.2.0"
|
||||
"typescript": "3.3.3333",
|
||||
"webpack": "4.29.6",
|
||||
"webpack-cli": "3.3.0",
|
||||
"webpack-dev-server": "3.2.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"ag-grid-community": "^20.1.0",
|
||||
"ag-grid-enterprise": "^20.1.0",
|
||||
"ag-grid-react": "^20.1.0",
|
||||
"ag-grid-community": "^20.2.0",
|
||||
"ag-grid-enterprise": "^20.2.0",
|
||||
"ag-grid-react": "^20.2.0",
|
||||
"bootstrap": "4.3.1",
|
||||
"d3": "4.9.1",
|
||||
"lodash": "4.17.11",
|
||||
"react": "16.8.2",
|
||||
"react-dom": "16.8.2",
|
||||
"react": "16.8.4",
|
||||
"react-dom": "16.8.4",
|
||||
"react-redux": "6.0.1",
|
||||
"react-router-dom": "5.0.0",
|
||||
"redux": "4.0.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -16,14 +16,14 @@ import "./RichGridDeclarativeExample.css";
|
||||
import "ag-grid-enterprise";
|
||||
|
||||
export default class RichGridDeclarativeExample extends Component {
|
||||
|
||||
constructor() {
|
||||
super();
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
this.state = {
|
||||
quickFilterText: null,
|
||||
sideBar: false,
|
||||
rowData: new RowDataFactory().createRowData(),
|
||||
rowCount: null,
|
||||
icons: {
|
||||
columnRemoveFromGroup: '<i class="fa fa-times"/>',
|
||||
filter: '<i class="fa fa-filter"/>',
|
||||
@@ -39,6 +39,8 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
onGridReady = (params) => {
|
||||
this.api = params.api;
|
||||
this.columnApi = params.columnApi;
|
||||
|
||||
this.calculateRowCount();
|
||||
};
|
||||
|
||||
onCellClicked = (event) => {
|
||||
@@ -86,7 +88,18 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
// simply wait for the next tick
|
||||
setTimeout(() => {
|
||||
this.api.onFilterChanged();
|
||||
}, 0)
|
||||
});
|
||||
};
|
||||
|
||||
calculateRowCount = () => {
|
||||
if (this.api && this.state.rowData) {
|
||||
const model = this.api.getModel();
|
||||
const totalRows = this.state.rowData.length;
|
||||
const processedRows = model.getRowCount();
|
||||
this.setState({
|
||||
rowCount: processedRows.toLocaleString() + ' / ' + totalRows.toLocaleString()
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
static countryCellRenderer(params) {
|
||||
@@ -115,7 +128,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
<h1>Rich Grid with Declarative Markup Example</h1>
|
||||
<div style={{display: "inline-block", width: "100%"}}>
|
||||
<div style={{float: "left"}}>
|
||||
<b>Employees Skills and Contact Details</b><span id="rowCount"/>
|
||||
<b>Employees Skills and Contact Details: </b>{ this.state.rowCount }
|
||||
</div>
|
||||
</div>
|
||||
<div style={{marginTop: 10}}>
|
||||
@@ -152,15 +165,14 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
|
||||
<div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
|
||||
<div style={{float: "left"}}>
|
||||
<label>
|
||||
<input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
|
||||
Show Side Bar
|
||||
</label>
|
||||
<label htmlFor="sideBarToggle">Show Side Bar </label>
|
||||
<input type="checkbox" id="sideBarToggle" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
|
||||
</div>
|
||||
<div style={{float: "left", marginLeft: 20}}>
|
||||
<input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
|
||||
<div style={{float: "right", marginLeft: 20}}>
|
||||
<label htmlFor="quickFilter">Quick Filter: </label>
|
||||
<input type="text" id="quickFilter" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
|
||||
</div>
|
||||
</div>
|
||||
<div style={{height: 400, width: 900}} className="ag-theme-balham">
|
||||
@@ -169,6 +181,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
onGridReady={this.onGridReady}
|
||||
onRowSelected={this.onRowSelected}
|
||||
onCellClicked={this.onCellClicked}
|
||||
onModelUpdated={this.calculateRowCount}
|
||||
|
||||
// binding to simple properties
|
||||
sideBar={this.state.sideBar}
|
||||
@@ -184,7 +197,6 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
// boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true")
|
||||
suppressRowClickSelection
|
||||
rowSelection="multiple"
|
||||
floatingFilter
|
||||
groupHeaders
|
||||
|
||||
// setting grid wide date component
|
||||
@@ -199,8 +211,7 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
headerComponentParams: {
|
||||
menuIcon: 'fa-bars'
|
||||
}
|
||||
}}
|
||||
>
|
||||
}}>
|
||||
<AgGridColumn headerName="#" width={30}
|
||||
checkboxSelection sortable={false} suppressMenu filter={false} pinned>
|
||||
</AgGridColumn>
|
||||
@@ -234,130 +245,6 @@ export default class RichGridDeclarativeExample extends Component {
|
||||
</AgGridColumn>
|
||||
</AgGridReact>
|
||||
</div>
|
||||
<div style={{marginTop: 10}}>
|
||||
<div className="row">
|
||||
<div className="col-sm-12"><h1>Rich Grid with Declarative Markup Example</h1></div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-12">
|
||||
<h5>This example demonstrates many features of ag-Grid, with Grid and Column Definition
|
||||
defined declaratively (i.e. with markup).</h5>
|
||||
<p><span style={{fontWeight: 500}}>Select All/Clear Selection</span>: Select or Deselect
|
||||
All
|
||||
Rows</p>
|
||||
<p><span style={{fontWeight: 500}}>Hide/Show Country Column</span>: Select or Deselect
|
||||
All
|
||||
Rows
|
||||
(expand the Employee column to show the Country column first)</p>
|
||||
<p><span style={{fontWeight: 500}}>Toggle The Side Bar</span>: Let your users Pivot,
|
||||
Group
|
||||
and
|
||||
Aggregate using the Side Bar</p>
|
||||
<p><span style={{fontWeight: 500}}>Refresh Data</span>: Dynamically Update Grid Data</p>
|
||||
<p><span style={{fontWeight: 500}}>Quick Filter</span>: Perform Quick Grid Wide
|
||||
Filtering
|
||||
with
|
||||
the Quick Filter</p>
|
||||
<p><span style={{fontWeight: 500}}>DOB Filter</span>: Set the DOB filter to 01/01/2000
|
||||
using
|
||||
the
|
||||
Filter API (expand the Employee column to show the DOB column)</p>
|
||||
<p><span style={{fontWeight: 500}}>Custom Headers</span>: Sort, Filter and Render
|
||||
Headers
|
||||
using
|
||||
Header Components</p>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Grid & Column API</h4>
|
||||
<p className="card-text">Utilise Grid Features Programmatically Using the APIs
|
||||
Available</p>
|
||||
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-api/"
|
||||
className="btn btn-primary">Grid API</a>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-column-api/"
|
||||
className="btn btn-primary">Column API</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Header Components</h4>
|
||||
<p className="card-text">Customer the Header with React Components</p>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerComponent"
|
||||
className="btn btn-primary">Header Component</a>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com//javascript-grid-header-rendering/#headerGroupComponent"
|
||||
className="btn btn-primary">Header Group Component</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Filters</h4>
|
||||
<p className="card-text">Filter with Quick Filters, Floating Filters, Built In
|
||||
Filters
|
||||
or Using the
|
||||
Filter API</p>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-filter-quick/"
|
||||
className="btn btn-primary">Quick
|
||||
Filter</a>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com//javascript-grid-floating-filter-component/"
|
||||
className="btn btn-primary">Floating Filters</a>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-filtering/"
|
||||
className="btn btn-primary">Built in
|
||||
Filters</a>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com//javascript-grid-filtering/#accessing-filter-component-instances"
|
||||
className="btn btn-primary">Filter API</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="row">
|
||||
<div className="col-sm-4">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">Side Bar</h4>
|
||||
<p className="card-text">Let your users Pivot, Group and Aggregate using the
|
||||
Side Bar</p>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-side-bar/"
|
||||
className="btn btn-primary">Side Bar</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="col-sm-8">
|
||||
<div className="card">
|
||||
<div className="card-body">
|
||||
<h4 className="card-title">The Rest</h4>
|
||||
<p className="card-text">Pinned Columns, Checkbox Selection, Customer Renderers,
|
||||
Data
|
||||
Updates</p>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com/best-react-data-grid/?framework=react"
|
||||
className="btn btn-primary">React with ag-Grid</a>
|
||||
<a target="_blank" href="https://www.ag-grid.com//javascript-grid-pinning/"
|
||||
className="btn btn-primary">Pinned Column</a>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com//javascript-grid-selection/#checkboxSelection"
|
||||
className="btn btn-primary">Checkbox Selection</a>
|
||||
<a target="_blank"
|
||||
href="https://www.ag-grid.com//javascript-grid-cell-rendering/"
|
||||
className="btn btn-primary">Cell
|
||||
Renderers</a>
|
||||
<a target="_blank" href="https://www.ag-grid.com/javascript-grid-data-update/"
|
||||
className="btn btn-primary">Updating Data</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@@ -56,7 +56,7 @@ export default class SkillsFilter extends React.Component {
|
||||
return passed;
|
||||
};
|
||||
|
||||
getModel() {
|
||||
getModelAsString() {
|
||||
return ''
|
||||
}
|
||||
|
||||
@@ -83,7 +83,6 @@ export default class SkillsFilter extends React.Component {
|
||||
|
||||
const skillsTemplates = [];
|
||||
RefData.IT_SKILLS.forEach((skill, index) => {
|
||||
|
||||
const skillName = RefData.IT_SKILLS_NAMES[index];
|
||||
const template = (
|
||||
<label key={skill}
|
||||
|
||||
@@ -25,8 +25,8 @@ class HeaderComponent extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div style={{marginTop: 15}}>
|
||||
<button onClick={this.setCurrency.bind(this, '£', 1)}>Set Currency to GBP</button>
|
||||
<button onClick={this.setCurrency.bind(this, '$', 1.29)}>Set Currency to USD</button>
|
||||
<button onClick={this.setCurrency.bind(this, '£', 1)} className="btn btn-primary">Set Currency to GBP</button>
|
||||
<button onClick={this.setCurrency.bind(this, '$', 1.29)} className="btn btn-primary">Set Currency to USD</button>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
@@ -82,4 +82,4 @@ export default connect(
|
||||
rowData: state.rowData
|
||||
}
|
||||
}
|
||||
)(HeaderComponent);
|
||||
)(HeaderComponent);
|
||||
|
||||
@@ -10,7 +10,7 @@ export default function SimpleReduxHookExample() {
|
||||
<Context.Provider value={{store, dispatch}}>
|
||||
<div>
|
||||
<h1>Simple Example using Hooks (with useContext and useReducer)</h1>
|
||||
<button onClick={() => dispatch({type: "SET_ROW_DATA"})}>Populate Row Data</button>
|
||||
<button onClick={() => dispatch({type: "SET_ROW_DATA"})} className="btn btn-primary">Populate Row Data</button>
|
||||
<GridComponent/>
|
||||
</div>
|
||||
</Context.Provider>
|
||||
|
||||
@@ -89,4 +89,4 @@ export default connect(
|
||||
rowData: state ? state.fxTopMovers : null
|
||||
}
|
||||
}
|
||||
)(TopMoversGrid);
|
||||
)(TopMoversGrid);
|
||||
|
||||
4
ts-tests/InvalidGridProperty.tsx
Normal file
4
ts-tests/InvalidGridProperty.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
import {AgGridReact} from 'ag-grid-react';
|
||||
|
||||
export const App: React.FunctionComponent = () => <AgGridReact invalidProperty columnDefs={[]} rowData={[]}/>;
|
||||
4
ts-tests/SimpleFunctionalGrid.tsx
Normal file
4
ts-tests/SimpleFunctionalGrid.tsx
Normal file
@@ -0,0 +1,4 @@
|
||||
import React from 'react';
|
||||
import {AgGridReact} from 'ag-grid-react';
|
||||
|
||||
export const App: React.FunctionComponent = () => <AgGridReact columnDefs={[]} rowData={[]}/>;
|
||||
26
ts-tests/runTsTests.sh
Executable file
26
ts-tests/runTsTests.sh
Executable file
@@ -0,0 +1,26 @@
|
||||
#!/usr/bin/env bash
|
||||
|
||||
# here as a quick ts test for use in the CI
|
||||
# in time this will be removed the full battery of tests be moved to a centralised location
|
||||
|
||||
error_found=false
|
||||
|
||||
# has an invalid property - should complain
|
||||
./node_modules/.bin/tsc --target "ES5" --module 'commonjs' --lib esnext,dom --allowSyntheticDefaultImports --jsx 'preserve' --noEmit --strict ts-tests/InvalidGridProperty.tsx &> /dev/null
|
||||
if [ $? -ne 1 ]; then
|
||||
echo "ag-grid-react grid with invalid property should throw a compiler error"
|
||||
error_found=true
|
||||
fi
|
||||
|
||||
# a valid grid - no errors should be emitted
|
||||
./node_modules/.bin/tsc --target "ES5" --module 'commonjs' --lib esnext,dom --allowSyntheticDefaultImports --jsx 'preserve' --noEmit --strict ts-tests/SimpleFunctionalGrid.tsx &> /dev/null
|
||||
if [ $? -ne 0 ]; then
|
||||
echo "valid ag-grid-react grid should compile"
|
||||
error_found=true
|
||||
fi
|
||||
|
||||
if [ "$error_found" = true ]; then
|
||||
exit 1
|
||||
fi
|
||||
|
||||
exit 0
|
||||
Reference in New Issue
Block a user