Re-implement row selection

.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/scripts/example16-row-select.js

@@ -29,27 +29,21 @@ 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) });
-  };
-
   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}
@@ -59,10 +53,9 @@ class Example extends React.Component {
           rowSelection={{
             showCheckbox: true,
             enableShiftSelect: true,
-            onRowsSelected: this.onRowsSelected,
-            onRowsDeselected: this.onRowsDeselected,
-            selectBy: {
-              indexes: this.state.selectedIndexes
+            selectedRows: this.state.selectedRows,
+            onSelectedRowsChange: (selectedRows) => {
+              this.setState({ selectedRows });
             }
           }}
         />

package.json

@@ -36,7 +36,7 @@
     "enzyme": "^3.10.0",
     "enzyme-adapter-react-16": "^1.14.0",
     "eslint": "^6.5.1",
-    "eslint-plugin-react": "^7.15.0",
+    "eslint-plugin-react": "^7.15.1",
     "eslint-plugin-react-hooks": "^2.1.1",
     "eslint-plugin-sonarjs": "^0.4.0",
     "faker": "^4.1.0",

packages/react-data-grid-addons/src/editors/index.ts

@@ -1,2 +1,2 @@
-export { SimpleTextEditor, CheckboxEditor } from 'react-data-grid';
+export { SimpleTextEditor } from 'react-data-grid';
 export { default as DropDownEditor } from './DropDownEditor';

packages/react-data-grid/src/Canvas.tsx

@@ -5,7 +5,6 @@ import Row from './Row';
 import RowsContainerDefault from './RowsContainer';
 import RowGroup from './RowGroup';
 import { InteractionMasks } from './masks';
-import * as rowUtils from './RowUtils';
 import { getColumnScrollPosition, isPositionStickySupported } from './utils';
 import { EventTypes } from './common/enums';
 import { CalculatedColumn, Position, ScrollPosition, SubRowDetails, RowRenderer, RowRendererProps, RowData } from './common/types';
@@ -22,7 +21,6 @@ type SharedViewportProps<R> = Pick<ViewportProps<R>,
 | 'rowHeight'
 | 'scrollToRowIndex'
 | 'contextMenu'
-| 'rowSelection'
 | 'getSubRowDetails'
 | 'rowGroupRenderer'
 | 'enableCellSelect'
@@ -146,23 +144,8 @@ export default class Canvas<R> extends React.PureComponent<CanvasProps<R>> {
     return scrollVariation > 0 ? rowHeight - scrollVariation : 0;
   }
 
-  isRowSelected(idx: number, row: R) {
-    // Use selectedRows if set
-    if (this.props.selectedRows) {
-      const selectedRow = this.props.selectedRows.find(r => {
-        const rowKeyValue = rowUtils.get(row, this.props.rowKey);
-        return r[this.props.rowKey] === rowKeyValue;
-      });
-      return !!(selectedRow && selectedRow.isSelected);
-    }
-
-    // Else use new rowSelection props
-    if (this.props.rowSelection) {
-      const { keys, indexes, isSelectedKey } = this.props.rowSelection as { [key: string]: unknown };
-      return rowUtils.isRowSelected(keys as { rowKey?: string; values?: string[] } | null, indexes as number[] | null, isSelectedKey as string | null, row, idx);
-    }
-
-    return false;
+  isRowSelected(row: R): boolean {
+    return this.props.selectedRows !== undefined && this.props.selectedRows.has(row[this.props.rowKey]);
   }
 
   setScrollLeft(scrollLeft: number) {
@@ -286,7 +269,7 @@ export default class Canvas<R> extends React.PureComponent<CanvasProps<R>> {
           row,
           height: rowHeight,
           columns,
-          isSelected: this.isRowSelected(rowIdx, row),
+          isSelected: this.isRowSelected(row),
           cellMetaData,
           subRowDetails,
           colVisibleStartIdx,

packages/react-data-grid/src/Grid.tsx

@@ -3,7 +3,7 @@ import { isValidElementType } from 'react-is';
 
 import Header, { HeaderHandle, HeaderProps } from './Header';
 import Viewport, { ScrollState } from './Viewport';
-import { HeaderRowData, CellMetaData, RowSelection, InteractionMasksMetaData, SelectedRow, ColumnMetrics } from './common/types';
+import { HeaderRowData, CellMetaData, InteractionMasksMetaData, ColumnMetrics } from './common/types';
 import { DEFINE_SORT } from './common/enums';
 import { ReactDataGridProps } from './ReactDataGrid';
 import { EventBus } from './masks';
@@ -42,8 +42,7 @@ type SharedDataGridProps<R> = Pick<ReactDataGridProps<R>,
 export interface GridProps<R> extends SharedDataGridProps<R> {
   headerRows: [HeaderRowData<R>, HeaderRowData<R> | undefined];
   cellMetaData: CellMetaData<R>;
-  selectedRows?: SelectedRow<R>[];
-  rowSelection?: RowSelection;
+  selectedRows?: ReadonlySet<R[keyof R]>;
   rowOffsetHeight: number;
   eventBus: EventBus;
   interactionMasksMetaData: InteractionMasksMetaData<R>;
@@ -107,7 +106,6 @@ export default function Grid<R>({ emptyRowsView, headerRows, viewportWidth, ...p
           minHeight={props.minHeight}
           scrollToRowIndex={props.scrollToRowIndex}
           contextMenu={props.contextMenu}
-          rowSelection={props.rowSelection}
           getSubRowDetails={props.getSubRowDetails}
           rowGroupRenderer={props.rowGroupRenderer}
           enableCellSelect={props.enableCellSelect}