AG-643 Tidy React examples

src/floatingFilter/FloatingFilterGridExample.jsx

@@ -1,8 +1,9 @@
 import React, {Component} from "react";
 import {AgGridReact} from "ag-grid-react";
 import FloatingFilter from "./floatingFilter";
+import overrideStyle from "./floatingFilter.css";
 
-export default class extends Component {
+export default class FloatingFilterGridExample extends Component {
     constructor(props) {
         super(props);
 
@@ -21,7 +22,12 @@ export default class extends Component {
 
     createColumnDefs() {
         return [
-            {headerName: "Make", field: "make", floatingFilterComponentFramework: FloatingFilter, filter:'set'},
+            {
+                headerName: "Make",
+                field: "make",
+                floatingFilterComponentFramework: FloatingFilter,
+                filter: 'set'
+            },
             {headerName: "Model", field: "model"},
             {headerName: "Price", field: "price"}
         ];
@@ -36,13 +42,16 @@ export default class extends Component {
     }
 
     render() {
-        let containerStyle = {
-            height: 115,
-            width: 500
+        let divStyle = {
+            height: 400,
+            width: 945
         };
 
+        // combine the styles
+        const style = Object.assign({}, divStyle, overrideStyle);
+
         return (
-            <div style={containerStyle} className="ag-fresh">
+            <div style={style} className="ag-fresh">
                 <h1>Simple ag-Grid React Example</h1>
                 <AgGridReact
                     // properties

src/floatingFilter/floatingFilter.css

@@ -0,0 +1,3 @@
+.ag-floating-filter-button button {
+    margin: 0
+}

src/floatingFilter/floatingFilter.jsx

@@ -1,35 +1,34 @@
 import React, {Component} from "react";
-import ReactDOM from "react-dom";
 
 export default class FloatingFilter extends Component {
     constructor(props) {
-        super();
+        super(props);
         this.state = {
             parentModel: null
         }
     }
 
-    onParentModelChanged(parentModel){
-        this.setState ({
+    onParentModelChanged(parentModel) {
+        this.setState({
             parentModel: parentModel
         })
     }
 
-    remove(item){
+    remove(item) {
         this.props.onFloatingFilterChanged({
-            model:this.state.parentModel.filter(it=>it != item)
+            model: this.state.parentModel.filter(it => it !== item)
         });
     }
 
     render() {
         if (!this.state.parentModel) return null;
 
-        let that = this;
-        let options = this.state.parentModel.map ((item, i)=>{
-            let that = this;
-            let removeMeListener = ()=>{
+        // as the backing filter is a set filter what we're doing here is rendering the list in the set
+        // and when the [x] removing the selected item, thereby effectively hiding it
+        let options = this.state.parentModel.map((item, i) => {
+            let removeMeListener = () => {
                 this.remove(item)
-            }
+            };
             let removeMeElement = <a onClick={removeMeListener}>[x]</a>;
             return <span key={i}>{item}{removeMeElement}</span>;
         });