AG-1053 Tidy react examples, make more idiomatic

src-examples/floatingFilter/FloatingFilterGridExample.jsx

@@ -0,0 +1,134 @@
+import React, {Component} from "react";
+import {AgGridReact} from "ag-grid-react";
+import SlidingFloatingFilter from "./SlidingFloatingFilter";
+
+export default class FloatingFilterGridExample extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: FloatingFilterGridExample.createColumnDefs(),
+            rowData: FloatingFilterGridExample.createRowData()
+        }
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    static createColumnDefs() {
+        return [
+            {
+                field: "country",
+                suppressFilter: true
+            },
+            {
+                field: "language",
+                suppressFilter: true
+            },
+            {
+                field: "name",
+                suppressFilter: true
+            },
+            {
+                field: "gold",
+                floatingFilterComponentFramework: SlidingFloatingFilter,
+                floatingFilterComponentParams: {
+                    maxValue: 7,
+                    suppressFilterButton: true
+                },
+                filter: 'number',
+                suppressMenu: false
+            },
+            {
+                field: "silver",
+                filter: 'number',
+                floatingFilterComponentFramework: SlidingFloatingFilter,
+                floatingFilterComponentParams: {
+                    maxValue: 5,
+                    suppressFilterButton: true
+                },
+                suppressMenu: false
+            },
+            {
+                field: "bronze",
+                filter: 'number',
+                floatingFilterComponentFramework: SlidingFloatingFilter,
+                floatingFilterComponentParams: {
+                    maxValue: 10,
+                    suppressFilterButton: true
+                },
+                suppressMenu: false
+            }
+        ];
+    }
+
+    static createRowData() {
+        return [
+            {country: "United States", language: "English", name: "Bob", gold: 1, silver: 3, bronze: 0},
+            {country: "United States", language: "English", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "United States", language: "English", name: "Sue", gold: 3, silver: 0, bronze: 1},
+            {country: "United Kingdom", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2},
+            {country: "United Kingdom", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1},
+            {country: "United Kingdom", language: "English", name: "John", gold: 0, silver: 2, bronze: 1},
+            {country: "Jamaica", language: "English", name: "Bob", gold: 4, silver: 1, bronze: 2},
+            {country: "Jamaica", language: "English", name: "Jack", gold: 3, silver: 1, bronze: 2},
+            {country: "Jamaica", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 2},
+            {country: "South Africa", language: "English", name: "Bob", gold: 4, silver: 0, bronze: 1},
+            {country: "South Africa", language: "English", name: "Jack", gold: 3, silver: 0, bronze: 1},
+            {country: "South Africa", language: "English", name: "Mary", gold: 5, silver: 3, bronze: 1},
+            {country: "South Africa", language: "English", name: "John", gold: 2, silver: 3, bronze: 1},
+            {country: "New Zealand", language: "English", name: "Bob", gold: 5, silver: 3, bronze: 10},
+            {country: "New Zealand", language: "English", name: "Jack", gold: 1, silver: 1, bronze: 1},
+            {country: "New Zealand", language: "English", name: "Sue", gold: 1, silver: 3, bronze: 1},
+            {country: "Australia", language: "English", name: "Mary", gold: 1, silver: 1, bronze: 3},
+            {country: "Australia", language: "English", name: "Tess", gold: 2, silver: 1, bronze: 1},
+            {country: "Australia", language: "English", name: "John", gold: 3, silver: 2, bronze: 1},
+            {country: "Canada", language: "English", name: "Bob", gold: 7, silver: 5, bronze: 3},
+            {country: "Canada", language: "English", name: "Jack", gold: 2, silver: 1, bronze: 3},
+            {country: "Canada", language: "English", name: "Mary", gold: 0, silver: 1, bronze: 3},
+            {country: "Switzerland", language: "French", name: "Bob", gold: 2, silver: 3, bronze: 1},
+            {country: "Switzerland", language: "French", name: "Jack", gold: 2, silver: 3, bronze: 1},
+            {country: "Switzerland", language: "French", name: "Mary", gold: 1, silver: 3, bronze: 1},
+            {country: "Switzerland", language: "French", name: "John", gold: 1, silver: 4, bronze: 1},
+            {country: "Spain", language: "Spanish", name: "Bob", gold: 1, silver: 4, bronze: 0},
+            {country: "Spain", language: "Spanish", name: "Jack", gold: 0, silver: 1, bronze: 1},
+            {country: "Spain", language: "Spanish", name: "Sue", gold: 1, silver: 4, bronze: 1},
+            {country: "Portugal", language: "Portuguese", name: "Mary", gold: 2, silver: 1, bronze: 4},
+            {country: "Portugal", language: "Portuguese", name: "Tess", gold: 3, silver: 1, bronze: 1},
+            {country: "Portugal", language: "Portuguese", name: "John", gold: 5, silver: 2, bronze: 1},
+            {country: "Zimbabwe", language: "English", name: "Bob", gold: 3, silver: 1, bronze: 4},
+            {country: "Zimbabwe", language: "English", name: "Jack", gold: 4, silver: 1, bronze: 4},
+            {country: "Zimbabwe", language: "English", name: "Mary", gold: 2, silver: 1, bronze: 4},
+            {country: "Brazil", language: "Brazillian", name: "Bob", gold: 3, silver: 4, bronze: 1},
+            {country: "Brazil", language: "Brazillian", name: "Jack", gold: 2, silver: 4, bronze: 1},
+            {country: "Brazil", language: "Brazillian", name: "Mary", gold: 4, silver: 0, bronze: 1},
+            {country: "Brazil", language: "Brazillian", name: "John", gold: 1, silver: 0, bronze: 1}];
+    }
+
+    render() {
+        let divStyle = {
+            height: 400,
+            width: 900
+        };
+
+        return (
+            <div style={divStyle} className="ag-fresh">
+                <h1>Floating Filter Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    floatingFilter
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        )
+    }
+};

src-examples/floatingFilter/SlidingFloatingFilter.jsx

@@ -0,0 +1,53 @@
+import React, {Component} from "react";
+
+export default class SlidingFloatingFilter extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            maxValue: props.maxValue,
+            currentValue: 0
+        }
+    }
+
+    valueChanged = (event) => {
+        this.setState({
+                currentValue: event.target.value
+            },
+            () => {
+                this.props.onFloatingFilterChanged({model: this.buildModel()});
+            })
+
+    };
+
+    onParentModelChanged(parentModel) {
+        // note that the filter could be anything here, but our purposes we're assuming a greater than filter only,
+        // so just read off the value and use that
+        this.setState({
+            currentValue: !parentModel ? 0 : parentModel.filter
+        });
+    }
+
+    buildModel() {
+        if (this.state.currentValue === 0) {
+            return null;
+        }
+        return {
+            filterType: 'number',
+            type: 'greaterThan',
+            filter: this.state.currentValue,
+            filterTo: null
+        };
+    }
+
+    render() {
+        return (
+            <input type="range"
+                   value={this.state.currentValue}
+                   min={0}
+                   max={this.state.maxValue}
+                   step={1}
+                   onChange={this.valueChanged}/>
+        )
+    }
+}