Merge b20.0.0 to Master

2019-01-11 10:47:17 +00:00
parent 58df719d45 f81d48b3d4
commit cb6dbfb186
10 changed files with 68 additions and 67 deletions
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "ag-grid-react-example",
-  "version": "19.1.2",
+  "version": "20.0.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
@@ -37,14 +37,14 @@
  },
  "homepage": "http://www.ag-grid.com/",
  "devDependencies": {
-    "@babel/core": "7.1.2",
+    "@babel/core": "7.2.2",
    "babel-loader": "8.0.4",
-    "@babel/preset-env": "7.1.0",
+    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
-    "@babel/plugin-proposal-class-properties": "7.1.0",
-    "@babel/plugin-proposal-function-bind": "7.0.0",
-    "css-loader": "1.0.0",
-    "file-loader": "2.0.0",
+    "@babel/plugin-proposal-class-properties": "7.2.3",
+    "@babel/plugin-proposal-function-bind": "7.2.0",
+    "css-loader": "2.1.0",
+    "file-loader": "3.0.1",
    "gulp": "3.9.1",
    "merge2": "^1.2.3",
    "mkdirp": "0.5.1",
@@ -52,21 +52,21 @@
    "prop-types": "15.6.2",
    "rimraf": "~2.6.2",
    "style-loader": "~0.23.0",
-    "webpack": "^4.16.1",
-    "webpack-cli": "^3.0.8",
-    "webpack-dev-server": "^3.1.4"
+    "webpack": "4.28.3",
+    "webpack-cli": "3.2.0",
+    "webpack-dev-server": "3.1.14"
  },
  "dependencies": {
-    "ag-grid-community": "^19.1.0",
-    "ag-grid-enterprise": "^19.1.0",
-    "ag-grid-react": "^19.1.0",
+    "ag-grid-community": "^20.0.0",
+    "ag-grid-enterprise": "^20.0.0",
+    "ag-grid-react": "^20.0.0",
    "bootstrap": "4.1.3",
    "d3": "4.9.1",
    "lodash": "^4.17.11",
-    "react": "^16.5.2",
-    "react-dom": "^16.5.2",
-    "react-redux": "5.0.7",
+    "react": "16.7.0",
+    "react-dom": "16.7.0",
+    "react-redux": "6.0.0",
    "react-router-dom": "4.3.1",
-    "redux": "^4.0.1"
+    "redux": "4.0.1"
  }
 }
--- a/src-examples/index.html
+++ b/src-examples/index.html
@@ -5,7 +5,7 @@
    <meta charset="utf-8">
    <script type="text/javascript" src="../dist/react-examples.js" charset="utf-8"></script>
    <!-- Example uses font awesome icons -->
-    <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
+    <link href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" rel="stylesheet">

    <style>
        html, body {
--- a/src-examples/richGridDeclarativeExample/DateComponent.jsx
+++ b/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>
        );
--- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
+++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
@@ -25,12 +25,12 @@ export default class RichGridDeclarativeExample extends Component {
            sideBar: false,
            rowData: new RowDataFactory().createRowData(),
            icons: {
-                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
+                columnRemoveFromGroup: '<i class="fa fa-times"/>',
                filter: '<i class="fa fa-filter"/>',
-                sortAscending: '<i class="fa fa-long-arrow-down"/>',
-                sortDescending: '<i class="fa fa-long-arrow-up"/>',
-                groupExpanded: '<i class="fa fa-minus-square-o"/>',
-                groupContracted: '<i class="fa fa-plus-square-o"/>'
+                sortAscending: '<i class="fa fa-long-arrow-alt-down"/>',
+                sortDescending: '<i class="fa fa-long-arrow-alt-up"/>',
+                groupExpanded: '<i class="far fa-minus-square"/>',
+                groupContracted: '<i class="far fa-plus-square"/>'
            }
        };
    }
@@ -179,12 +179,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 +190,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 +200,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 +218,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>
--- a/src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx
+++ b/src-examples/richGridDeclarativeExample/SortableHeaderComponent.jsx
@@ -30,10 +30,10 @@ export default class SortableHeaderComponent extends React.Component {

            sortElements.push(<div key={`up${this.props.displayName}`} className={downArrowClass}
                                   onClick={this.onSortRequested.bind(this, 'desc')}><i
-                className="fa fa-long-arrow-down"/></div>);
+                className="fa fa-long-arrow-alt-down"/></div>);
            sortElements.push(<div key={`down${this.props.displayName}`} className={upArrowClass}
                                   onClick={this.onSortRequested.bind(this, 'asc')}><i
-                className="fa fa-long-arrow-up"/></div>);
+                className="fa fa-long-arrow-alt-up"/></div>);
            sortElements.push(<div key={`minus${this.props.displayName}`} className={removeArrowClass}
                                   onClick={this.onSortRequested.bind(this, '')}><i
                className="fa fa-times"/></div>)
--- a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
+++ b/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) => {
--- a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
+++ b/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);
--- a/src-trader-dashboard/components/FxQuoteMatrix.jsx
+++ b/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++) {
-            let newRow = newRowData[i];
-            let currentRowNode = this.gridApi.getRowNode(newRow.symbol);
+            for (let i = 0; i < newRowData.length; i++) {
+                let newRow = newRowData[i];
+                let currentRowNode = this.gridApi.getRowNode(newRow.symbol);

-            const {data} = currentRowNode;
-            for (const def of this.state.columnDefs) {
-                if (data[def.field] !== newRow[def.field]) {
-                    updatedRows.push(newRow);
-                    break;
+                const {data} = currentRowNode;
+                for (const def of this.state.columnDefs) {
+                    if (data[def.field] !== newRow[def.field]) {
+                        updatedRows.push(newRow);
+                        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"
-                    enableFilter="false"
+                    defaultColDef={{
+                        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);
--- a/src-trader-dashboard/components/PriceChangesGrid.jsx
+++ b/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
--- a/src-trader-dashboard/components/TopMoversGrid.jsx
+++ b/src-trader-dashboard/components/TopMoversGrid.jsx
@@ -67,8 +67,10 @@ class TopMoversGrid extends Component {
                    // properties
                    columnDefs={this.state.columnDefs}
                    rowData={this.props.rowData}
-                    enableSorting
-                    enableFilter="false"
+                    defaultColDef={{
+                        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);