Re-implement row selection (#1762)

* Re-implement row selection

* Re-enable jsx-curly-brace-presence

* onSelectedRowsChanged -> onSelectedRowsChange

* Small cleanup in Canvas.tsx

* small tweaks

* Delete RowUtils tests

* Fix Canvas tests

* Get shift selection almost working

* Simplify a few exports

* Focus CellMask when clicking on a cell

* Working shift selection

* use a ref for lastSelectedRowIdx

* Add class methods to avoid recomputation

* Do it the react way

* Simplify 1 type

* Fix selection

* tweaks

* Remove references to `enableRowSelect`

* More cleanup

* fix some tests

* fix tests

* Remove @testing-library/react/cleanup-after-each

* Fix some examples

* Fix another example

* optimize all-features example

* Cleanup viewport events

* Cleanup props, remove PureComponent

* Fix draggable header example

* Commit reordering fixes (not working)

* Remove row-reordering components

* Fix eslint errors

* Remove re-ordering refrences

* Remove tests for the deleted file

* Fix types

Author: amanmahajan7

.eslintrc.js

@@ -357,7 +357,7 @@ const rules = {
   'react/jsx-no-undef': 0,
   'react/jsx-no-useless-fragment': 0,
   'react/jsx-one-expression-per-line': 0,
-  'react/jsx-curly-brace-presence': 0,
+  'react/jsx-curly-brace-presence': 1,
   'react/jsx-fragments': 1,
   'react/jsx-pascal-case': 1,
   'react/jsx-props-no-multi-spaces': 1,

examples/components/ExampleList.js

@@ -29,7 +29,6 @@ export default class ExampleList extends React.Component {
         <li><Link to="/examples/grouping">Grouping Example</Link></li>
         <li><Link to="/examples/custom-filters">Custom Filters Example</Link></li>
         <li><Link to="/examples/immutable-data-grouping">Immutable Data Grouping Example</Link></li>
-        <li><Link to="/examples/row-reordering">Row Reordering Example</Link></li>
         <li><Link to="/examples/draggable-header">Draggable Header Example</Link></li>
         <li><Link to="/examples/tree-view">Tree View Example</Link></li>
         <li><Link to="/examples/tree-view-no-add-delete">Tree View No Add Delete Example</Link></li>

examples/components/Examples.js

@@ -28,7 +28,6 @@ import CellSelectionEvents from '../scripts/example21-cell-selection-events';
 import Grouping from '../scripts/example21-grouping';
 import CustomFilters from '../scripts/example22-custom-filters';
 import ImmutableDataGrouping from '../scripts/example23-immutable-data-grouping';
-import RowOrdering from '../scripts/example23-row-reordering';
 import DraggableHeader from '../scripts/example24-draggable-header';
 import TreeView from '../scripts/example25-tree-view';
 import TreeViewNoAddDelete from '../scripts/example26-tree-view-no-add-delete';
@@ -78,7 +77,6 @@ export default function Examples({ match }) {
               <Route path="/examples/grouping" component={Grouping} />
               <Route path="/examples/custom-filters" component={CustomFilters} />
               <Route path="/examples/immutable-data-grouping" component={ImmutableDataGrouping} />
-              <Route path="/examples/row-reordering" component={RowOrdering} />
               <Route path="/examples/draggable-header" component={DraggableHeader} />
               <Route path="/examples/tree-view" component={TreeView} />
               <Route path="/examples/tree-view-no-add-delete" component={TreeViewNoAddDelete} />

examples/scripts/example13-all-features.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import ReactDataGrid from 'react-data-grid';
+import ReactDataGrid, { SelectColumn } from 'react-data-grid';
 import { Editors, Toolbar, Formatters } from 'react-data-grid-addons';
 import update from 'immutability-helper';
 import faker from 'faker';
@@ -16,7 +16,8 @@ const titles = ['Dr.', 'Mr.', 'Mrs.', 'Miss', 'Ms.'];
 class Example extends React.Component {
   constructor(props, context) {
     super(props, context);
-    this._columns = [
+    this.columns = [
+      SelectColumn,
       {
         key: 'id',
         name: 'ID',
@@ -38,8 +39,8 @@ class Example extends React.Component {
         width: 200,
         resizable: true,
         events: {
-          onDoubleClick() {
-            console.log('The user double clicked on title column');
+          onClick: (ev, { idx, rowIdx }) => {
+            this.grid.openCellEditor(rowIdx, idx);
           }
         }
       },
@@ -115,7 +116,10 @@ class Example extends React.Component {
       }
     ];
 
-    this.state = { rows: this.createRows(2000) };
+    this.state = {
+      rows: this.createRows(2000),
+      selectedRows: new Set()
+    };
   }
 
   createRows = (numberOfRows) => {
@@ -145,17 +149,6 @@ class Example extends React.Component {
     };
   };
 
-  getColumns = () => {
-    const clonedColumns = this._columns.slice();
-    clonedColumns[2].events = {
-      onClick: (ev, { idx, rowIdx }) => {
-        this.grid.openCellEditor(rowIdx, idx);
-      }
-    };
-
-    return clonedColumns;
-  };
-
   handleGridRowsUpdated = ({ fromRow, toRow, updated }) => {
     const rows = this.state.rows.slice();
 
@@ -193,19 +186,24 @@ class Example extends React.Component {
     return this.state.rows.length;
   };
 
+  onSelectedRowsChange = (selectedRows) => {
+    this.setState({ selectedRows });
+  };
+
   render() {
     return (
       <ReactDataGrid
         ref={node => this.grid = node}
         enableCellSelect
-        columns={this.getColumns()}
+        columns={this.columns}
         rowGetter={this.getRowAt}
         rowsCount={this.getSize()}
         onGridRowsUpdated={this.handleGridRowsUpdated}
         toolbar={<Toolbar onAddRow={this.handleAddRow} />}
-        enableRowSelect
         rowHeight={50}
         minHeight={600}
+        selectedRows={this.state.selectedRows}
+        onSelectedRowsChange={this.onSelectedRowsChange}
       />
     );
   }

examples/scripts/example16-row-select.js

@@ -1,12 +1,13 @@
 import React from 'react';
-import ReactDataGrid from 'react-data-grid';
+import ReactDataGrid, { SelectColumn } from 'react-data-grid';
 
 import exampleWrapper from '../components/exampleWrapper';
 
 class Example extends React.Component {
   constructor(props) {
     super(props);
     this._columns = [
+      SelectColumn,
       {
         key: 'id',
         name: 'ID'
@@ -29,71 +30,41 @@ class Example extends React.Component {
         count: i * 1000
       });
     }
-    this.state = { rows, selectedIndexes: [] };
+    this.state = {
+      rows,
+      selectedRows: new Set()
+    };
   }
 
   rowGetter = (i) => {
     return this.state.rows[i];
   };
 
-  onRowsSelected = (rows) => {
-    this.setState({ selectedIndexes: this.state.selectedIndexes.concat(rows.map(r => r.rowIdx)) });
-  };
-
-  onRowsDeselected = (rows) => {
-    const rowIndexes = rows.map(r => r.rowIdx);
-    this.setState({ selectedIndexes: this.state.selectedIndexes.filter(i => rowIndexes.indexOf(i) === -1) });
+  onSelectedRowsChange = (selectedRows) => {
+    this.setState({ selectedRows });
   };
 
   render() {
-    const rowText = this.state.selectedIndexes.length === 1 ? 'row' : 'rows';
+    const rowText = this.state.selectedRows.size === 1 ? 'row' : 'rows';
     return (
       <div>
-        <span>{this.state.selectedIndexes.length} {rowText} selected</span>
+        <span>{this.state.selectedRows.size} {rowText} selected</span>
         <ReactDataGrid
           rowKey="id"
           columns={this._columns}
           rowGetter={this.rowGetter}
           rowsCount={this.state.rows.length}
           minHeight={500}
-          rowSelection={{
-            showCheckbox: true,
-            enableShiftSelect: true,
-            onRowsSelected: this.onRowsSelected,
-            onRowsDeselected: this.onRowsDeselected,
-            selectBy: {
-              indexes: this.state.selectedIndexes
-            }
-          }}
+          selectedRows={this.state.selectedRows}
+          onSelectedRowsChange={this.onSelectedRowsChange}
         />
       </div>
     );
   }
 }
 
 const exampleDescription = (
-  <div>
-    <p>Row selection is enabled via the <code>rowSelection</code> prop (object). The following keys control behaviour:</p>
-    <h4>selectBy</h4>
-    <p>
-      This allows rows to be selected programatically. The options are:<br />
-      indexes - <code dangerouslySetInnerHTML={{ __html: 'selectBy: {indexes: [0, 1, 2]}' }} /> to select rows by index.<br />
-      keys - <code dangerouslySetInnerHTML={{ __html: "selectBy: {keys: {rowKey: 'title', values: ['Title1', 'Title2']}}" }} /> to select rows by specified key and values.<br />
-      isSelectedKey - <code dangerouslySetInnerHTML={{ __html: "selectBy: {isSelectedKey: 'isSelected'}" }} /> to select rows by specified key (based on value being truthy or falsy).
-    </p>
-    <h4>onRowsSelected/onRowsDeselected</h4>
-    <p>
-      When rows are selected or de-selected, <code>onRowsSelected</code> or <code>onRowsDeselected</code> functions will be called (set as props) with an array of <code dangerouslySetInnerHTML={{ __html: '{rowIdx, row}' }} />.<br />
-      This allows for single or multiple selection to be implemented as desired, by either appending to or replacing the list of selected items.
-    </p>
-    <h4>showCheckbox</h4>
-    <p>Allows the row selection checkbox to be hidden (shown by default). Useful for selecting rows programatically and controlling selection via the<code>onRowClick</code> event.</p>
-    <h4>enableShiftSelect</h4>
-    <p>
-      Allows a continuous range of rows to be selected by holding the shift key when clicking the row selection checkbox.
-    </p>
-    <p><b>Note:</b> These props supercede the existing <code>enableRowSelect</code> and <code>onRowUpdated</code> props which will be removed in a later release.</p>
-  </div>
+  <div />
 );
 
 export default exampleWrapper({

examples/scripts/example17-grid-events.js

@@ -21,7 +21,10 @@ class Example extends React.Component {
       }
     ];
 
-    this.state = { rows: this.createRows(1000) };
+    this.state = {
+      rows: this.createRows(),
+      selectedRows: new Set()
+    };
   }
 
   createRows = () => {
@@ -30,8 +33,7 @@ class Example extends React.Component {
       rows.push({
         id: i,
         title: `Title ${i}`,
-        count: i * 1000,
-        isSelected: false
+        count: i * 1000
       });
     }
 
@@ -43,24 +45,28 @@ class Example extends React.Component {
   };
 
   onRowClick = (rowIdx, row) => {
-    const rows = this.state.rows.slice();
-    rows[rowIdx] = { ...row, isSelected: !row.isSelected };
-    this.setState({ rows });
+    const newSelectedRows = new Set(this.state.selectedRows);
+    if (newSelectedRows.has(row.id)) {
+      newSelectedRows.delete(row.id);
+    } else {
+      newSelectedRows.add(row.id);
+    }
+    this.onSelectedRowsChange(newSelectedRows);
   };
 
   onKeyDown = (e) => {
     if (e.ctrlKey && e.keyCode === 65) {
       e.preventDefault();
-
-      const rows = [];
-      this.state.rows.forEach((r) => {
-        rows.push({ ...r, isSelected: true });
-      });
-
-      this.setState({ rows });
+      const newSelectedRows = new Set(this.state.selectedRows);
+      this.state.rows.forEach(row => newSelectedRows.add(row.id));
+      this.onSelectedRowsChange(newSelectedRows);
     }
   };
 
+  onSelectedRowsChange = (selectedRows) => {
+    this.setState({ selectedRows });
+  };
+
   render() {
     return (
       <ReactDataGrid
@@ -69,14 +75,10 @@ class Example extends React.Component {
         rowGetter={this.rowGetter}
         rowsCount={this.state.rows.length}
         minHeight={500}
-        rowSelection={{
-          showCheckbox: false,
-          selectBy: {
-            isSelectedKey: 'isSelected'
-          }
-        }}
         onRowClick={this.onRowClick}
         onGridKeyDown={this.onKeyDown}
+        selectedRows={this.state.selectedRows}
+        onSelectedRowsChange={this.onSelectedRowsChange}
       />
     );
   }

examples/scripts/example21-cell-selection-events.js

@@ -31,10 +31,6 @@ class Example extends React.Component {
     return this._rows[index];
   };
 
-  onRowSelect = (rows) => {
-    this.setState({ selectedRows: rows });
-  };
-
   onCellSelected = ({ rowIdx, idx }) => {
     this.grid.openCellEditor(rowIdx, idx);
   };
@@ -55,9 +51,7 @@ class Example extends React.Component {
           columns={this._columns}
           rowGetter={this.rowGetter}
           rowsCount={this._rows.length}
-          enableRowSelect="multi"
           minHeight={500}
-          onRowSelect={this.onRowSelect}
           enableCellSelect
           onCellSelected={this.onCellSelected}
           onCellDeSelected={this.onCellDeSelected}