AG-643 Tidy React examples

src/App.jsx

@@ -6,13 +6,13 @@ import DynamicComponentsExample from "./dynamicComponentExample/DynamicComponent
 import RichGridExample from "./richGridExample/RichGridExample";
 import RichComponentsExample from "./richComponentExample/RichComponentsExample";
 import EditorComponentsExample from "./editorComponentExample/EditorComponentsExample";
-import FloatingRowComponentExample from "./floatingRowExample/FloatingRowComponentExample";
+import PinnedRowComponentExample from "./pinnedRowExample/PinnedRowComponentExample";
 import FullWidthComponentExample from "./fullWidthExample/FullWidthComponentExample";
 import GroupedRowInnerRendererComponentExample from "./groupedRowInnerRendererExample/GroupedRowInnerRendererComponentExample";
 import FilterComponentExample from "./filterComponentExample/FilterComponentExample";
 import MasterDetailExample from "./masterDetailExample/MasterDetailExample";
 import SimpleReduxExample from "./simpleReduxExample/SimpleReduxExample";
-import SimpleGridExample from "./floatingFilter/SimpleGridExample";
+import FloatingFilterGridExample from "./floatingFilter/FloatingFilterGridExample";
 
 class App extends Component {
     constructor(props) {
@@ -45,7 +45,7 @@ class App extends Component {
                     <li role="presentation" className={this.state.example === 'dynamic' ? 'active' : null} onClick={() => this.setExample("dynamic")}><a href="#">Dynamic React Component Example</a></li>
                     <li role="presentation" className={this.state.example === 'rich-dynamic' ? 'active' : null} onClick={() => this.setExample("rich-dynamic")}><a href="#">Dynamic React Components - Richer Example</a></li>
                     <li role="presentation" className={this.state.example === 'editor' ? 'active' : null} onClick={() => this.setExample("editor")}><a href="#">Cell Editor Component Example</a></li>
-                    <li role="presentation" className={this.state.example === 'floating-row' ? 'active' : null} onClick={() => this.setExample("floating-row")}><a href="#">Pinned Row Renderer Example</a></li>
+                    <li role="presentation" className={this.state.example === 'pinned-row' ? 'active' : null} onClick={() => this.setExample("pinned-row")}><a href="#">Pinned Row Renderer Example</a></li>
                     <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>
@@ -66,8 +66,8 @@ class App extends Component {
             case 'editor':
                 example = <EditorComponentsExample/>;
                 break;
-            case 'floating-row':
+            case 'pinned-row':
-                example = <FloatingRowComponentExample/>;
+                example = <PinnedRowComponentExample/>;
                 break;
             case 'full-width':
                 example = <FullWidthComponentExample/>;
@@ -85,7 +85,7 @@ class App extends Component {
                 example = <SimpleReduxExample/>;
                 break;
             case 'floating-filter':
-                example = <SimpleGridExample/>;
+                example = <FloatingFilterGridExample/>;
                 break;
             default:
                 example = <RichGridExample/>;

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 = {
+        let divStyle = {
-            height: 115,
+            height: 400,
-            width: 500
+            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){
+    onParentModelChanged(parentModel) {
-        this.setState ({
+        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;
+        // as the backing filter is a set filter what we're doing here is rendering the list in the set
-        let options = this.state.parentModel.map ((item, i)=>{
+        // and when the [x] removing the selected item, thereby effectively hiding it
-            let that = this;
+        let options = this.state.parentModel.map((item, i) => {
-            let removeMeListener = ()=>{
+            let removeMeListener = () => {
                 this.remove(item)
-            }
+            };
             let removeMeElement = <a onClick={removeMeListener}>[x]</a>;
             return <span key={i}>{item}{removeMeElement}</span>;
         });

src/pinnedRowExample/PinnedRowComponentExample.jsx

@@ -3,7 +3,7 @@ import React, {Component} from "react";
 import {AgGridReact} from "ag-grid-react";
 import StyledRenderer from "./StyledRenderer";
 
-export default class FloatingRowComponentExample extends Component {
+export default class PinnedRowComponentExample extends Component {
     constructor(props) {
         super(props);
 
@@ -33,8 +33,8 @@ export default class FloatingRowComponentExample extends Component {
                 headerName: "Row",
                 field: "row",
                 width: 400,
-                floatingCellRendererFramework: StyledRenderer,
+                pinnedRowCellRendererFramework: StyledRenderer,
-                floatingCellRendererParams: {
+                pinnedRowCellRendererParams: {
                     style: {'fontWeight': 'bold'}
                 }
             },
@@ -42,8 +42,8 @@ export default class FloatingRowComponentExample extends Component {
                 headerName: "Number",
                 field: "number",
                 width: 399,
-                floatingCellRendererFramework: StyledRenderer,
+                pinnedRowCellRendererFramework: StyledRenderer,
-                floatingCellRendererParams: {
+                pinnedRowCellRendererParams: {
                     style: {'fontStyle': 'italic'}
                 }
             },
@@ -55,7 +55,7 @@ export default class FloatingRowComponentExample extends Component {
 
         for (let i = 0; i < 15; i++) {
             rowData.push({
-                row: "Rou " + i,
+                row: "Row " + i,
                 number: Math.round(Math.random() * 100)
             });
         }