release v19.1.0

AG-2178 Add docs and example on how to use Context API with React
AG-2177 React Example - allow force refresh (routing breaks)
2018-10-29 15:13:54 +00:00 · 2018-10-16 17:42:29 +01:00 · 2018-10-16 16:07:35 +01:00 · 2018-10-16 15:50:21 +01:00 · 2018-10-16 12:09:53 +01:00 · 2018-09-05 13:11:46 +01:00
25 changed files with 205 additions and 141 deletions
--- a/.gitignore
+++ b/.gitignore
@@ -1,2 +1,3 @@
 /node_modules
 /dist
+package-lock.json
--- a/README.md
+++ b/README.md
@@ -1,29 +1,18 @@
-
 ag-Grid React Example
 ==============

-Examples of running ag-Grid inside React application.
-
-See [www.ag-grid.com](http://www.ag-grid.com) for an overview and full documentation.
-
-Frameworks Supported
-====================
-Framework specific Getting Started guides:
-[Angular 1](https://www.ag-grid.com/best-angularjs-data-grid/) | [Angular 2](https://www.ag-grid.com/best-angular-2-data-grid/) | [Aurelia](https://www.ag-grid.com/best-aurelia-data-grid/)
-[Javascript](https://www.ag-grid.com/best-javascript-data-grid/) | [React](https://www.ag-grid.com/best-react-data-grid/) | [TypeScript](https://www.ag-grid.com/ag-grid-typescript-webpack-2/)
-[VueJS](https://www.ag-grid.com/best-vuejs-data-grid/) | [Web Components](https://www.ag-grid.com/best-web-component-data-grid/)
-
-There are two examples:
+## Examples

 1. standard - shows a typical grid demonstrating many ag-Grid features

 2. large - shows a very large grid (767 columns and 1,000 rows) using React cell renderers

+See [www.ag-grid.com](http://www.ag-grid.com) for full documentation and examples.
+
 Building
 ==============

 To build:
 - `npm install`
- `npm install webpack -g`
 - `npm run examples`, `npm run large` or `npm run trader`
 - navigate to localhost:8080
--- a/config/webpack.config.examples.js
+++ b/config/webpack.config.examples.js
@@ -3,42 +3,49 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-examples');

 module.exports = {
+    mode: 'production',
    entry: SRC_DIR + "/index.js",
    output: {
        path: path.resolve(__dirname, '../'),
        filename: "dist/react-examples.js"
    },
    module: {
-        loaders: [
+        rules: [
            {
                test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
            },
            {
                test: /\.js$|\.jsx$/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: {
-                    presets: ['react', 'es2015', 'stage-0']
+                    presets: ['@babel/preset-react', '@babel/preset-env'],
+                    plugins: [
+                        require('@babel/plugin-proposal-function-bind'),
+                        require('@babel/plugin-proposal-class-properties')
+                    ]
                }
            },
            {
                test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/,
-                loader: 'file?name=[path]/[name].[ext]'
+                loader: 'file-loader?name=[path]/[name].[ext]'
            }
        ]
    },
    resolve: {
        alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
            react: path.resolve('./node_modules/react')
        },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
    },
    devServer: {
-        historyApiFallback: true,
-        contentBase: './',
-        hot: true
+        port: 8080,
+        historyApiFallback: true
    }
 };
--- a/config/webpack.config.large.js
+++ b/config/webpack.config.large.js
@@ -3,33 +3,44 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-large-data');

 module.exports = {
+    mode: 'production',
    entry: SRC_DIR + "/index.js",
    output: {
        path: path.resolve(__dirname, '../'),
        filename: "dist/react-large.js"
    },
    module: {
-        loaders: [
+        rules: [
            {
                test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
            },
            {
                test: /\.js$|\.jsx$/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: {
-                    presets: ['react', 'es2015', 'stage-0']
+                    presets: ['@babel/preset-react', '@babel/preset-env'],
+                    plugins: [
+                        require('@babel/plugin-proposal-function-bind'),
+                        require('@babel/plugin-proposal-class-properties')
+                    ]
                }
            }
        ]
    },
    resolve: {
        alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
            react: path.resolve('./node_modules/react')
        },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
+    },
+    devServer: {
+        port: 8080,
    }
 };
--- a/config/webpack.config.trader.js
+++ b/config/webpack.config.trader.js
@@ -3,33 +3,44 @@ const path = require('path');
 const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard');

 module.exports = {
+    mode: 'production',
    entry: SRC_DIR + "/index.js",
    output: {
        path: path.resolve(__dirname, '../'),
        filename: "dist/react-trader.js"
    },
    module: {
-        loaders: [
+        rules: [
            {
                test: /\.css$/,
-                loader: "style!css"
+                loader: "style-loader!css-loader"
            },
            {
                test: /\.js$|\.jsx$/,
                include: SRC_DIR,
                loader: 'babel-loader',
                query: {
-                    presets: ['react', 'es2015', 'stage-0']
+                    presets: ['@babel/preset-react', '@babel/preset-env'],
+                    plugins: [
+                        require('@babel/plugin-proposal-function-bind'),
+                        require('@babel/plugin-proposal-class-properties')
+                    ]
                }
            }
        ]
    },
    resolve: {
        alias: {
-            "ag-grid": path.resolve('./node_modules/ag-grid'),
+            "ag-grid-community": path.resolve('./node_modules/ag-grid-community'),
            "ag-grid-enterprise": path.resolve('./node_modules/ag-grid-enterprise'),
            react: path.resolve('./node_modules/react')
        },
-        extensions: ['', '.js', '.jsx']
+        extensions: ['.js', '.jsx']
+    },
+    performance: {
+        hints: false
+    },
+    devServer: {
+        port: 8080,
    }
 };
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
  "name": "ag-grid-react-example",
-  "version": "16.0.0",
+  "version": "19.1.0",
  "description": "Example Reach applicaiton using ag-Grid.",
  "main": "dist/ag-grid-react-example.js",
  "scripts": {
-    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --progress --colors --hot --inline",
-    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --progress --colors --hot --inline",
-    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --progress --colors --hot --inline",
+    "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config config/webpack.config.trader.js --mode development --open",
+    "examples": "webpack-dev-server --content-base src-examples/ --config config/webpack.config.examples.js --mode development --open",
+    "large": "webpack-dev-server --content-base src-large-data/ --config config/webpack.config.large.js --mode development --open",
    "clean": "rimraf dist",
    "mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
    "copy-examples": "ncp src-examples/images dist/examples/images && ncp src-examples/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src-examples/ dist/examples/src",
@@ -17,14 +17,13 @@
    "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",
-    "copy-to-docs": "ncp dist/examples ../ag-grid-docs/src/framework-examples/react-examples/examples && ncp dist/trader ../ag-grid-docs/src/framework-examples/react-examples/trader",
-    "build-to-docs": "npm run build && npm run copy-to-docs",
    "start": "npm run examples"
  },
  "repository": {
    "type": "git",
    "url": "https://github.com/ag-grid/ag-grid-react-example.git"
  },
+  "private": true,
  "keywords": [
    "react",
    "grid",
@@ -38,39 +37,36 @@
  },
  "homepage": "http://www.ag-grid.com/",
  "devDependencies": {
-    "babel-core": "6.24.x",
-    "babel-loader": "6.4.x",
-    "babel-preset-es2015": "6.24.x",
-    "babel-preset-react": "6.24.x",
-    "babel-preset-stage-0": "6.24.x",
-    "babel-preset-stage-1": "6.24.x",
-    "css-loader": "0.23.x",
+    "@babel/core": "7.1.2",
+    "babel-loader": "8.0.4",
+    "@babel/preset-env": "7.1.0",
+    "@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",
+    "gulp": "3.9.1",
+    "merge2": "^1.2.3",
    "mkdirp": "0.5.1",
    "ncp": "2.0.0",
-    "prop-types": "15.6.0",
-    "rimraf": "2.5.x",
-    "style-loader": "0.13.x",
-    "webpack": "1.12.x",
-    "webpack-dev-server": "1.14.x",
-    "gulp": "3.9.x",
-    "gulp-typescript": "3.1.x",
-    "merge2": "1.0.x",
-    "typescript": "2.3.x"
+    "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"
  },
  "dependencies": {
-    "ag-grid": "^16.0.0",
-    "ag-grid-enterprise": "^16.0.0",
-    "ag-grid-react": "^16.0.0",
-    "bootstrap": "3.3.7",
+    "ag-grid-community": "^19.1.0",
+    "ag-grid-enterprise": "^19.1.0",
+    "ag-grid-react": "^19.1.0",
+    "bootstrap": "4.1.3",
    "d3": "4.9.1",
-    "file-loader": "0.11.1",
-    "lodash": "4.17.4",
-    "react": "16.0.0",
-    "react-dom": "16.0.0",
-    "react-dom-factories": "1.0.2",
-    "react-redux": "5.0.x",
-    "react-router-dom": "4.2.x",
-    "redux": "3.6.x",
-    "url-search-params-polyfill": "1.2.0"
+    "lodash": "^4.17.11",
+    "react": "^16.5.2",
+    "react-dom": "^16.5.2",
+    "react-redux": "5.0.7",
+    "react-router-dom": "4.3.1",
+    "redux": "^4.0.1"
  }
 }
--- a/src-examples/App.jsx
+++ b/src-examples/App.jsx
@@ -7,12 +7,12 @@ import RichGridDeclarativeExample from "./richGridDeclarativeExample/RichGridDec
 import SimpleReduxDynamicExample from "./simpleReduxDynamicComponentExample/SimpleReduxExample";

 const SideBar = () => (
-        <div style={{float: "left", width: 335, marginRight: 25}}>
-            <ul className="nav nav-pills nav-stacked">
-                <NavItem to='/rich-grid-declarative'>Rich Grid with Declarative Markup</NavItem>
-                <NavItem to='/simple-redux-dynamic'>Simple Redux Dynamic Component Example</NavItem>
-            </ul>
-        </div>
+    <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>
+        </ul>
+    </div>
 );

 class App extends Component {
--- a/src-examples/NavItem.jsx
+++ b/src-examples/NavItem.jsx
@@ -1,13 +1,13 @@
 import React from 'react'
 import * as PropTypes from 'prop-types';
-import {Route, Link} from 'react-router-dom'
+import {Link, Route} from 'react-router-dom'

 // for bootstrap li active functionality
 export default function NavItem({children, to, exact}) {
    return (
        <Route path={to} exact={exact} children={({match}) => (
-            <li className={match ? 'active' : null}>
-                <Link to={to}>{children}</Link>
+            <li className="nav-item">
+                <Link className={match ? 'nav-link active' : 'nav-link'} to={to}>{children}</Link>
            </li>
        )}/>
    )
--- a/src-examples/index.html
+++ b/src-examples/index.html
@@ -16,6 +16,10 @@
            line-height: 1
        }

+        h1 {
+            font-size: 1.5rem;
+        }
+
        div.card-body > a {
            margin-top: 5px
        }
--- a/src-examples/index.js
+++ b/src-examples/index.js
@@ -4,8 +4,8 @@ import React from "react";
 import {render} from "react-dom";
 import {BrowserRouter} from "react-router-dom";

-import "ag-grid/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/theme-fresh.css";
+import "ag-grid-community/dist/styles/ag-grid.css";
+import "ag-grid-community/dist/styles/ag-theme-balham.css";
 import "../node_modules/bootstrap/dist/css/bootstrap.css";

 import App from "./App";
--- a/src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx
+++ b/src-examples/richGridDeclarativeExample/ProficiencyFilter.jsx
@@ -54,7 +54,7 @@ export default class ProficiencyFilter extends React.Component {
        PROFICIENCY_NAMES.forEach((name) => {
            const selected = this.state.selected === name;
            rows.push(
-                <div key={name}>
+                <div key={name} style={{marginTop: 3}}>
                    <label style={{paddingLeft: 4}}>
                        <input type="radio" checked={selected} name={Math.random()}
                               onChange={this.onButtonPressed.bind(this, name)}/>
--- a/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
+++ b/src-examples/richGridDeclarativeExample/RichGridDeclarativeExample.jsx
@@ -12,7 +12,6 @@ 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";

@@ -23,7 +22,7 @@ export default class RichGridDeclarativeExample extends Component {

        this.state = {
            quickFilterText: null,
-            showToolPanel: false,
+            sideBar: false,
            rowData: new RowDataFactory().createRowData(),
            icons: {
                columnRemoveFromGroup: '<i class="fa fa-remove"/>',
@@ -51,8 +50,8 @@ export default class RichGridDeclarativeExample extends Component {
    };

    /* Demo related methods */
-    onToggleToolPanel = (event) => {
-        this.setState({showToolPanel: event.target.checked});
+    onToggleSidebar = (event) => {
+        this.setState({sideBar: event.target.checked});
    };

    deselectAll() {
@@ -77,8 +76,10 @@ export default class RichGridDeclarativeExample extends Component {

    dobFilter = () => {
        let dateFilterComponent = this.api.getFilterInstance('dob');
-        dateFilterComponent.setFilterType('equals');
-        dateFilterComponent.setDateFrom('2000-01-01');
+        dateFilterComponent.setModel({
+            type: 'equals',
+            dateFrom: '2000-01-01'
+        });

        // as the date filter is a React component, and its using setState internally, we need
        // to allow time for the state to be set (as setState is an async operation)
@@ -121,20 +122,28 @@ export default class RichGridDeclarativeExample extends Component {
                    <div>
                        <span>
                            Grid API:
-                            <button onClick={() => { this.api.selectAll() }} className="btn btn-primary">Select All</button>
-                            <button onClick={() => { this.api.deselectAll() }} className="btn btn-primary">Clear Selection</button>
+                            <button onClick={() => {
+                                this.api.selectAll()
+                            }} className="btn btn-primary">Select All</button>
+                            <button onClick={() => {
+                                this.api.deselectAll()
+                            }} className="btn btn-primary">Clear Selection</button>
                        </span>
                        <span style={{float: "right"}}>
                            Column API:
-                            <button onClick={() => { this.columnApi.setColumnVisible('country', false) }} className="btn btn-primary">Hide Country Column</button>
-                            <button onClick={() => { this.columnApi.setColumnVisible('country', true) }} className="btn btn-primary">Show Country Column</button>
+                            <button onClick={() => {
+                                this.columnApi.setColumnVisible('country', false)
+                            }} className="btn btn-primary">Hide Country Column</button>
+                            <button onClick={() => {
+                                this.columnApi.setColumnVisible('country', true)
+                            }} className="btn btn-primary">Show Country Column</button>
                        </span>
                    </div>
                    <div style={{display: "inline-block", width: "100%", marginTop: 10, marginBottom: 10}}>
                        <div style={{float: "left"}}>
                            <label>
-                                <input type="checkbox" onChange={this.onToggleToolPanel} style={{marginRight: 5}}/>
-                                Show Tool Panel
+                                <input type="checkbox" onChange={this.onToggleSidebar} style={{marginRight: 5}}/>
+                                Show Side Bar
                            </label>
                        </div>
                        <div style={{float: "left", marginLeft: 20}}>
@@ -148,10 +157,11 @@ export default class RichGridDeclarativeExample extends Component {
                            <button onClick={this.invokeSkillsFilterMethod}
                                    className="btn btn-primary">Invoke Skills Filter Method
                            </button>
-                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß</button>
+                            <button onClick={this.dobFilter} className="btn btn-primary">DOB equals to 01/01/2000ß
+                            </button>
                        </div>
                    </div>
-                    <div style={{height: 400, width: 900}} className="ag-fresh">
+                    <div style={{height: 400, width: 900}} className="ag-theme-balham">
                        <AgGridReact
                            // listening for events
                            onGridReady={this.onGridReady}
@@ -159,7 +169,7 @@ export default class RichGridDeclarativeExample extends Component {
                            onCellClicked={this.onCellClicked}

                            // binding to simple properties
-                            showToolPanel={this.state.showToolPanel}
+                            sideBar={this.state.sideBar}
                            quickFilterText={this.state.quickFilterText}

                            // binding to an object property
@@ -177,7 +187,6 @@ export default class RichGridDeclarativeExample extends Component {
                            enableFilter
                            floatingFilter
                            groupHeaders
-                            rowHeight="22"

                            // setting grid wide date component
                            dateComponentFramework={DateComponent}
@@ -190,30 +199,47 @@ export default class RichGridDeclarativeExample extends Component {
                                }
                            }}
                        >
-                            <AgGridColumn headerName="#" width={30} checkboxSelection suppressSorting suppressMenu suppressFilter pinned></AgGridColumn>
+                            <AgGridColumn headerName="#" width={30}
+                                          checkboxSelection suppressSorting suppressMenu suppressFilter pinned>
+                            </AgGridColumn>
                            <AgGridColumn headerName="Employee" headerGroupComponentFramework={HeaderGroupComponent}>
-                                <AgGridColumn field="name" width={150} enableRowGroup enablePivot pinned editable cellEditorFramework={NameCellEditor}></AgGridColumn>
-                                <AgGridColumn field="country" width={150} enableRowGroup enablePivot pinned editable cellRenderer={RichGridDeclarativeExample.countryCellRenderer} filterParams={{cellRenderer: RichGridDeclarativeExample.countryCellRenderer, cellHeight:20}}></AgGridColumn>
-                                <AgGridColumn field="dob" width={145} headerName="DOB" filter="date" pinned columnGroupShow="open" cellRenderer={RichGridDeclarativeExample.dateCellRenderer}></AgGridColumn>
+                                <AgGridColumn field="name" width={150}
+                                              cellEditorFramework={NameCellEditor}
+                                              enableRowGroup enablePivot pinned editable/>
+                                <AgGridColumn field="country" width={150}
+                                              cellRenderer={RichGridDeclarativeExample.countryCellRenderer}
+                                              filterParams={{
+                                                  cellRenderer: RichGridDeclarativeExample.countryCellRenderer,
+                                                  cellHeight: 20
+                                              }}
+                                              enableRowGroup enablePivot pinned editable/>
+                                <AgGridColumn field="dob" width={175} headerName="DOB" filter="agDateColumnFilter"
+                                              pinned columnGroupShow="open"
+                                              cellRenderer={RichGridDeclarativeExample.dateCellRenderer}/>
                            </AgGridColumn>
                            <AgGridColumn headerName="IT Skills">
-                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting cellRendererFramework={SkillsCellRenderer} filterFramework={SkillsFilter}></AgGridColumn>
-                                <AgGridColumn field="proficiency" width={135} enableValue cellRendererFramework={ProficiencyCellRenderer} filterFramework={ProficiencyFilter}></AgGridColumn>
+                                <AgGridColumn field="skills" width={120} enableRowGroup enablePivot suppressSorting
+                                              cellRendererFramework={SkillsCellRenderer}
+                                              filterFramework={SkillsFilter}/>
+                                <AgGridColumn field="proficiency" width={135} enableValue
+                                              cellRendererFramework={ProficiencyCellRenderer}
+                                              filterFramework={ProficiencyFilter}/>
                            </AgGridColumn>
                            <AgGridColumn headerName="Contact">
-                                <AgGridColumn field="mobile" width={150} filter="text"></AgGridColumn>
-                                <AgGridColumn field="landline" width={150} filter="text"></AgGridColumn>
-                                <AgGridColumn field="address" width={500} filter="text"></AgGridColumn>
+                                <AgGridColumn field="mobile" width={150} filter="text"/>
+                                <AgGridColumn field="landline" width={150} filter="text"/>
+                                <AgGridColumn field="address" width={500} filter="text"/>
                            </AgGridColumn>
                        </AgGridReact>
                    </div>
-                    <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>
+                                <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>
@@ -221,10 +247,10 @@ export default class RichGridDeclarativeExample extends Component {
                                    All
                                    Rows
                                    (expand the Employee column to show the Country column first)</p>
-                                <p><span style={{fontWeight: 500}}>Toggle The Tool Panel</span>: Let your users Pivot,
+                                <p><span style={{fontWeight: 500}}>Toggle The Side Bar</span>: Let your users Pivot,
                                    Group
                                    and
-                                    Aggregate using the Tool Panel</p>
+                                    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
@@ -296,12 +322,11 @@ export default class RichGridDeclarativeExample extends Component {
                            <div className="col-sm-4">
                                <div className="card">
                                    <div className="card-body">
-                                        <h4 className="card-title">Tool Panel</h4>
+                                        <h4 className="card-title">Side Bar</h4>
                                        <p className="card-text">Let your users Pivot, Group and Aggregate using the
-                                            Tool
-                                            Panel</p>
-                                        <a target="_blank" href="https://www.ag-grid.com//javascript-grid-tool-panel/"
-                                           className="btn btn-primary">Tool Panel</a>
+                                            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>
--- a/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/GridComponent.jsx
@@ -1,10 +1,13 @@
 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";

+const ThemeContext = React.createContext('light');
+
 /*
 * This component serves to display the row data (provided by redux)
 */
@@ -39,12 +42,15 @@ class GridComponent extends Component {
    render() {
        return (
            <div style={{height: 400, width: 900, marginTop: 15}}
-                 className="ag-fresh">
+                 className="ag-theme-balham">
                <AgGridReact
                    // properties
                    columnDefs={this.state.columnDefs}
                    rowData={this.props.rowData}

+                    reactNext={true}
+                    reduxStore={this.context.store} // must be supplied when using redux with reactNext
+
                    // events
                    onGridReady={this.onGridReady}>
                </AgGridReact>
@@ -53,6 +59,10 @@ 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/HeaderComponent.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/HeaderComponent.jsx
@@ -1,6 +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";

--- a/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/PriceRenderer.jsx
@@ -1,6 +1,8 @@
 import React, {Component} from "react";
 import {connect} from "react-redux";

+import FontContext from './fontContext'
+
 class PriceRenderer extends Component {
    constructor(props) {
        super(props);
@@ -18,7 +20,9 @@ class PriceRenderer extends Component {

    render() {
        return (
-            <span>{this.props.currencySymbol}{this.state.convertedValue}</span>
+            <FontContext.Consumer>
+                {fontWeight => <span style={{fontWeight}}> {this.props.currencySymbol}{this.state.convertedValue}</span> }
+            </FontContext.Consumer>
        );
    }

@@ -33,5 +37,8 @@ export default connect(
            currencySymbol: state.currencySymbol,
            exchangeRate: state.exchangeRate
        }
-    }
+    },
+    null,
+    null,
+    {withRef: true} // must be supplied for react/redux when using GridOptions.reactNext
 )(PriceRenderer);
--- a/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/SimpleReduxExample.jsx
@@ -1,7 +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";

@@ -10,6 +9,8 @@ import GridComponent from "./GridComponent";

 import gridData from "./gridDataReducer";

+import FontContext from './fontContext'
+
 let store = createStore(gridData);

 /*
@@ -26,8 +27,10 @@ export default class SimpleReduxExample extends Component {
            <Provider store={store}>
                <div>
                    <h1>Simple Redux Example using Connected React Components</h1>
-                    <HeaderComponent />
-                    <GridComponent />
+                    <HeaderComponent/>
+                    <FontContext.Provider value="bold">
+                        <GridComponent/>
+                    </FontContext.Provider>
                </div>
            </Provider>
        )
--- a/src-examples/simpleReduxDynamicComponentExample/fontContext.js
+++ b/src-examples/simpleReduxDynamicComponentExample/fontContext.js
@@ -0,0 +1,3 @@
+import React from "react";
+
+export default React.createContext('normal');
--- a/src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx
+++ b/src-examples/simpleReduxDynamicComponentExample/gridDataActions.jsx
@@ -4,6 +4,7 @@ export function updateRowData(rowData) {
        rowData
    }
 }
+
 export function setCurrency(currencySymbol, exchangeRate) {
    return {
        type: 'CURRENCY_CHANGED',
--- 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/dist/styles/ag-grid.css';
-import 'ag-grid/dist/styles/theme-fresh.css';
+import 'ag-grid-community/dist/styles/ag-grid.css';
+import 'ag-grid-community/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.
--- a/src-large-data/largeGrid.jsx
+++ b/src-large-data/largeGrid.jsx
@@ -61,7 +61,7 @@ export default class MyApp extends Component {

    render() {
        return (
-            <div style={{height: '100%'}} className="ag-fresh">
+            <div style={{height: '100%'}} className="ag-theme-fresh">
                <AgGridReact columnDefs={this.state.columnDefs} rowData={this.state.rowData}/>
            </div>
        );
--- a/src-trader-dashboard/components/FxQuoteMatrix.jsx
+++ b/src-trader-dashboard/components/FxQuoteMatrix.jsx
@@ -3,9 +3,6 @@ import {connect} from "react-redux";

 import {AgGridReact} from "ag-grid-react";

-import assign from "lodash/assign";
-import uniq from "lodash/uniq";
-
 class FxQuoteMatrix extends Component {
    constructor(props) {
        super(props);
@@ -60,7 +57,7 @@ class FxQuoteMatrix extends Component {
    render() {
        return (
            <div style={{height: 410, width: 800}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                <AgGridReact
                    // properties
                    columnDefs={this.state.columnDefs}
--- a/src-trader-dashboard/components/PriceChangesGrid.jsx
+++ b/src-trader-dashboard/components/PriceChangesGrid.jsx
@@ -24,21 +24,21 @@ export default class extends Component {
                    field: 'price',
                    headerName: 'Price',
                    valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                    cellStyle: {'text-align': 'right'}
                },
                {
                    field: 'bid',
                    headerName: 'Bid',
                    valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                    cellStyle: {'text-align': 'right'}
                },
                {
                    field: 'ask',
                    headerName: 'Ask',
                    valueFormatter: this.numberFormatter,
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                    cellStyle: {'text-align': 'right'}
                }
            ]
@@ -151,7 +151,7 @@ export default class extends Component {
    render() {
        return (
            <div style={{height: 410, width: 800}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                <AgGridReact
                    // properties
                    columnDefs={this.state.columnDefs}
--- a/src-trader-dashboard/components/TopMoversGrid.jsx
+++ b/src-trader-dashboard/components/TopMoversGrid.jsx
@@ -17,21 +17,21 @@ class TopMoversGrid extends Component {
                    field: 'last',
                    headerName: 'Last',
                    headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                    cellClass: 'align-right'
                },
                {
                    field: 'net',
                    headerName: 'Net',
                    headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                    cellClass: 'align-right'
                },
                {
                    field: 'pct_net_change',
                    headerName: '% NC',
                    headerClass: 'align-right',
-                    cellRenderer: 'animateShowChange',
+                    cellRenderer: 'agAnimateShowChangeCellRenderer',
                    cellClass: 'align-right',
                    sort: 'desc',
                    valueFormatter(params) {
@@ -62,7 +62,7 @@ class TopMoversGrid extends Component {
    render() {
        return (
            <div style={{height: 410, width: 400}}
-                 className="ag-fresh">
+                 className="ag-theme-fresh">
                <AgGridReact
                    // properties
                    columnDefs={this.state.columnDefs}
--- a/src-trader-dashboard/index.js
+++ b/src-trader-dashboard/index.js
@@ -5,8 +5,8 @@ import {render} from "react-dom";

 import {Provider} from "react-redux";

-import "ag-grid/dist/styles/ag-grid.css";
-import "ag-grid/dist/styles/theme-fresh.css";
+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";
--- a/src-trader-dashboard/services/FxDataService.jsx
+++ b/src-trader-dashboard/services/FxDataService.jsx
@@ -120,7 +120,7 @@ const FX_DELTA_HEADERS = [
        field: 'last',
        headerName: 'Last',
        headerClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
        cellClass: 'align-right',
        width: 100
    },
@@ -128,7 +128,7 @@ const FX_DELTA_HEADERS = [
        field: 'net',
        headerName: 'Net',
        headerClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
        cellClass: 'align-right',
        width: 90
    },
@@ -145,7 +145,7 @@ const FX_DELTA_HEADERS = [
        headerName: symbol,
        width: 67,
        cellClass: 'align-right',
-        cellRenderer: 'animateShowChange',
+        cellRenderer: 'agAnimateShowChangeCellRenderer',
        cellClassRules: {
            'fx-positive': 'x > 0.8',
            'fx-null': 'x === null',
Author	SHA1	Message	Date
rmc-software	296d4e165f	release v19.1.0	2018-10-29 15:13:54 +00:00
Sean Landsman	4998a51817	AG-2178 Add docs and example on how to use Context API with React	2018-10-16 17:42:29 +01:00
Sean Landsman	518a95ee89	AG-2177 React Example - allow force refresh (routing breaks)	2018-10-16 16:07:35 +01:00
Sean Landsman	3debbabe28	Allow more flexibility with prop-types, fix trader example	2018-10-16 15:50:21 +01:00
Guilherme Lopes	550f6c4077	updated dependencies and webpack config	2018-10-16 12:09:53 +01:00
Robert Clarke	99bc479b60	Release 19.0.0 dist files created	2018-09-05 13:11:46 +01:00
Sean Landsman	f5c1a4ba17	Update fw examples	2018-09-04 17:07:32 +01:00
Sean Landsman	168a127e51	AG-2018 Rename ag-Grid to ag-Grid-Community	2018-08-21 16:07:22 +01:00
Sean Landsman	f9b1f8527a	retiring deprecated themes	2018-08-14 10:23:54 +01:00
MrSafferty	eee938e0e7	AG-1922 Framework Sweep	2018-07-18 16:03:44 +01:00
MrSafferty	449a88e832	AG-1905 Future proof ag-grid-react by removing dependency on unstable_renderSubtreeIntoContainer	2018-07-16 14:49:45 +01:00
Alberto	60181add9a	Merge branch 'master' into latest Merge branch 'master' into latest # Conflicts: # package-lock.json # packages/ag-grid-angular/package-lock.json # packages/ag-grid-aurelia/package-lock.json # packages/ag-grid-docs/package.json # packages/ag-grid-enterprise/package.json # packages/ag-grid-react/package-lock.json # packages/ag-grid-vue/package-lock.json	2018-07-05 11:14:57 +01:00
Alberto	847005c758	Merge branch 'b18.1.0' # Conflicts: # package.json Merge branch 'b18.1.0' Merge branch 'b18.1.0' # Conflicts: # package-lock.json # package.json # vue.config.js	2018-07-05 11:06:51 +01:00
Alberto	ca64dae64c	Release 18.1.0 dist files created	2018-07-03 11:21:25 +01:00
MrSafferty	3591b78e4b	Set example repos to private	2018-07-02 11:12:58 +01:00
MrSafferty	2fedd32efd	Test, Fix and Clean React Examples	2018-06-29 11:11:35 +01:00
MrSafferty	849472a031	Test, Fix and Clean React Examples	2018-06-29 10:58:22 +01:00
Minh Nguyen	a2743f9076	AG-1868 Remove dependency on react-dom-factories in ag-grid-react	2018-06-27 16:01:27 +01:00
MrSafferty	d9724f7ab5	Remove an ignore package-lock.json files	2018-06-20 17:27:35 +01:00
MrSafferty	c0443ba6ef	Remove an ignore package-lock.json files	2018-06-20 17:23:06 +01:00
MrSafferty	88752be90b	Further monorepo work	2018-06-14 15:42:39 +01:00
MrSafferty	2080ebb054	Bring changes from master over	2018-06-13 16:57:40 +01:00
MrSafferty	172c2a05b0	Add Vue and Aurelia Examples	2018-06-13 12:15:03 +01:00
Alberto	badb5ea485	Merge remote-tracking branch 'origin/b18.0.0' Merge remote-tracking branch 'origin/b18.0.1'	2018-06-12 16:34:06 +01:00
Alberto	c3af000642	Release 18.0.0 setting new license key	2018-06-11 11:48:53 +01:00
Alberto	7b6b609cdf	Release 18.0.0 dist files created	2018-06-11 11:29:34 +01:00
Alberto	5ffb682014	Merge remote-tracking branch 'origin/master' into latest	2018-04-17 10:09:22 +02:00
Alberto	de18262157	Merge remote-tracking branch 'origin/b17.1.0'	2018-04-17 10:05:12 +02:00
Alberto	1f6c1e41a1	Release 17.1.0 dist files created	2018-04-12 15:50:19 +01:00
Alberto	ba3762bbd3	Release 17.1.0 dist files created	2018-04-12 15:48:39 +01:00
Alberto	455f982d6c	Merge remote-tracking branch 'origin/master' into latest Merge remote-tracking branch 'origin/master' into latest # Conflicts: # src/index.php	2018-03-08 12:02:45 +01:00
Alberto	0c927ae3c5	Merge remote-tracking branch 'origin/b17.0.0'	2018-03-08 11:54:52 +01:00
Alberto	2bd8d4c987	Release 17.0.0 dist files created	2018-03-05 12:59:50 +01:00
Alberto	318f78de84	Release 17.0.0 dist files created	2018-03-05 12:57:11 +01:00
Alberto	9ca52a727d	Merge branch 'master' into latest	2018-01-29 11:08:55 +00:00
Alberto	56ccdd028c	Merge branch 'b16.0.0'	2018-01-29 10:35:22 +00:00