From 9c3c7a77c03add7054e8b2417a580e3201fd6206 Mon Sep 17 00:00:00 2001 From: Sean Landsman Date: Fri, 26 May 2017 14:49:34 +0100 Subject: [PATCH] AG-420 Improve React implementation --- package.json | 14 +-- src/App.jsx | 104 ++++++++++++------ src/NavItem.jsx | 19 ---- .../DynamicComponentsExample.jsx | 2 +- .../EditorComponentsExample.jsx | 2 +- .../FilterComponentExample.jsx | 2 +- .../FloatingRowComponentExample.jsx | 2 +- .../FullWidthComponentExample.jsx | 2 +- ...roupedRowInnerRendererComponentExample.jsx | 2 +- src/index.html | 24 ++-- src/index.js | 5 +- .../MasterDetailExample.jsx | 2 +- .../RichComponentsExample.jsx | 2 +- src/richGridExample/RichGridExample.jsx | 4 +- 14 files changed, 102 insertions(+), 84 deletions(-) delete mode 100644 src/NavItem.jsx diff --git a/package.json b/package.json index badf39f..df34b4e 100644 --- a/package.json +++ b/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" } } diff --git a/src/App.jsx b/src/App.jsx index 18abb56..6bfa3c5 100644 --- a/src/App.jsx +++ b/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 = () => ( -
- -
-); - 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 = ( + ) + } + + let example = null; + switch (this.state.example) { + case 'dynamic': + example = ; + break; + case 'rich-dynamic': + example = ; + break; + case 'editor': + example = ; + break; + case 'floating-row': + example = ; + break; + case 'full-width': + example = ; + break; + case 'group-row': + example = ; + break; + case 'filter': + example = ; + break; + case 'master-detail': + example = ; + break; + default: + example = ; + } + return (
-
- - - - - - - - - - - - + {header} + {example}
) } diff --git a/src/NavItem.jsx b/src/NavItem.jsx deleted file mode 100644 index 975c7aa..0000000 --- a/src/NavItem.jsx +++ /dev/null @@ -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 ( - ( -
  • - {children} -
    • - )}/> - ) -} - -NavItem.propTypes = { - to: PropTypes.string.isRequired, - exact: PropTypes.bool, - children: PropTypes.node.isRequired, -}; diff --git a/src/dynamicComponentExample/DynamicComponentsExample.jsx b/src/dynamicComponentExample/DynamicComponentsExample.jsx index ca53805..8817342 100644 --- a/src/dynamicComponentExample/DynamicComponentsExample.jsx +++ b/src/dynamicComponentExample/DynamicComponentsExample.jsx @@ -104,7 +104,7 @@ export default class DynamicComponentsExample extends Component { } render() { return ( -

    Dynamic React Component Example

    diff --git a/src/editorComponentExample/EditorComponentsExample.jsx b/src/editorComponentExample/EditorComponentsExample.jsx index 4a1d382..f95287a 100644 --- a/src/editorComponentExample/EditorComponentsExample.jsx +++ b/src/editorComponentExample/EditorComponentsExample.jsx @@ -65,7 +65,7 @@ export default class EditorComponentsExample extends Component { render() { return ( -

    Cell Editor Component Example

    Group Row Renderer Example

    diff --git a/src/floatingRowExample/FloatingRowComponentExample.jsx b/src/floatingRowExample/FloatingRowComponentExample.jsx index c98e942..21bf730 100644 --- a/src/floatingRowExample/FloatingRowComponentExample.jsx +++ b/src/floatingRowExample/FloatingRowComponentExample.jsx @@ -65,7 +65,7 @@ export default class FloatingRowComponentExample extends Component { render() { return ( -

    Floating Row Renderer Example

    Full Width Renderer Example

    Group Row Renderer Example

    { render( - - - , + , document.querySelector('#app') ); }); diff --git a/src/masterDetailExample/MasterDetailExample.jsx b/src/masterDetailExample/MasterDetailExample.jsx index 5f2637c..c172ee9 100644 --- a/src/masterDetailExample/MasterDetailExample.jsx +++ b/src/masterDetailExample/MasterDetailExample.jsx @@ -116,7 +116,7 @@ export default class MasterDetailExample extends Component { render() { return ( -

    Master-Detail Example

    Dynamic React Components - Richer Example

    ); gridTemplate = ( -
    +
    + return
    {topHeaderTemplate} {bottomHeaderTemplate}