diff --git a/config/webpack.config.examples.js b/config/webpack.config.examples.js index f8e7d1d..2a1c779 100644 --- a/config/webpack.config.examples.js +++ b/config/webpack.config.examples.js @@ -35,8 +35,9 @@ module.exports = { }, resolve: { alias: { - "ag-grid-community": path.resolve('./node_modules/ag-grid-community'), - "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), + // "@ag-grid-community/core/modules": path.resolve('./node_modules/@ag-grid-community/core/dist/es2015/modules'), + "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'), + // "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), react: path.resolve('./node_modules/react') }, extensions: ['.js', '.jsx'] @@ -48,4 +49,4 @@ module.exports = { port: 8080, historyApiFallback: true } -}; \ No newline at end of file +}; diff --git a/config/webpack.config.large.js b/config/webpack.config.large.js index efb9ee2..229cc24 100644 --- a/config/webpack.config.large.js +++ b/config/webpack.config.large.js @@ -31,7 +31,7 @@ module.exports = { }, resolve: { alias: { - "ag-grid-community": path.resolve('./node_modules/ag-grid-community'), + "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'), "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), react: path.resolve('./node_modules/react') }, @@ -43,4 +43,4 @@ module.exports = { devServer: { port: 8080, } -}; \ No newline at end of file +}; diff --git a/config/webpack.config.trader.js b/config/webpack.config.trader.js index b6a5b20..845c6a5 100644 --- a/config/webpack.config.trader.js +++ b/config/webpack.config.trader.js @@ -31,7 +31,7 @@ module.exports = { }, resolve: { alias: { - "ag-grid-community": path.resolve('./node_modules/ag-grid-community'), + "@ag-grid-community/core": path.resolve('./node_modules/@ag-grid-community/core'), "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'), react: path.resolve('./node_modules/react') }, @@ -43,4 +43,4 @@ module.exports = { devServer: { port: 8080, } -}; \ No newline at end of file +}; diff --git a/package.json b/package.json index eb0fff9..c8c57ba 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "ag-grid-react-example", - "version": "21.2.0", + "version": "22.0.0", "description": "Example Reach applicaiton using ag-Grid.", "main": "dist/ag-grid-react-example.js", "scripts": { @@ -38,13 +38,14 @@ }, "homepage": "http://www.ag-grid.com/", "devDependencies": { + "@ag-grid-community/core": "~22.0.0", "@babel/core": "7.4.4", "@babel/plugin-proposal-class-properties": "7.4.4", "@babel/plugin-proposal-function-bind": "7.2.0", "@babel/preset-env": "7.4.4", "@babel/preset-react": "7.0.0", - "@types/react": "16.8.17", - "@types/react-dom": "16.8.4", + "@types/react": "16.9.2", + "@types/react-dom": "16.9.0", "babel-loader": "8.0.6", "css-loader": "2.1.1", "file-loader": "3.0.1", @@ -61,9 +62,8 @@ "webpack-dev-server": "3.4.1" }, "dependencies": { - "ag-grid-community": "^21.0.0", - "ag-grid-enterprise": "^21.0.0", - "ag-grid-react": "^21.0.0", + "@ag-grid-enterprise/all-modules": "~22.0.0", + "@ag-grid-community/react": "~22.0.0", "bootstrap": "4.3.1", "d3": "4.9.1", "lodash": "4.17.11", diff --git a/src-examples/App.jsx b/src-examples/App.jsx index 812c66d..0c014e8 100644 --- a/src-examples/App.jsx +++ b/src-examples/App.jsx @@ -2,7 +2,6 @@ import React, {Component} from "react"; import {Redirect, Route, Switch} from "react-router-dom"; import NavItem from "./NavItem"; - import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample"; import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample"; import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample"; diff --git a/src-examples/index.js b/src-examples/index.js index 1beba44..3e0eae7 100644 --- a/src-examples/index.js +++ b/src-examples/index.js @@ -4,14 +4,14 @@ import React from "react"; import {render} from "react-dom"; import {BrowserRouter} from "react-router-dom"; -import "ag-grid-community/dist/styles/ag-grid.css"; -import "ag-grid-community/dist/styles/ag-theme-balham.css"; +import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"; +import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-balham.css"; import "../node_modules/bootstrap/dist/css/bootstrap.css"; import App from "./App"; // only required when using enterprise features -// import {LicenseManager} from "ag-grid-enterprise/main"; +// import {LicenseManager} from "@ag-grid-enterprise/all-modules"; // LicenseManager.setLicenseKey(""); document.addEventListener('DOMContentLoaded', () => { diff --git a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx index 168a8a0..369f89f 100644 --- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx +++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx @@ -1,5 +1,5 @@ import React, {Component} from "react"; -import {AgGridColumn, AgGridReact} from "ag-grid-react"; +import {AgGridColumn, AgGridReact} from "@ag-grid-community/react"; import RowDataFactory from "./RowDataFactory"; import DateComponent from "./DateComponent.jsx"; import SkillsCellRenderer from './SkillsCellRenderer.jsx'; @@ -12,8 +12,12 @@ import HeaderGroupComponent from './HeaderGroupComponent.jsx'; import SortableHeaderComponent from './SortableHeaderComponent.jsx'; import "./RichGridDeclarativeExample.css"; -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; + +// for community features +// import {AllCommunityModules} from "@ag-grid-community/all-modules"; + +// for enterprise features +import {AllModules} from "@ag-grid-enterprise/all-modules"; export default class RichGridDeclarativeExample extends Component { constructor(props) { @@ -193,6 +197,9 @@ export default class RichGridDeclarativeExample extends Component { // binding to array properties rowData={this.state.rowData} + // register all modules (row model, csv/excel, row grouping etc) + modules={AllModules} + // no binding, just providing hard coded strings for the properties // boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true") suppressRowClickSelection diff --git a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx b/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx index 319cbb4..8609507 100644 --- a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx +++ b/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx @@ -1,7 +1,6 @@ import React, {Component} from "react"; import {connect} from "react-redux"; - -import {AgGridReact} from "ag-grid-react"; +import {AgGridReact} from "@ag-grid-community/react"; import PriceRenderer from "./PriceRenderer"; @@ -45,8 +44,6 @@ class GridComponent extends Component { columnDefs={this.state.columnDefs} rowData={this.props.rowData} - reactNext={true} - // events onGridReady={this.onGridReady}> @@ -62,4 +59,4 @@ export default connect( rowData: state.rowData } } -)(GridComponent); \ No newline at end of file +)(GridComponent); diff --git a/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx b/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx index 49debc9..cd3c5ac 100644 --- a/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx +++ b/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx @@ -1,7 +1,5 @@ import React, {Component} from "react"; import {connect} from "react-redux"; -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; import {setCurrency, updateRowData} from "./gridDataActions"; diff --git a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx b/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx index 1da323b..e41f8e1 100644 --- a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx +++ b/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx @@ -41,5 +41,5 @@ export default connect( }, null, null, - {forwardRef: true} // must be supplied for react/redux when using GridOptions.reactNext -)(PriceRenderer); \ No newline at end of file + {forwardRef: true} // must be supplied for react/redux when using AgGridReact +)(PriceRenderer); diff --git a/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx b/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx index e46a03e..77cd6ad 100644 --- a/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx +++ b/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx @@ -1,8 +1,6 @@ import React, {Component} from "react"; import {Provider} from "react-redux"; import {createStore} from "redux"; -// take this line out if you do not want to use ag-Grid-Enterprise -import "ag-grid-enterprise"; import HeaderComponent from "./HeaderComponent"; import GridComponent from "./GridComponent"; diff --git a/src-examples/simpleReduxHooksExample/GridComponent.jsx b/src-examples/simpleReduxHooksExample/GridComponent.jsx index 4f924da..30b36d4 100644 --- a/src-examples/simpleReduxHooksExample/GridComponent.jsx +++ b/src-examples/simpleReduxHooksExample/GridComponent.jsx @@ -1,6 +1,6 @@ -import React, { useContext } from "react"; +import React, {useContext} from "react"; import {Context} from "./store"; -import {AgGridReact} from "ag-grid-react"; +import {AgGridReact} from "@ag-grid-community/react"; /* * This component serves to display the row data (provided by redux) @@ -22,7 +22,7 @@ export default function GridComponent() { columnDefs={columnDefs} rowData={rowData} - reactNext={true} + defaultColDef={{filter: true}} // events onGridReady={onGridReady}> diff --git a/src-examples/simpleReduxHooksExample/PriceEditor.jsx b/src-examples/simpleReduxHooksExample/PriceEditor.jsx new file mode 100644 index 0000000..9a360ab --- /dev/null +++ b/src-examples/simpleReduxHooksExample/PriceEditor.jsx @@ -0,0 +1,18 @@ +import React, {useEffect, forwardRef, useImperativeHandle, useRef} from "react"; + +export default forwardRef((props, ref) => { + const inputRef = useRef(); + useImperativeHandle(ref, () => { + return { + getValue: () => { + return inputRef.current.value; + } + }; + }); + + useEffect(() => { + // https://github.com/facebook/react/issues/7835#issuecomment-395504863 + setTimeout(() => inputRef.current.focus(), 10) + }, []); + return ; +}) diff --git a/src-examples/simpleReduxHooksExample/PriceFilter.jsx b/src-examples/simpleReduxHooksExample/PriceFilter.jsx new file mode 100644 index 0000000..c05817c --- /dev/null +++ b/src-examples/simpleReduxHooksExample/PriceFilter.jsx @@ -0,0 +1,18 @@ +import React, {forwardRef, useImperativeHandle, useRef} from "react"; + +export default forwardRef((props, ref) => { + const inputRef = useRef(); + useImperativeHandle(ref, () => { + return { + isFilterActive() { + return inputRef.current.value !== ''; + }, + + doesFilterPass: (params) => { + return params.data.price.toString() === inputRef.current.value; + } + }; + }); + + return props.filterChangedCallback()}/>; +}) diff --git a/src-examples/simpleReduxHooksExample/store.js b/src-examples/simpleReduxHooksExample/store.js index da862a6..4d40b6b 100644 --- a/src-examples/simpleReduxHooksExample/store.js +++ b/src-examples/simpleReduxHooksExample/store.js @@ -1,15 +1,21 @@ import React from "react"; import PriceRenderer from "./PriceRenderer"; +import PriceEditor from "./PriceEditor"; +import PriceFilter from "./PriceFilter"; export const initialState = { rowData: [], columnDefs: [ { - field: 'symbol' + field: 'symbol', + editable: true }, { field: 'price', cellClass: 'align-right', + editable: true, + cellEditorFramework: PriceEditor, + filterFramework: PriceFilter, cellRendererFramework: PriceRenderer } ] diff --git a/src-large-data/index.js b/src-large-data/index.js index dfadde9..e96ebe7 100644 --- a/src-large-data/index.js +++ b/src-large-data/index.js @@ -4,8 +4,8 @@ import ReactDOM from 'react-dom'; import React from 'react'; import LargeGrid from './largeGrid.jsx'; -import 'ag-grid-community/dist/styles/ag-grid.css'; -import 'ag-grid-community/dist/styles/ag-theme-fresh.css'; +import '@ag-grid-community/core/dist/styles/ag-grid.css'; +import '@ag-grid-community/core/dist/styles/ag-theme-fresh.css'; // waiting for dom to load before booting react. we could alternatively // put the index.js reference at the end fo the index.html, but i prefer this way. diff --git a/src-large-data/largeGrid.jsx b/src-large-data/largeGrid.jsx index cbdcd16..75dd0ed 100644 --- a/src-large-data/largeGrid.jsx +++ b/src-large-data/largeGrid.jsx @@ -1,10 +1,12 @@ import React, {Component} from 'react'; import SimpleCellRenderer from './simpleCellRenderer.jsx'; +import {AgGridReact} from '@ag-grid-community/react'; -import {AgGridReact} from 'ag-grid-react'; +// for community features +import {AllModules} from "@ag-grid-enterprise/all-modules"; -// put this line in to use ag-Grid enterprise -// import 'ag-grid-enterprise'; +// for enterprise features +// import {AllModules} from "@ag-grid-enterprise/all-modules"; export default class MyApp extends Component { @@ -62,7 +64,7 @@ export default class MyApp extends Component { render() { return (
- +
); } diff --git a/src-trader-dashboard/components/FxQuoteMatrix.jsx b/src-trader-dashboard/components/FxQuoteMatrix.jsx index 40828f5..925b8c4 100644 --- a/src-trader-dashboard/components/FxQuoteMatrix.jsx +++ b/src-trader-dashboard/components/FxQuoteMatrix.jsx @@ -1,7 +1,9 @@ import React, {Component} from "react"; import {connect} from "react-redux"; -import {AgGridReact} from "ag-grid-react"; +import {AgGridReact} from "@ag-grid-community/react"; + +import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules"; class FxQuoteMatrix extends Component { constructor(props) { @@ -71,6 +73,8 @@ class FxQuoteMatrix extends Component { // callbacks getRowNodeId={this.getRowNodeId} + modules={[ClientSideRowModelModule]} + // events onGridReady={this.onGridReady}> @@ -85,4 +89,4 @@ export default connect( rowData: state ? state.fxData : null } } -)(FxQuoteMatrix); \ No newline at end of file +)(FxQuoteMatrix); diff --git a/src-trader-dashboard/components/PriceChangesGrid.jsx b/src-trader-dashboard/components/PriceChangesGrid.jsx index 2ce60df..1832441 100644 --- a/src-trader-dashboard/components/PriceChangesGrid.jsx +++ b/src-trader-dashboard/components/PriceChangesGrid.jsx @@ -1,6 +1,7 @@ import React, {Component} from "react"; -import {AgGridReact} from "ag-grid-react"; +import {AgGridReact} from "@ag-grid-community/react"; +import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules"; import map from "lodash/map"; import difference from "lodash/difference"; @@ -160,6 +161,8 @@ export default class extends Component { }} rowSelection="single" + modules={[ClientSideRowModelModule]} + // callbacks getRowNodeId={this.getRowNodeId} @@ -170,4 +173,4 @@ export default class extends Component { ); } -} \ No newline at end of file +} diff --git a/src-trader-dashboard/components/TopMoversGrid.jsx b/src-trader-dashboard/components/TopMoversGrid.jsx index 40108d0..a4faacf 100644 --- a/src-trader-dashboard/components/TopMoversGrid.jsx +++ b/src-trader-dashboard/components/TopMoversGrid.jsx @@ -1,7 +1,8 @@ import React, {Component} from "react"; import {connect} from "react-redux"; -import {AgGridReact} from "ag-grid-react"; +import {AgGridReact} from "@ag-grid-community/react"; +import {ClientSideRowModelModule} from "@ag-grid-enterprise/all-modules"; class TopMoversGrid extends Component { constructor(props) { @@ -75,6 +76,8 @@ class TopMoversGrid extends Component { deltaRowDataMode getRowNodeId={this.getRowNodeId} + modules={[ClientSideRowModelModule]} + // events onGridReady={this.onGridReady}> diff --git a/src-trader-dashboard/index.js b/src-trader-dashboard/index.js index 4788551..91d921f 100644 --- a/src-trader-dashboard/index.js +++ b/src-trader-dashboard/index.js @@ -5,12 +5,12 @@ import {render} from "react-dom"; import {Provider} from "react-redux"; -import "ag-grid-community/dist/styles/ag-grid.css"; -import "ag-grid-community/dist/styles/ag-theme-fresh.css"; - import StoreService from './services/StoreService'; import TraderDashboard from "./components/TraderDashboard.jsx"; +import "@ag-grid-enterprise/all-modules/dist/styles/ag-grid.css"; +import "@ag-grid-enterprise/all-modules/dist/styles/ag-theme-fresh.css"; + let store = StoreService.STORE; document.addEventListener('DOMContentLoaded', () => { diff --git a/ts-tests/InvalidGridProperty.tsx b/ts-tests/InvalidGridProperty.tsx index 82dd282..9ded5a0 100644 --- a/ts-tests/InvalidGridProperty.tsx +++ b/ts-tests/InvalidGridProperty.tsx @@ -1,4 +1,4 @@ import React from 'react'; -import {AgGridReact} from 'ag-grid-react'; +import {AgGridReact} from '@ag-grid-community/react'; export const App: React.FunctionComponent = () => ; diff --git a/ts-tests/SimpleFunctionalGrid.tsx b/ts-tests/SimpleFunctionalGrid.tsx index e739f7f..9ff85ba 100644 --- a/ts-tests/SimpleFunctionalGrid.tsx +++ b/ts-tests/SimpleFunctionalGrid.tsx @@ -1,4 +1,4 @@ import React from 'react'; -import {AgGridReact} from 'ag-grid-react'; +import {AgGridReact} from '@ag-grid-community/react'; export const App: React.FunctionComponent = () => ;