AG-618 Fixing floating filter issue. Also allowing for gulp watch of Angular and React

src/App.jsx

@@ -12,6 +12,7 @@ import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererEx
 import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
 import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
 import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
+import SimpleGridExample from "./floatingFilter/SimpleGridExample";
 
 class App extends Component {
     constructor(props) {
@@ -48,6 +49,7 @@ class App extends Component {
                     <li role="presentation" className={this.state.example === 'full-width' ? 'active' : null} onClick={() => this.setExample("full-width")}><a href="#">Full Width Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'group-row' ? 'active' : null} onClick={() => this.setExample("group-row")}><a href="#">Grouped Row Inner Renderer Example</a></li>
                     <li role="presentation" className={this.state.example === 'filter' ? 'active' : null} onClick={() => this.setExample("filter")}><a href="#">Filters Component Example</a></li>
+                    <li role="presentation" className={this.state.example === 'floating-filter' ? 'active' : null} onClick={() => this.setExample("floating-filter")}><a href="#">Floating Filters</a></li>
                     <li role="presentation" className={this.state.example === 'master-detail' ? 'active' : null} onClick={() => this.setExample("master-detail")}><a href="#">Master Detail Example</a></li>
                     <li role="presentation" className={this.state.example === 'simple-redux' ? 'active' : null} onClick={() => this.setExample("simple-redux")}><a href="#">Simple Redux Example</a></li>
                 </ul>)
@@ -82,6 +84,9 @@ class App extends Component {
             case 'simple-redux':
                 example = <SimpleReduxExample/>;
                 break;
+            case 'floating-filter':
+                example = <SimpleGridExample/>;
+                break;
             default:
                 example = <RichGridExample/>;
         }

src/floatingFilter/SimpleGridExample.jsx

@@ -0,0 +1,60 @@
+import React, {Component} from "react";
+import {AgGridReact} from "ag-grid-react";
+import FloatingFilter from "./floatingFilter";
+
+export default class extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: this.createColumnDefs(),
+            rowData: this.createRowData()
+        }
+    }
+
+    onGridReady(params) {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+    }
+
+    createColumnDefs() {
+        return [
+            {headerName: "Make", field: "make", floatingFilterComponentFramework: FloatingFilter, filter:'set'},
+            {headerName: "Model", field: "model"},
+            {headerName: "Price", field: "price"}
+        ];
+    }
+
+    createRowData() {
+        return [
+            {make: "Toyota", model: "Celica", price: 35000},
+            {make: "Ford", model: "Mondeo", price: 32000},
+            {make: "Porsche", model: "Boxter", price: 72000}
+        ];
+    }
+
+    render() {
+        let containerStyle = {
+            height: 115,
+            width: 500
+        };
+
+        return (
+            <div style={containerStyle} className="ag-fresh">
+                <h1>Simple ag-Grid React Example</h1>
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.state.rowData}
+
+                    floatingFilter={true}
+
+                    // events
+                    onGridReady={this.onGridReady}>
+                </AgGridReact>
+            </div>
+        )
+    }
+};

src/floatingFilter/floatingFilter.jsx

@@ -0,0 +1,39 @@
+import React, {Component} from "react";
+import ReactDOM from "react-dom";
+
+export default class FloatingFilter extends Component {
+    constructor(props) {
+        super();
+        this.state = {
+            parentModel: null
+        }
+    }
+
+    onParentModelChanged(parentModel){
+        this.setState ({
+            parentModel: parentModel
+        })
+    }
+
+    remove(item){
+        this.props.onFloatingFilterChanged({
+            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 = ()=>{
+                this.remove(item)
+            }
+            let removeMeElement = <a onClick={removeMeListener}>[x]</a>;
+            return <span key={i}>{item}{removeMeElement}</span>;
+        });
+
+        return <div>{options}</div>;
+    }
+}