AG-420 Improve React implementation

src/richComponentExample/ClickableRenderer.jsx

@@ -0,0 +1,26 @@
+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
+            }
+        };
+
+        this.clicked = this.clicked.bind(this);
+    }
+
+    clicked() {
+        console.log("Child Cell Clicked: " + JSON.stringify(this.state.cell));
+    }
+
+    render() {
+          return (
+            <button style={{height: 21}} onClick={this.clicked} >Click Me</button>
+        );
+    }
+}

src/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/richComponentExample/RichComponentsExample.jsx

@@ -0,0 +1,78 @@
+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: this.createRowData(),
+            columnDefs: this.createColumnDefs()
+        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    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
+            }
+        ];    }
+
+    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={{width: 800, height: 400}}
+                 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>
+        );
+    }
+};