AG-420 Improve React implementation

package.json

@@ -7,15 +7,15 @@
     "trader": "webpack-dev-server --content-base src-trader-dashboard/ --config webpack.config.trader.js --progress --colors --hot --inline",
     "examples": "webpack-dev-server --content-base src/ --config webpack.config.examples.js --progress --colors --hot --inline",
     "large": "webpack-dev-server --config webpack.config.large.js --progress --colors --hot --inline",
-
-
     "clean": "rimraf dist",
     "mkdirs": "mkdir -p dist/trader/dist dist/examples/dist",
-    "copy": "cp -r images dist/examples && cp src/index.html dist/examples && cp src-trader-dashboard/index.html dist/trader && cp dist/react-examples.js dist/examples/dist && cp dist/react-trader.js dist/trader/dist",
+    "copy-examples": "cp -r images dist/examples && cp src/index.html dist/examples && cp dist/react-examples.js dist/examples/dist && cp -r src dist/examples",
+    "copy-trader": "cp src-trader-dashboard/index.html dist/trader && cp dist/react-trader.js dist/trader/dist",
+    "copy": "npm run copy-examples && npm run copy-trader",
     "build-examples": "webpack --config webpack.config.examples.js --progress --profile --bail",
     "build-dashboard": "webpack --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"
+    "build": "npm run clean && npm run mkdirs && npm run build-all && npm run copy"
   },
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "webpack-dev-server": "1.14.x"
   },
   "dependencies": {
-    "ag-grid": "10.0.x",
+    "ag-grid": "file:/Users/seanlandsman/IdeaProjects/ag/ag-grid/core-docs/ag-grid",
     "ag-grid-enterprise": "10.0.x",
     "ag-grid-react": "10.0.x",
     "bootstrap": "^3.3.7",
@@ -56,8 +56,8 @@
     "react": "15.5.x",
     "react-dom": "15.5.x",
     "react-redux": "5.0.x",
-    "react-router-dom": "4.1.x",
     "redux": "3.6.x",
-    "rimraf": "2.5.x"
+    "rimraf": "2.5.x",
+    "url-search-params-polyfill": "^1.2.0"
   }
 }

src/App.jsx

@@ -1,51 +1,91 @@
 import React, {Component} from "react";
-import {Redirect, Route, Switch} from "react-router-dom";
 
-import NavItem from "./NavItem";
+import "url-search-params-polyfill";
 
 import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample";
+import RichGridExample from "./richGridExample/RichGridExample";
 import RichComponentsExample from "./richComponentExample/RichComponentsExample";
 import EditorComponentsExample from "./editorComponentExample/EditorComponentsExample";
 import FloatingRowComponentExample from "./floatingRowExample/FloatingRowComponentExample";
 import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample";
 import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample";
 import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
-import RichGridExample from "./richGridExample/RichGridExample";
 import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
 
-const Header = () => (
-    <header>
-        <ul className="nav nav-pills">
-            <NavItem to='/rich-grid'>Rich Grid Example</NavItem>
-            <NavItem to='/dynamic'>Dynamic React Component Example</NavItem>
-            <NavItem to='/rich-dynamic'>Dynamic React Components - Richer Example</NavItem>
-            <NavItem to='/editor'>Cell Editor Component Example</NavItem>
-            <NavItem to='/floating-row'>Floating Row Renderer Example</NavItem>
-            <NavItem to='/full-width'>Full Width Renderer Example</NavItem>
-            <NavItem to='/group-row'>Grouped Row Inner Renderer Example</NavItem>
-            <NavItem to='/filter'>Filters Component Example</NavItem>
-            <NavItem to='/master-detail'>Master Detail Example</NavItem>
-        </ul>
-    </header>
-);
-
 class App extends Component {
+    constructor(props) {
+        super(props);
+
+        let searchParams = new URLSearchParams(window.location.search);
+        let fromDocs = searchParams.has("fromDocs");
+        let example = searchParams.has("example") ? searchParams.get("example") : 'rich-grid';
+
+        this.state = {
+            example,
+            fromDocs
+        };
+
+        this.setExample = this.setExample.bind(this);
+    }
+
+    setExample(example) {
+        console.log(example);
+        this.setState({
+            example
+        })
+    }
+
     render() {
+        let header = null;
+        if (!this.state.fromDocs) {
+            header = (
+                <ul className="nav nav-pills">
+                    <li role="presentation" className={this.state.example === 'rich-grid' ? 'active' : null} onClick={() => this.setExample("rich-grid")}><a href="#">Rich Grid Example</a></li>
+                    <li role="presentation" className={this.state.example === 'dynamic' ? 'active' : null} onClick={() => this.setExample("dynamic")}><a href="#">Dynamic React Component Example</a></li>
+                    <li role="presentation" className={this.state.example === 'rich-dynamic' ? 'active' : null} onClick={() => this.setExample("rich-dynamic")}><a href="#">Dynamic React Components - Richer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'editor' ? 'active' : null} onClick={() => this.setExample("editor")}><a href="#">Cell Editor Component Example</a></li>
+                    <li role="presentation" className={this.state.example === 'floating-row' ? 'active' : null} onClick={() => this.setExample("floating-row")}><a href="#">Floating Row Renderer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'full-width' ? 'active' : null} onClick={() => this.setExample("full-width")}><a href="#">Full Width Renderer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'group-row' ? 'active' : null} onClick={() => this.setExample("group-row")}><a href="#">Grouped Row Inner Renderer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'filter' ? 'active' : null} onClick={() => this.setExample("filter")}><a href="#">Filters Component Example</a></li>
+                    <li role="presentation" className={this.state.example === 'master-detail' ? 'active' : null} onClick={() => this.setExample("master-detail")}><a href="#">Master Detail Example</a></li>
+                </ul>)
+        }
+
+        let example = null;
+        switch (this.state.example) {
+            case 'dynamic':
+                example = <DynamicComponentsExample/>;
+                break;
+            case 'rich-dynamic':
+                example = <RichComponentsExample/>;
+                break;
+            case 'editor':
+                example = <EditorComponentsExample/>;
+                break;
+            case 'floating-row':
+                example = <FloatingRowComponentExample/>;
+                break;
+            case 'full-width':
+                example = <FullWidthComponentExample/>;
+                break;
+            case 'group-row':
+                example = <GroupedRowInnerRendererComponentExample/>;
+                break;
+            case 'filter':
+                example = <FilterComponentExample/>;
+                break;
+            case 'master-detail':
+                example = <MasterDetailExample/>;
+                break;
+            default:
+                example = <RichGridExample/>;
+        }
+
         return (
             <div>
-                <Header/>
+                {header}
-                <Switch>
+                {example}
-                    <Redirect from="/" exact to="/rich-grid"/>
-                    <Route exact path='/rich-grid' component={RichGridExample}/>
-                    <Route exact path='/dynamic' component={DynamicComponentsExample}/>
-                    <Route exact path='/rich-dynamic' component={RichComponentsExample}/>
-                    <Route exact path='/editor' component={EditorComponentsExample}/>
-                    <Route exact path='/floating-row' component={FloatingRowComponentExample}/>
-                    <Route exact path='/full-width' component={FullWidthComponentExample}/>
-                    <Route exact path='/group-row' component={GroupedRowInnerRendererComponentExample}/>
-                    <Route exact path='/filter' component={FilterComponentExample}/>
-                    <Route exact path='/master-detail' component={MasterDetailExample}/>
-                </Switch>
             </div>
         )
     }

src/NavItem.jsx

@@ -1,19 +0,0 @@
-import React, {PropTypes} from 'react'
-import {Route, Link} 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>
-        )}/>
-    )
-}
-
-NavItem.propTypes = {
-    to: PropTypes.string.isRequired,
-    exact: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-};

src/dynamicComponentExample/DynamicComponentsExample.jsx

@@ -104,7 +104,7 @@ export default class DynamicComponentsExample extends Component {
     }
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Dynamic React Component Example</h1>
                 <button onClick={this.refreshRowData}>Refresh Data</button>

src/editorComponentExample/EditorComponentsExample.jsx

@@ -65,7 +65,7 @@ export default class EditorComponentsExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Cell Editor Component Example</h1>
                 <AgGridReact

src/filterComponentExample/FilterComponentExample.jsx

@@ -65,7 +65,7 @@ export default class FilterComponentExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Group Row Renderer Example</h1>
                 <button style={{marginBottom: 10}} onClick={this.onClicked}>Filter Instance Method</button>

src/floatingRowExample/FloatingRowComponentExample.jsx

@@ -65,7 +65,7 @@ export default class FloatingRowComponentExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Floating Row Renderer Example</h1>
                 <AgGridReact

src/fullWidthExample/FullWidthComponentExample.jsx

@@ -68,7 +68,7 @@ export default class FullWidthComponentExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Full Width Renderer Example</h1>
                 <AgGridReact

src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx

@@ -108,7 +108,7 @@ export default class GroupedRowInnerRendererComponentExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Group Row Renderer Example</h1>
                 <AgGridReact

src/index.html

@@ -71,8 +71,8 @@
         .expanded {
             animation-name: toExpanded;
             animation-duration: 1s;
-            -ms-transform: rotate(180deg); /* IE 9 */
+             -ms-transform: rotate(180deg); /* IE 9 */
-            -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+             -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
             transform: rotate(180deg);
         }
 
@@ -80,22 +80,22 @@
             color: cornflowerblue;
             animation-name: toCollapsed;
             animation-duration: 1s;
-            -ms-transform: rotate(0deg); /* IE 9 */
+             -ms-transform: rotate(0deg); /* IE 9 */
-            -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+             -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
             transform: rotate(0deg);
         }
 
         @keyframes toExpanded {
             from {
                 color: cornflowerblue;
-                -ms-transform: rotate(0deg); /* IE 9 */
+                 -ms-transform: rotate(0deg); /* IE 9 */
-                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                 -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
                 transform: rotate(0deg);
             }
             to {
                 color: black;
-                -ms-transform: rotate(180deg); /* IE 9 */
+                 -ms-transform: rotate(180deg); /* IE 9 */
-                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                 -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                 transform: rotate(180deg);
             }
         }
@@ -103,14 +103,14 @@
         @keyframes toCollapsed {
             from {
                 color: black;
-                -ms-transform: rotate(180deg); /* IE 9 */
+                 -ms-transform: rotate(180deg); /* IE 9 */
-                -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
+                 -webkit-transform: rotate(180deg); /* Chrome, Safari, Opera */
                 transform: rotate(180deg);
             }
             to {
                 color: cornflowerblue;
-                -ms-transform: rotate(0deg); /* IE 9 */
+                 -ms-transform: rotate(0deg); /* IE 9 */
-                -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
+                 -webkit-transform: rotate(0deg); /* Chrome, Safari, Opera */
                 transform: rotate(0deg);
             }
         }

src/index.js

@@ -2,7 +2,6 @@
 
 import React from "react";
 import {render} from "react-dom";
-import {BrowserRouter} from "react-router-dom";
 
 import "ag-grid-root/dist/styles/ag-grid.css";
 import "ag-grid-root/dist/styles/theme-fresh.css";
@@ -12,9 +11,7 @@ import App from "./App";
 
 document.addEventListener('DOMContentLoaded', () => {
     render(
-        <BrowserRouter>
+        <App/>,
-            <App/>
-        </BrowserRouter>,
         document.querySelector('#app')
     );
 });

src/masterDetailExample/MasterDetailExample.jsx

@@ -116,7 +116,7 @@ export default class MasterDetailExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Master-Detail Example</h1>
                 <AgGridReact

src/richComponentExample/RichComponentsExample.jsx

@@ -60,7 +60,7 @@ export default class RichComponentsExample extends Component {
 
     render() {
         return (
-            <div style={{width: 800, height: 400}}
+            <div style={{height: 400, width: 945}}
                  className="ag-fresh">
                 <h1>Dynamic React Components - Richer Example</h1>
                 <AgGridReact

src/richGridExample/RichGridExample.jsx

@@ -179,7 +179,7 @@ export default class RichGridExample extends Component {
                 </div>
             );
             gridTemplate = (
-                <div style={{height: 400}} className="ag-fresh">
+                <div style={{height: 400, width: 945}} className="ag-fresh">
                     <AgGridReact
                         // gridOptions is optional - it's possible to provide
                         // all values as React props
@@ -214,7 +214,7 @@ export default class RichGridExample extends Component {
             );
         }
 
-        return <div style={{width: '1024px'}}>
+        return <div style={{width: '950px'}}>
             <div style={{padding: '4px'}}>
                 {topHeaderTemplate}
                 {bottomHeaderTemplate}