AG-1053 Tidy react examples, make more idiomatic

2017-11-08 14:45:28 +00:00
parent b030235bbc
commit 983b5974cf
149 changed files with 339 additions and 8856 deletions
--- a/src-examples/simpleReduxExample/GridComponent.jsx
+++ b/src-examples/simpleReduxExample/GridComponent.jsx
@@ -0,0 +1,102 @@
+import React, {Component} from "react";
+
+import {AgGridReact} from "ag-grid-react";
+import {connect} from "react-redux";
+
+// take this line out if you do not want to use ag-Grid-Enterprise
+import "ag-grid-enterprise";
+
+import {updateRowSelection} from "./gridDataActions";
+
+/*
+ * This component serves to display the row data (provided by redux)
+ */
+class GridComponent extends Component {
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            columnDefs: [
+                {headerName: 'Symbol', field: 'symbol'},
+                {headerName: 'Price', field: 'price'},
+                {headerName: 'Group', field: 'group'}
+            ]
+        };
+    }
+
+    onGridReady = (params) => {
+        this.gridApi = params.api;
+        this.columnApi = params.columnApi;
+
+        this.gridApi.sizeColumnsToFit();
+
+        // set the initial group state
+        this.setGroupingEnabled(false);
+    };
+
+    // on selection publish selected row ids
+    onSelectionChanged = () => {
+        let selectedRowNodes = this.gridApi.getSelectedNodes();
+        let selectedIds = selectedRowNodes.map((rowNode) => rowNode.id);
+
+        this.props.dispatch(updateRowSelection(selectedIds));
+    };
+
+    setGroupingEnabled = (enabled) => {
+        if (enabled) {
+            this.columnApi.addRowGroupColumn('group');
+            this.columnApi.setColumnVisible('group', false);
+            this.columnApi.setColumnVisible('symbol', false);
+        } else {
+            this.columnApi.removeRowGroupColumn('group');
+            this.columnApi.setColumnVisible('group', true);
+            this.columnApi.setColumnVisible('symbol', true);
+        }
+    };
+
+    // row data will be provided via redux on this.props.rowData
+    // we bind to this and using "deltaRowDataMode" the grid will only re-render rows that have changed
+    // this requires each row to have a uniquely identifying property - in this case the row data "symbol" (see getRowNodeId)
+    render() {
+        return (
+            <div style={{height: 400, width: 900, marginTop: 15}}
+                 className="ag-fresh">
+                <AgGridReact
+                    // properties
+                    columnDefs={this.state.columnDefs}
+                    rowData={this.props.rowData}
+
+                    deltaRowDataMode
+                    suppressCellSelection
+                    animateRows
+                    enableColResize
+                    rowSelection="multiple"
+                    autoColumnGroupDef={{
+                        headerName: 'Symbol',
+                        cellRenderer: 'group',
+                        field: 'symbol'
+                    }}
+                    groupDefaultExpanded="1"
+                    enableSorting
+                    getRowNodeId={(data) => data.symbol}
+
+                    // events
+                    onGridReady={this.onGridReady}
+                    onSelectionChanged={this.onSelectionChanged}>
+                </AgGridReact>
+            </div>
+        )
+    }
+}
+
+// pull off row data changes
+export default connect(
+    (state) => {
+        return {
+            rowData: state.rowData
+        }
+    },
+    null,
+    null,
+    {withRef: true}
+)(GridComponent);