AG-420 Improve React implementation

src/App.jsx

@@ -6,6 +6,10 @@ import NavItem from "./NavItem";
 import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponentsExample";
 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";
 
 const Header = () => (
     <header>
@@ -35,10 +39,10 @@ class App extends Component {
                     <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={RichComponentsExample}/>*/}
-                    {/*<Route exact path='/full-width' component={RichComponentsExample}/>*/}
-                    {/*<Route exact path='/group-row' component={RichComponentsExample}/>*/}
-                    {/*<Route exact path='/filter' component={RichComponentsExample}/>*/}
+                    <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={RichComponentsExample}/>*/}
                     {/*<Route exact path='/grouped-data' component={RichComponentsExample}/>*/}
                 </Switch>

src/editorComponentExample/MoodEditor.jsx

@@ -7,7 +7,6 @@ export default class MoodEditor extends Component {
 
         this.onHappyClick = this.onHappyClick.bind(this);
         this.onSadClick = this.onSadClick.bind(this);
-        this.onKeyDown = this.onKeyDown.bind(this);
 
         this.state = {
             happy: false

src/filterComponentExample/FilterComponentExample.jsx

@@ -0,0 +1,86 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+
+import "ag-grid-enterprise/main";
+import PartialMatchFilter from "./PartialMatchFilter";
+
+export default class FilterComponentExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            gridOptions: {},
+
+            rowData: this.createRowData(),
+            columnDefs: this.createColumnDefs(),
+        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+        this.onClicked = this.onClicked.bind(this);
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    onClicked() {
+        this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
+    }
+
+    createColumnDefs() {
+        return [
+            {headerName: "Row", field: "row", width: 400},
+            {
+                headerName: "Filter Component",
+                field: "name",
+                filterFramework: PartialMatchFilter,
+                width: 400
+            }
+        ];
+    }
+
+    createRowData() {
+        return [
+            {"row": "Row 1", "name": "Michael Phelps"},
+            {"row": "Row 2", "name": "Natalie Coughlin"},
+            {"row": "Row 3", "name": "Aleksey Nemov"},
+            {"row": "Row 4", "name": "Alicia Coutts"},
+            {"row": "Row 5", "name": "Missy Franklin"},
+            {"row": "Row 6", "name": "Ryan Lochte"},
+            {"row": "Row 7", "name": "Allison Schmitt"},
+            {"row": "Row 8", "name": "Natalie Coughlin"},
+            {"row": "Row 9", "name": "Ian Thorpe"},
+            {"row": "Row 10", "name": "Bob Mill"},
+            {"row": "Row 11", "name": "Willy Walsh"},
+            {"row": "Row 12", "name": "Sarah McCoy"},
+            {"row": "Row 13", "name": "Jane Jack"},
+            {"row": "Row 14", "name": "Tina Wills"}
+        ];
+    }
+
+    render() {
+        return (
+            <div style={{width: 800, height: 400}}
+                 className="ag-fresh">
+                <h1>Group Row Renderer Example</h1>
+                <button style={{marginBottom: 10}} onClick={this.onClicked}>Filter Instance Method</button>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    enableFilter
+                    suppressMenuColumnPanel // ag-enterprise only
+                    suppressMenuMainPanel   // ag-enterprise only
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        );
+    }
+};

src/filterComponentExample/PartialMatchFilter.jsx

@@ -0,0 +1,70 @@
+import React, {Component} from "react";
+import ReactDOM from "react-dom";
+
+export default class PartialMatchFilter extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            text: ''
+        }
+        this.valueGetter = this.props.valueGetter;
+
+        this.onChange = this.onChange.bind(this);
+    }
+
+    isFilterActive() {
+        return this.state.text !== null && this.state.text !== undefined && this.state.text !== '';
+    }
+
+    doesFilterPass(params) {
+        return this.state.text.toLowerCase()
+            .split(" ")
+            .every((filterWord) => {
+                return this.valueGetter(params.node).toString().toLowerCase().indexOf(filterWord) >= 0;
+            });
+    }
+
+    getModel() {
+        return {value: this.state.text};
+    }
+
+    setModel(model) {
+        this.state.text = model ? model.value : '';
+    }
+
+    afterGuiAttached(params) {
+        this.focus();
+    }
+
+    focus() {
+        setTimeout(() => {
+            let container = ReactDOM.findDOMNode(this.refs.input);
+            if (container) {
+                container.focus();
+            }
+        })
+    }
+
+    componentMethod(message) {
+        alert(`Alert from PartialMatchFilterComponent ${message}`);
+    }
+
+    onChange(event) {
+        let newValue = event.target.value;
+        if (this.state.text !== newValue) {
+            this.setState({
+                text: newValue
+            }, () => {
+                this.props.filterChangedCallback();
+            });
+
+        }
+    }
+
+    render() {
+        return (
+            <span>Filter: <input style={{height: "20px"}} ref="input" value={this.state.text} onChange={this.onChange}/></span>
+        );
+    }
+};

src/floatingRowExample/FloatingRowComponentExample.jsx

@@ -0,0 +1,85 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+import StyledRenderer from "./StyledRenderer";
+
+export default class FloatingRowComponentExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            gridOptions: {},
+
+            rowData: this.createRowData(),
+            columnDefs: this.createColumnDefs(),
+
+            topFloatingRowData: [{row: "Top Row", number: "Top Number"}],
+            bottomFloatingRowData: [{row: "Bottom Row", number: "Bottom Number"}]
+        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    createColumnDefs() {
+        return [
+            {
+                headerName: "Row",
+                field: "row",
+                width: 400,
+                floatingCellRendererFramework: StyledRenderer,
+                floatingCellRendererParams: {
+                    style: {'fontWeight': 'bold'}
+                }
+            },
+            {
+                headerName: "Number",
+                field: "number",
+                width: 399,
+                floatingCellRendererFramework: StyledRenderer,
+                floatingCellRendererParams: {
+                    style: {'fontStyle': 'italic'}
+                }
+            },
+        ];
+    }
+
+    createRowData() {
+        let rowData = [];
+
+        for (let i = 0; i < 15; i++) {
+            rowData.push({
+                row: "Row " + i,
+                number: Math.round(Math.random() * 100)
+            });
+        }
+
+        return rowData;
+    }
+
+    render() {
+        return (
+            <div style={{width: 800, height: 400}}
+                 className="ag-fresh">
+                <h1>Floating Row Renderer Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    floatingTopRowData={this.state.topFloatingRowData}
+                    floatingBottomRowData={this.state.bottomFloatingRowData}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        );
+    }
+};

src/floatingRowExample/StyledRenderer.jsx

@@ -0,0 +1,13 @@
+import React, {Component} from "react";
+
+export default class CurrencyRenderer extends Component {
+    constructor(props) {
+        super(props);
+    }
+
+    render() {
+        return (
+            <span style={this.props.style}>{this.props.value}</span>
+        );
+    }
+};

src/fullWidthExample/FullWidthComponentExample.jsx

@@ -0,0 +1,91 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+import NameAndAgeRenderer from "./NameAndAgeRenderer";
+
+export default class FullWidthComponentExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            gridOptions: {},
+
+            rowData: this.createRowData(),
+            columnDefs: this.createColumnDefs(),
+
+            topFloatingRowData: [{row: "Top Row", number: "Top Number"}],
+            bottomFloatingRowData: [{row: "Bottom Row", number: "Bottom Number"}]
+        };
+
+        this.onGridReady = this.onGridReady.bind(this);
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    isFullWidthCell(rowNode)  {
+        return (rowNode.id === "0") || (parseInt(rowNode.id) % 2 === 0);
+    }
+
+    createColumnDefs() {
+        return [
+            {
+                headerName: "Name",
+                field: "name",
+                width: 400
+            },
+            {
+                headerName: "Age",
+                field: "age",
+                width: 399
+            },
+        ];
+    }
+
+    createRowData() {
+        return [
+            {name: "Bob", age: 10},
+            {name: "Harry", age: 3},
+            {name: "Sally", age: 20},
+            {name: "Mary", age: 5},
+            {name: "John", age: 15},
+            {name: "Bob", age: 10},
+            {name: "Harry", age: 3},
+            {name: "Sally", age: 20},
+            {name: "Mary", age: 5},
+            {name: "John", age: 15},
+            {name: "Jack", age: 25},
+            {name: "Sue", age: 43},
+            {name: "Sean", age: 44},
+            {name: "Niall", age: 2},
+            {name: "Alberto", age: 32},
+            {name: "Fred", age: 53},
+            {name: "Jenny", age: 34},
+            {name: "Larry", age: 13},
+        ];
+    }
+
+    render() {
+        return (
+            <div style={{width: 800, height: 400}}
+                 className="ag-fresh">
+                <h1>Full Width Renderer Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    isFullWidthCell={this.isFullWidthCell}
+                    fullWidthCellRendererFramework={NameAndAgeRenderer}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        );
+    }
+};

src/fullWidthExample/NameAndAgeRenderer.jsx

@@ -0,0 +1,15 @@
+import React, {Component} from "react";
+
+export default class NameAndAgeRenderer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.values = `Name: ${this.props.data.name}, Age: ${this.props.data.age}`;
+    }
+
+    render() {
+        return (
+            <span>Full Width Column! { this.values }</span>
+        );
+    }
+};

src/groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample.jsx

@@ -0,0 +1,127 @@
+import React, {Component} from "react";
+import ReactDOM from "react-dom";
+
+import {AgGridReact} from "ag-grid-react";
+import MedalRenderer from "./MedalRenderer";
+
+import "ag-grid-enterprise/main";
+
+export default class GroupedRowInnerRendererComponentExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            gridOptions: {},
+
+            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: "Country",
+                field: "country",
+                width: 100,
+                rowGroupIndex: 0
+            },
+            {
+                headerName: "Name",
+                field: "name",
+                width: 100
+            },
+            {
+                headerName: "Gold",
+                field: "gold",
+                width: 100,
+                aggFunc: 'sum'
+            },
+            {
+                headerName: "Silver",
+                field: "silver",
+                width: 100,
+                aggFunc: 'sum'
+            },
+            {
+                headerName: "Bronze",
+                field: "bronze",
+                width: 100,
+                aggFunc: 'sum'
+            },
+        ];
+    }
+
+    createRowData() {
+        return [
+            {country: "United States", name: "Bob", gold: 1, silver: 0, bronze: 0},
+            {country: "United States", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "United States", name: "Sue", gold: 1, silver: 0, bronze: 1},
+            {country: "United Kingdom", name: "Mary", gold: 1, silver: 1, bronze: 0},
+            {country: "United Kingdom", name: "Tess", gold: 0, silver: 1, bronze: 1},
+            {country: "United Kingdom", name: "John", gold: 0, silver: 2, bronze: 1},
+            {country: "Jamaica", name: "Bob", gold: 1, silver: 1, bronze: 0},
+            {country: "Jamaica", name: "Jack", gold: 1, silver: 1, bronze: 0},
+            {country: "Jamaica", name: "Mary", gold: 1, silver: 1, bronze: 0},
+            {country: "South Africa", name: "Bob", gold: 1, silver: 0, bronze: 1},
+            {country: "South Africa", name: "Jack", gold: 1, silver: 0, bronze: 1},
+            {country: "South Africa", name: "Mary", gold: 1, silver: 0, bronze: 1},
+            {country: "South Africa", name: "John", gold: 1, silver: 0, bronze: 1},
+            {country: "New Zealand", name: "Bob", gold: 1, silver: 0, bronze: 0},
+            {country: "New Zealand", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "New Zealand", name: "Sue", gold: 1, silver: 0, bronze: 1},
+            {country: "Australia", name: "Mary", gold: 1, silver: 1, bronze: 0},
+            {country: "Australia", name: "Tess", gold: 0, silver: 1, bronze: 1},
+            {country: "Australia", name: "John", gold: 0, silver: 2, bronze: 1},
+            {country: "Canada", name: "Bob", gold: 1, silver: 1, bronze: 0},
+            {country: "Canada", name: "Jack", gold: 1, silver: 1, bronze: 0},
+            {country: "Canada", name: "Mary", gold: 1, silver: 1, bronze: 0},
+            {country: "Switzerland", name: "Bob", gold: 1, silver: 0, bronze: 1},
+            {country: "Switzerland", name: "Jack", gold: 1, silver: 0, bronze: 1},
+            {country: "Switzerland", name: "Mary", gold: 1, silver: 0, bronze: 1},
+            {country: "Switzerland", name: "John", gold: 1, silver: 0, bronze: 1},
+            {country: "Spain", name: "Bob", gold: 1, silver: 0, bronze: 0},
+            {country: "Spain", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "Spain", name: "Sue", gold: 1, silver: 0, bronze: 1},
+            {country: "Portugal", name: "Mary", gold: 1, silver: 1, bronze: 0},
+            {country: "Portugal", name: "Tess", gold: 0, silver: 1, bronze: 1},
+            {country: "Portugal", name: "John", gold: 0, silver: 2, bronze: 1},
+            {country: "Zimbabwe", name: "Bob", gold: 1, silver: 1, bronze: 0},
+            {country: "Zimbabwe", name: "Jack", gold: 1, silver: 1, bronze: 0},
+            {country: "Zimbabwe", name: "Mary", gold: 1, silver: 1, bronze: 0},
+            {country: "Brazil", name: "Bob", gold: 1, silver: 0, bronze: 1},
+            {country: "Brazil", name: "Jack", gold: 1, silver: 0, bronze: 1},
+            {country: "Brazil", name: "Mary", gold: 1, silver: 0, bronze: 1},
+            {country: "Brazil", name: "John", gold: 1, silver: 0, bronze: 1}
+        ];
+    }
+
+    render() {
+        return (
+            <div style={{width: 800, height: 400}}
+                 className="ag-fresh">
+                <h1>Group Row Renderer Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    groupUseEntireRow
+                    groupRowInnerRendererFramework={MedalRenderer}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        );
+    }
+};

src/groupedRowInnerRendererExample/MedalRenderer.jsx

@@ -0,0 +1,18 @@
+import React, {Component} from "react";
+
+export default class MedalRenderer extends Component {
+    constructor(props) {
+        super(props);
+
+        this.country = this.props.node.key;
+        this.gold = this.props.data.gold;
+        this.silver = this.props.data.silver;
+        this.bronze = this.props.data.bronze;
+    }
+
+    render() {
+        return (
+            <span>{this.country} Gold: {this.gold}, Silver: {this.silver}, Bronze: {this.bronze}</span>
+        );
+    }
+};

src/index.html

@@ -9,6 +9,10 @@
         html, body {
             height: 100%;
         }
+
+        .ag-react-container {
+            display: inline-block;
+        }
     </style>
 </head>