AG-1053 Tidy react examples, make more idiomatic

src-examples/filterComponentExample/FilterComponentExample.jsx

@@ -0,0 +1,90 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+
+import "ag-grid-enterprise";
+
+import PartialMatchFilter from "./PartialMatchFilter";
+
+export default class FilterComponentExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            rowData: FilterComponentExample.createRowData(),
+            columnDefs: FilterComponentExample.createColumnDefs(),
+        };
+    }
+
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    };
+
+    onClicked = () => {
+        this.gridApi.getFilterInstance("name").getFrameworkComponentInstance().componentMethod("Hello World!");
+    };
+
+    static createColumnDefs() {
+        return [
+            {
+                field: "row",
+                width: 400,
+                suppressMenu: true
+            },
+            {
+                headerName: "Filter Component",
+                field: "name",
+                filterFramework: PartialMatchFilter,
+                width: 400,
+                menuTabs: ['filterMenuTab']
+            }
+        ];
+    }
+
+    static 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={{height: 400, width: 900}}
+                 className="ag-fresh">
+                <h1>Filter Component Example</h1>
+                <button style={{marginBottom: 10}} onClick={this.onClicked} className="btn btn-primary">Filter Instance
+                    Method
+                </button>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    enableFilter
+                    suppressMenuHide
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+                <h4>The filter on the Filter Component column uses a Custom React Filter Component</h4>
+                <p>This filter will allow partial matches - for example enter "m p" which will match Michael Phelps.</p>
+            </div>
+        );
+    }
+};

src-examples/filterComponentExample/PartialMatchFilter.jsx

@@ -0,0 +1,83 @@
+import React, {Component} from "react";
+
+export default class PartialMatchFilter extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            text: ''
+        };
+
+        this.valueGetter = this.props.valueGetter;
+    }
+
+    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 : '';
+    }
+
+    componentDidMount() {
+        this.focus();
+    }
+
+    focus() {
+        setTimeout(() => {
+            if (this.refs.input) {
+                this.refs.input.focus();
+            }
+        })
+    }
+
+    componentMethod(message) {
+        alert(`Alert from PartialMatchFilterComponent ${message}`);
+    }
+
+    onChange = (event) => {
+        let newValue = event.target.value;
+        if (this.state.text !== newValue) {
+            this.setState({
+                text: newValue
+            }, () => {
+                // wait for the state to be applied, then let the grid know about the change
+                this.props.filterChangedCallback();
+            });
+
+        }
+    };
+
+    render() {
+        console.log("render");
+        let style = {
+            border: "2px solid #22ff22",
+            borderRadius: "5px",
+            backgroundColor: "#bbffbb",
+            width: "200px",
+            height: "50px"
+        };
+
+        return (
+            <div style={style}>
+                Filter: <input style={{height: "20px"}}
+                               ref="input"
+                               value={this.state.text}
+                               onChange={this.onChange}
+                               className="form-control"/>
+            </div>
+        );
+    }
+};