Release 20.1.0 dist files added and license key updated

AG-2417 Issue with React 6: withRef is removed. To access the wrapped instance, use a ref on the connected component
AG-2439 Add support for react-redux v6

h/t @hrgui - thanks!

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ag-grid-react-example",
-  "version": "19.1.2",
+  "version": "20.1.0",
   "description": "Example Reach applicaiton using ag-Grid.",
   "main": "dist/ag-grid-react-example.js",
   "scripts": {
@@ -37,36 +37,36 @@
   },
   "homepage": "http://www.ag-grid.com/",
   "devDependencies": {
-    "@babel/core": "7.1.2",
+    "@babel/core": "7.3.3",
-    "babel-loader": "8.0.4",
+    "babel-loader": "8.0.5",
-    "@babel/preset-env": "7.1.0",
+    "@babel/preset-env": "7.3.1",
     "@babel/preset-react": "7.0.0",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
+    "@babel/plugin-proposal-class-properties": "7.3.3",
-    "@babel/plugin-proposal-function-bind": "7.0.0",
+    "@babel/plugin-proposal-function-bind": "7.2.0",
-    "css-loader": "1.0.0",
+    "css-loader": "2.1.0",
-    "file-loader": "2.0.0",
+    "file-loader": "3.0.1",
     "gulp": "3.9.1",
-    "merge2": "^1.2.3",
+    "merge2": "1.2.3",
     "mkdirp": "0.5.1",
     "ncp": "2.0.0",
-    "prop-types": "15.6.2",
+    "prop-types": "15.7.2",
-    "rimraf": "~2.6.2",
+    "rimraf": "2.6.3",
-    "style-loader": "~0.23.0",
+    "style-loader": "0.23.1",
-    "webpack": "^4.16.1",
+    "webpack": "4.29.5",
-    "webpack-cli": "^3.0.8",
+    "webpack-cli": "3.2.3",
-    "webpack-dev-server": "^3.1.4"
+    "webpack-dev-server": "3.2.0"
   },
   "dependencies": {
-    "ag-grid-community": "^19.1.0",
+    "ag-grid-community": "^20.1.0",
-    "ag-grid-enterprise": "^19.1.0",
+    "ag-grid-enterprise": "^20.1.0",
-    "ag-grid-react": "^19.1.0",
+    "ag-grid-react": "^20.1.0",
-    "bootstrap": "4.1.3",
+    "bootstrap": "4.3.1",
     "d3": "4.9.1",
-    "lodash": "^4.17.11",
+    "lodash": "4.17.11",
-    "react": "^16.5.2",
+    "react": "16.8.2",
-    "react-dom": "^16.5.2",
+    "react-dom": "16.8.2",
-    "react-redux": "5.0.7",
+    "react-redux": "6.0.1",
     "react-router-dom": "4.3.1",
-    "redux": "^4.0.1"
+    "redux": "4.0.1"
   }
 }

src-examples/App.jsx

@@ -5,12 +5,14 @@ import NavItem from "./NavItem";
 
 import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDeclarativeExample";
 import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";
+import SimpleReduxHookExample from "./simpleReduxHooksExample/SimpleReduxHookExample";
 
 const SideBar = () => (
     <div style={{float: "left", width: 335, marginRight: 25}}>
         <ul className="nav nav-pills">
             <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
             <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
+            <NavItem to='/simple-redux-hook'>Simple React Hook Component Example</NavItem>
         </ul>
     </div>
 );
@@ -25,6 +27,7 @@ class App extends Component {
                         <Redirect from="/" exact to="/rich-grid-declarative"/>
                         <Route exact path='/rich-grid-declarative' component={RichGridDeclarativeExample}/>
                         <Route exact path='/simple-redux-dynamic' component={SimpleReduxDynamicExample}/>
+                        <Route exact path='/simple-redux-hook' component={SimpleReduxHookExample}/>
                     </Switch>
                 </div>
             </div>

src-examples/richGridDeclarativeExample/DateComponent.jsx

@@ -51,11 +51,11 @@ export default class DateComponent extends React.Component {
         return (
             <div style={filterStyle}>
                 <span style={resetStyle} onClick={this.resetDate.bind(this)}>x</span>
-                <input onInput={this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle}
+                <input onChange={this.onDateChanged.bind(this)} ref="dd" placeholder="dd" style={ddStyle}
                        value={this.state.textBoxes.dd} maxLength="2"/>/
-                <input onInput={this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle}
+                <input onChange={this.onDateChanged.bind(this)} ref="mm" placeholder="mm" style={mmStyle}
                        value={this.state.textBoxes.mm} maxLength="2"/>/
-                <input onInput={this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle}
+                <input onChange={this.onDateChanged.bind(this)} ref="yyyy" placeholder="yyyy" style={yyyyStyle}
                        value={this.state.textBoxes.yyyy} maxLength="4"/>
             </div>
         );

src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx

@@ -141,17 +141,8 @@ export default class RichGridDeclarativeExample extends Component {
                     </div>
                     <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>
-                        </div>
-                        <div style={{float: "left", marginLeft: 20}}>
                             <button onClick={this.onRefreshData} className="btn btn-primary">Refresh Data</button>
                         </div>
-                        <div style={{float: "left", marginLeft: 20}}>
-                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
-                        </div>
                         <div style={{float: "right"}}>
                             Filter API:
                             <button onClick={this.invokeSkillsFilterMethod}
@@ -161,6 +152,17 @@ export default class RichGridDeclarativeExample extends Component {
                             </button>
                         </div>
                     </div>
+                   <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>
+                        </div>
+                        <div style={{float: "left", marginLeft: 20}}>
+                            <input type="text" onChange={this.onQuickFilterText} placeholder="Type text to filter..."/>
+                        </div>
+                    </div>
                     <div style={{height: 400, width: 900}} className="ag-theme-balham">
                         <AgGridReact
                             // listening for events
@@ -179,12 +181,9 @@ export default class RichGridDeclarativeExample extends Component {
                             rowData={this.state.rowData}
 
                             // no binding, just providing hard coded strings for the properties
-                            // boolean properties will default to true if provided (ie enableColResize => enableColResize="true")
+                            // boolean properties will default to true if provided (ie suppressRowClickSelection => suppressRowClickSelection="true")
                             suppressRowClickSelection
                             rowSelection="multiple"
-                            enableColResize
-                            enableSorting
-                            enableFilter
                             floatingFilter
                             groupHeaders
 
@@ -193,6 +192,9 @@ export default class RichGridDeclarativeExample extends Component {
 
                             // setting default column properties
                             defaultColDef={{
+                                resizable: true,
+                                sortable: true,
+                                filter: true,
                                 headerComponentFramework: SortableHeaderComponent,
                                 headerComponentParams: {
                                     menuIcon: 'fa-bars'
@@ -200,7 +202,7 @@ export default class RichGridDeclarativeExample extends Component {
                             }}
                         >
                             <AgGridColumn headerName="#" width={30}
-                                          checkboxSelection suppressSorting suppressMenu suppressFilter pinned>
+                                          checkboxSelection sortable={false} suppressMenu filter={false} pinned>
                             </AgGridColumn>
                             <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
                                 <AgGridColumn field="name" width={150}
@@ -218,10 +220,10 @@ export default class RichGridDeclarativeExample extends Component {
                                               cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
                             </AgGridColumn>
                             <AgGridColumn headerName="IT Skills">
-                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting
+                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot sortable={false}
                                               cellRendererFramework={SkillsCellRenderer}
                                               filterFramework={SkillsFilter}/>
-                                <AgGridColumn field="proficiency" width={135} enableValue
+                                <AgGridColumn field="proficiency" width={160} enableValue
                                               cellRendererFramework={ProficiencyCellRenderer}
                                               filterFramework={ProficiencyFilter}/>
                             </AgGridColumn>

src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx

@@ -1,12 +1,9 @@
 import React, {Component} from "react";
-import * as PropTypes from "prop-types";
-
-import {AgGridReact} from "ag-grid-react";
 import {connect} from "react-redux";
 
-import PriceRenderer from "./PriceRenderer";
+import {AgGridReact} from "ag-grid-react";
 
-const ThemeContext = React.createContext('light');
+import PriceRenderer from "./PriceRenderer";
 
 /*
  * This component serves to display the row data (provided by redux)
@@ -49,7 +46,6 @@ class GridComponent extends Component {
                     rowData={this.props.rowData}
 
                     reactNext={true}
-                    reduxStore={this.context.store} // must be supplied when using redux with reactNext
 
                     // events
                     onGridReady={this.onGridReady}>
@@ -59,10 +55,6 @@ class GridComponent extends Component {
     }
 }
 
-GridComponent.contextTypes = {
-    store: PropTypes.object                         // must be supplied when using redux with reactNext
-};
-
 // pull off row data changes
 export default connect(
     (state) => {

src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx

@@ -21,7 +21,8 @@ class PriceRenderer extends Component {
     render() {
         return (
             <FontContext.Consumer>
-                {fontWeight => <span style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span> }
+                {fontWeight => <span
+                    style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span>}
             </FontContext.Consumer>
         );
     }
@@ -40,5 +41,5 @@ export default connect(
     },
     null,
     null,
-    {withRef: true} // must be supplied for react/redux when using GridOptions.reactNext
+    {forwardRef: true} // must be supplied for react/redux when using GridOptions.reactNext
 )(PriceRenderer);

src-examples/simpleReduxHooksExample/GridComponent.jsx

@@ -0,0 +1,32 @@
+import React, { useContext } from "react";
+import {Context} from "./store";
+import {AgGridReact} from "ag-grid-react";
+
+/*
+ * This component serves to display the row data (provided by redux)
+ */
+export default function GridComponent() {
+    const {store, dispatch} = useContext(Context);
+    const {columnDefs, rowData} = store;
+
+    const onGridReady = (params) => {
+        params.api.sizeColumnsToFit();
+    };
+
+    // row data will be provided via redux on this.props.rowData
+    return (
+        <div style={{height: 400, width: 900, marginTop: 15}}
+             className="ag-theme-balham">
+            <AgGridReact
+                // properties
+                columnDefs={columnDefs}
+                rowData={rowData}
+
+                reactNext={true}
+
+                // events
+                onGridReady={onGridReady}>
+            </AgGridReact>
+        </div>
+    )
+}

src-examples/simpleReduxHooksExample/PriceRenderer.jsx

@@ -0,0 +1,13 @@
+import React, {Component} from "react";
+
+export default class PriceRenderer extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <span>{this.props.value}</span>
+        );
+    }
+}

src-examples/simpleReduxHooksExample/SimpleReduxHookExample.jsx

@@ -0,0 +1,18 @@
+import React, {useReducer} from "react";
+import GridComponent from "./GridComponent";
+
+import {Context, initialState, reducer} from "./store";
+
+export default function SimpleReduxHookExample() {
+    const [store, dispatch] = useReducer(reducer, initialState);
+
+    return (
+        <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>
+                <GridComponent/>
+            </div>
+        </Context.Provider>
+    )
+}

src-examples/simpleReduxHooksExample/gridDataActions.jsx

@@ -0,0 +1,14 @@
+export function updateRowData(rowData) {
+    return {
+        type: 'ROW_DATA_CHANGED',
+        rowData
+    }
+}
+
+export function setCurrency(currencySymbol, exchangeRate) {
+    return {
+        type: 'CURRENCY_CHANGED',
+        currencySymbol,
+        exchangeRate
+    }
+}

src-examples/simpleReduxHooksExample/store.js

@@ -0,0 +1,75 @@
+import React from "react";
+import PriceRenderer from "./PriceRenderer";
+
+export const initialState = {
+    rowData: [],
+    columnDefs: [
+        {
+            field: 'symbol'
+        },
+        {
+            field: 'price',
+            cellClass: 'align-right',
+            cellRendererFramework: PriceRenderer
+        }
+    ]
+};
+
+export const reducer = (state = {rowData: []}, action) => {
+    switch (action.type) {
+        case 'SET_ROW_DATA':
+            return {
+                ...state,
+                rowData: createRowData()
+            };
+        default:
+            return state;
+    }
+};
+
+export const Context = React.createContext();
+
+
+// for test data
+// the following methods are for creating dummy row data
+const createRowData = () => {
+    let rowData = [];
+
+    for (let i = 0; i < 14; i++) {
+        let newItem = createItem(rowData);
+        rowData.push(newItem);
+    }
+
+    return rowData;
+};
+
+const createItem = (rowData) => {
+    return {
+        symbol: createUniqueRandomSymbol(rowData),
+        price: Math.floor(Math.random() * 100)
+    };
+};
+
+// creates a unique symbol, eg 'ADG' or 'ZJD'
+const createUniqueRandomSymbol = (rowData) => {
+    let symbol;
+    let possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZ";
+
+    let isUnique = false;
+    while (!isUnique) {
+        symbol = '';
+        // create symbol
+        for (let i = 0; i < 3; i++) {
+            symbol += possible.charAt(Math.floor(Math.random() * possible.length));
+        }
+        // check uniqueness
+        isUnique = true;
+        rowData.forEach(function (oldItem) {
+            if (oldItem.symbol === symbol) {
+                isUnique = false;
+            }
+        });
+    }
+
+    return symbol;
+};

src-trader-dashboard/components/FxQuoteMatrix.jsx

@@ -32,26 +32,28 @@ class FxQuoteMatrix extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        const newRowData = nextProps.rowData;
+        if (this.gridApi) {
+            const newRowData = nextProps.rowData;
 
-        const updatedRows = [];
+            const updatedRows = [];
 
-        for (let i = 0; i < newRowData.length; i++) {
+            for (let i = 0; i < newRowData.length; i++) {
-            let newRow = newRowData[i];
+                let newRow = newRowData[i];
-            let currentRowNode = this.gridApi.getRowNode(newRow.symbol);
+                let currentRowNode = this.gridApi.getRowNode(newRow.symbol);
 
-            const {data} = currentRowNode;
+                const {data} = currentRowNode;
-            for (const def of this.state.columnDefs) {
+                for (const def of this.state.columnDefs) {
-                if (data[def.field] !== newRow[def.field]) {
+                    if (data[def.field] !== newRow[def.field]) {
-                    updatedRows.push(newRow);
+                        updatedRows.push(newRow);
-                    break;
+                        break;
+                    }
                 }
             }
+
+
+            this.gridApi.updateRowData({update: updatedRows});
         }
 
-
-        this.gridApi.updateRowData({update: updatedRows});
-
     }
 
     render() {
@@ -61,8 +63,10 @@ class FxQuoteMatrix extends Component {
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
-                    enableSorting="false"
+                    defaultColDef={{
-                    enableFilter="false"
+                        sortable: false,
+                        filter: false
+                    }}
 
                     // callbacks
                     getRowNodeId={this.getRowNodeId}
@@ -78,7 +82,7 @@ class FxQuoteMatrix extends Component {
 export default connect(
     (state) => {
         return {
-            rowData: state.fxData
+            rowData: state ? state.fxData : null
         }
     }
 )(FxQuoteMatrix);

src-trader-dashboard/components/PriceChangesGrid.jsx

@@ -155,7 +155,9 @@ export default class extends Component {
                 <AgGridReact
                     // properties
                     columnDefs={this.state.columnDefs}
-                    enableSorting="true"
+                    defaultColDef={{
+                        sortable: true
+                    }}
                     rowSelection="single"
 
                     // callbacks

src-trader-dashboard/components/TopMoversGrid.jsx

@@ -67,8 +67,10 @@ class TopMoversGrid extends Component {
                     // properties
                     columnDefs={this.state.columnDefs}
                     rowData={this.props.rowData}
-                    enableSorting
+                    defaultColDef={{
-                    enableFilter="false"
+                        sortable: true,
+                        filter: false
+                    }}
                     animateRows
                     deltaRowDataMode
                     getRowNodeId={this.getRowNodeId}
@@ -84,7 +86,7 @@ class TopMoversGrid extends Component {
 export default connect(
     (state) => {
         return {
-            rowData: state.fxTopMovers
+            rowData: state ? state.fxTopMovers : null
         }
     }
 )(TopMoversGrid);