AG-1053 Tidy react examples, make more idiomatic

Author: seanlandsman

webpack.config.examples.js config/webpack.config.examples.jswebpack.config.examples.js renamed to config/webpack.config.examples.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
-const SRC_DIR = path.resolve(__dirname, 'src');
+const SRC_DIR = path.resolve(__dirname, '../src-examples');
 
 module.exports = {
     entry: SRC_DIR + "/index.js",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, '../'),
         filename: "dist/react-examples.js"
     },
     module: {

webpack.config.large.js config/webpack.config.large.jswebpack.config.large.js renamed to config/webpack.config.large.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
-const SRC_DIR = path.resolve(__dirname, 'src-large');
+const SRC_DIR = path.resolve(__dirname, '../src-large-data');
 
 module.exports = {
     entry: SRC_DIR + "/index.js",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, '../'),
         filename: "dist/react-large.js"
     },
     module: {

webpack.config.trader.js config/webpack.config.trader.jswebpack.config.trader.js renamed to config/webpack.config.trader.js

@@ -1,11 +1,11 @@
 const path = require('path');
 
-const SRC_DIR = path.resolve(__dirname, 'src-trader-dashboard');
+const SRC_DIR = path.resolve(__dirname, '../src-trader-dashboard');
 
 module.exports = {
     entry: SRC_DIR + "/index.js",
     output: {
-        path: __dirname,
+        path: path.resolve(__dirname, '../'),
         filename: "dist/react-trader.js"
     },
     module: {

olympicWinners.json

@@ -4,17 +4,17 @@
   "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 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 --content-base src-large/ --config webpack.config.large.js --progress --colors --hot --inline",
+    "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",
     "clean": "rimraf dist",
     "mkdirs": "mkdirp dist/trader/dist dist/examples/dist",
     "copy-examples": "ncp images dist/examples/images && ncp src/index.html dist/examples/index.html && ncp dist/react-examples.js dist/examples/dist/react-examples.js && ncp src dist/examples/src",
     "copy-trader": "ncp src-trader-dashboard/index.html dist/trader/index.html && ncp dist/react-trader.js dist/trader/dist/react-trader.js",
     "copy": "npm run copy-examples && npm run copy-trader",
-    "build-large": "webpack --config webpack.config.large.js --progress --profile --bail",
-    "build-examples": "webpack --config webpack.config.examples.js --progress --profile --bail",
-    "build-dashboard": "webpack --config webpack.config.trader.js --progress --profile --bail",
+    "build-large": "webpack --config config/webpack.config.large.js --progress --profile --bail",
+    "build-examples": "webpack --config config/webpack.config.examples.js --progress --profile --bail",
+    "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",

package.json

@@ -3,13 +3,14 @@ import React, {Component} from "react";
 export default class ChildMessageRenderer extends Component {
     constructor(props) {
         super(props);
-
-        this.invokeParentMethod = this.invokeParentMethod.bind(this);
     }
 
-    invokeParentMethod() {
-        this.props.context.componentParent.methodFromParent(`Row: ${this.props.node.rowIndex}, Col: ${this.props.colDef.headerName}`)
-    }
+    invokeParentMethod = () => {
+        let rowIndex = this.props.node.rowIndex;
+        let headerName = this.props.colDef.headerName;
+
+        this.props.context.componentParent.methodFromParent(`Row: ${rowIndex}, Col: ${headerName}`)
+    };
 
     render() {
         return (

src/App.jsx src-examples/App.jsxsrc/App.jsx renamed to src-examples/App.jsx

@@ -9,7 +9,7 @@ export default class CurrencyRenderer extends Component {
         }
     }
 
-    formatValueToCurrency(currency, value) {
+    static formatValueToCurrency(currency, value) {
         return `${currency}${value}`
     }
 
@@ -25,7 +25,7 @@ export default class CurrencyRenderer extends Component {
 
     render() {
         return (
-            <span>{this.formatValueToCurrency('EUR', this.state.value)}</span>
+            <span>{CurrencyRenderer.formatValueToCurrency('EUR', this.state.value)}</span>
         );
     }
 };