AG-1053 Tidy react examples, make more idiomatic

src-examples/richComponentExample/ClickableRenderer.jsx

@@ -0,0 +1,28 @@
+import React, {Component} from "react";
+
+export default class ClickableRenderer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            cell: {
+                row: this.props.value,
+                col: this.props.colDef.headerName
+            }
+        };
+    }
+
+    clicked = () => {
+        console.log("Child Cell Clicked: " + JSON.stringify(this.state.cell));
+    };
+
+    render() {
+        let buttonStyle = {
+            lineHeight: 0.5,
+            width: "98%"
+        };
+          return (
+            <button style={buttonStyle} onClick={this.clicked} className="btn btn-info">Click Me</button>
+        );
+    }
+}

src-examples/richComponentExample/RatioRenderer.jsx

@@ -0,0 +1,41 @@
+import React, {Component} from "react";
+
+export default class RatioRenderer extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        let agRatioStyle = {
+            display: "block",
+            overflow: "hidden",
+            border: "1px solid #ccc",
+            borderRadius: "6px",
+            background: "#fff",
+            height: 20
+        };
+
+        let svg = {
+            width: "100%",
+            height: "100%",
+            pointerEvents: "none"
+        };
+
+        let topBar = {
+            fill: "#ff9933"
+        };
+
+        let bottomBar = {
+            fill: "#6699ff"
+        };
+
+        return (
+            <ag-ratio style={agRatioStyle}>
+                <svg style={svg} viewBox="0 0 300 100" preserveAspectRatio="none">
+                    <rect x="0" y="0" width={this.props.value.top * 300} height="50" rx="4" ry="4" style={topBar}/>
+                    <rect x="0" y="50" width={this.props.value.bottom * 300} height="50" rx="4" ry="4" style={bottomBar}/>
+                </svg>
+            </ag-ratio>
+        );
+    }
+}

src-examples/richComponentExample/RichComponentsExample.jsx

@@ -0,0 +1,97 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+import RatioRenderer from "./RatioRenderer";
+import ClickableRenderer from "./ClickableRenderer";
+
+export default class RichComponentsExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            rowData: RichComponentsExample.createRowData(),
+            columnDefs: RichComponentsExample.createColumnDefs()
+        };
+    }
+
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    };
+
+    static createColumnDefs() {
+        return [
+            {
+                headerName: "Name",
+                field: "name",
+                width: 200
+            },
+            {
+                headerName: "Ratio Component",
+                field: "ratios",
+                cellRendererFramework: RatioRenderer,
+                width: 350
+            },
+            {
+                headerName: "Clickable Component",
+                field: "name",
+                cellRendererFramework: ClickableRenderer,
+                width: 250
+            }
+        ];    }
+
+    static createRowData() {
+        return [
+            {name: 'Homer Simpson', ratios: {top: 0.25, bottom: 0.75}},
+            {name: 'Marge Simpson', ratios: {top: 0.67, bottom: 0.39}},
+            {name: 'Bart Simpson', ratios: {top: 0.82, bottom: 0.47}},
+            {name: 'Lisa Simpson', ratios: {top: 0.39, bottom: 1}},
+            {name: 'Barney', ratios: {top: 0.22, bottom: 0.78}},
+            {name: 'Sideshow Bob', ratios: {top: 0.13, bottom: 0.87}},
+            {name: 'Ned Flanders', ratios: {top: 0.49, bottom: 0.51}},
+            {name: 'Milhouse', ratios: {top: 0.69, bottom: 0.31}},
+            {name: 'Apu', ratios: {top: 0.89, bottom: 0.11}},
+            {name: 'Moe', ratios: {top: 0.64, bottom: 0.36}},
+            {name: 'Smithers', ratios: {top: 0.09, bottom: 0.91}},
+            {name: 'Edna Krabappel', ratios: {top: 0.39, bottom: 0.61}},
+            {name: 'Krusty', ratios: {top: 0.74, bottom: 0.26}}
+        ];
+    }
+
+    render() {
+        return (
+            <div style={{height: 370, width: 900}} className="ag-fresh">
+                <h1>Dynamic React Components - Richer Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+                    gridOptions={this.state.gridOptions}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+                <div className="row">
+                    <div className="col-sm-12">
+                        <h5>This example demonstrates Dynamic React Components with ag-Grid. Functionally similar
+                            to the <a href="/dynamic">Dynamic React Components Example</a> but with slightly richer components.</h5>
+                    </div>
+                </div>
+                <div className="row">
+                    <div className="col-sm-12">
+                        <div className="card">
+                            <div className="card-body">
+                                <h4 className="card-title">React Functionality</h4>
+                                <p className="card-text">Utilise React Components within ag-Grid</p>
+                                <a target="_blank" href="https://www.ag-grid.com/best-react-data-grid/?framework=react" className="btn btn-primary">React with ag-Grid</a>
+                                <a target="_blank" href="https://www.ag-grid.com/javascript-grid-cell-rendering-components/?framework=react" className="btn btn-primary">React Renderers</a>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        );
+    }
+};