Rectangular selection range support (on top of 'next')

packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js

@@ -0,0 +1,108 @@
+const ReactDataGrid = require('react-data-grid');
+const exampleWrapper = require('../components/exampleWrapper');
+const React = require('react');
+
+class Example extends React.Component {
+  constructor(props, context) {
+    super(props, context);
+    this._columns = [
+      {
+        key: 'id',
+        name: 'ID'
+      },
+      {
+        key: 'title',
+        name: 'Title'
+      },
+      {
+        key: 'count',
+        name: 'Count'
+      }
+    ];
+
+    this.state = { rows: this.createRows(1000) };
+  }
+
+  createRows = () => {
+    let rows = [];
+    for (let i = 1; i < 1000; i++) {
+      rows.push({
+        id: i,
+        title: 'Title ' + i,
+        count: i * 1000,
+        isSelected: false
+      });
+    }
+
+    return rows;
+  };
+
+  rowGetter = (i) => {
+    return this.state.rows[i];
+  };
+
+  onStart = (selectedRange) => {
+    this.textarea.value += 'START: ' +
+      `(${selectedRange.topLeft.idx}, ${selectedRange.topLeft.rowIdx}) -> ` +
+      `(${selectedRange.bottomRight.idx}, ${selectedRange.bottomRight.rowIdx})\n`;
+    this.textarea.scrollTop = this.textarea.scrollHeight;
+  };
+
+  onUpdate = (selectedRange) => {
+    this.textarea.value += 'UPDATE: ' +
+      `(${selectedRange.topLeft.idx}, ${selectedRange.topLeft.rowIdx}) -> ` +
+      `(${selectedRange.bottomRight.idx}, ${selectedRange.bottomRight.rowIdx})\n`;
+    this.textarea.scrollTop = this.textarea.scrollHeight;
+  };
+
+  onComplete = () => {
+    this.textarea.value += 'END\n';
+    this.textarea.scrollTop = this.textarea.scrollHeight;
+  };
+
+  render() {
+    return  (
+      <div>
+        <textarea
+          ref={(element) => this.textarea = element}
+          style={{width: '100%', marginBottom: '1em', padding: '0.5em', border: '1px solid black' }}
+          rows={5}
+        />
+        <ReactDataGrid
+          rowKey="id"
+          columns={this._columns}
+          rowGetter={this.rowGetter}
+          rowsCount={this.state.rows.length}
+          minHeight={500}
+          cellRangeSelection={{
+            onStart: this.onStart,
+            onUpdate: this.onUpdate,
+            onComplete: this.onComplete
+          }}
+        />
+      </div>
+    );
+  }
+}
+
+const exampleDescription = (
+  <div>
+    <h4>cellRangeSelection.onStart</h4>
+    <p>Called on mousedown on a cell. Receives <code>selectedRange</code> (containing <code>topLeft</code> and <code>topRight</code>) as an argument.</p>
+    <h4>cellRangeSelection.onUpdate</h4>
+    <p>Called on mouseover on a cell when dragging with the mouse, or when pressing shift+arrowkey. Receives <code>selectedRange</code> (containing <code>topLeft</code> and <code>topRight</code>) as an argument.</p>
+    <h4>cellRangeSelection.onComplete</h4>
+    <p>Called on mouseup (anywhere) when dragging with the mouse, or when pressing shift+arrowkey.</p>
+    <p>Note: altering the selected range with shift+arrowkey will fire both an Updated and Completed event with each keystroke.</p>
+    <h4>Example</h4>
+    <p>The example below uses these events to record a log of selection range activity (via both cursor and keyboard) into the textarea.</p>
+  </div>
+);
+
+module.exports = exampleWrapper({
+  WrappedComponent: Example,
+  exampleName: 'Selection Range Events',
+  exampleDescription,
+  examplePath: './scripts/example30-selection-range-events.js'
+  // TODO: add examplePlaygroundLink (once selection ranges are supported in the published version of RDG, so available in JSFiddle)
+});

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

@@ -72,6 +72,9 @@ class Canvas extends React.Component {
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCommit: PropTypes.func.isRequired
   };
 
@@ -380,6 +383,9 @@ class Canvas extends React.Component {
             onBeforeFocus={this.onFocusInteractionMask}
             onCellSelected={this.props.onCellSelected}
             onCellDeSelected={this.props.onCellDeSelected}
+            onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+            onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+            onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
             scrollLeft={this._scroll.scrollLeft}
           />
           <RowsContainer

packages/react-data-grid/src/Cell.js

@@ -73,6 +73,20 @@ class Cell extends React.Component {
     }
   };
 
+  onCellMouseDown = () => {
+    const { idx, rowIdx, cellMetaData } = this.props;
+    if (isFunction(cellMetaData.onCellMouseDown)) {
+      cellMetaData.onCellMouseDown({ idx, rowIdx });
+    }
+  };
+
+  onCellMouseEnter = () => {
+    const { idx, rowIdx, cellMetaData } = this.props;
+    if (isFunction(cellMetaData.onCellMouseEnter)) {
+      cellMetaData.onCellMouseEnter({ idx, rowIdx });
+    }
+  };
+
   onCellContextMenu = () => {
     const { idx, rowIdx, cellMetaData } = this.props;
     if (isFunction(cellMetaData.onCellContextMenu)) {
@@ -226,6 +240,8 @@ class Cell extends React.Component {
     let onColumnEvent = this.props.cellMetaData ? this.props.cellMetaData.onColumnEvent : undefined;
     let gridEvents = {
       onClick: this.onCellClick,
+      onMouseDown: this.onCellMouseDown,
+      onMouseEnter: this.onCellMouseEnter,
       onDoubleClick: this.onCellDoubleClick,
       onContextMenu: this.onCellContextMenu,
       onDragOver: this.onDragOver

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

@@ -64,6 +64,9 @@ class Grid extends React.Component {
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCommit: PropTypes.func.isRequired
   };
 
@@ -196,6 +199,9 @@ class Grid extends React.Component {
                   onDragHandleDoubleClick={this.props.onDragHandleDoubleClick}
                   onCellSelected={this.props.onCellSelected}
                   onCellDeSelected={this.props.onCellDeSelected}
+                  onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+                  onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+                  onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
                   onCommit={this.props.onCommit}
                 />
             </div>

packages/react-data-grid/src/PropTypeShapes/CellMetaDataShape.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 module.exports = {
   rowKey: PropTypes.string.isRequired,
   onCellClick: PropTypes.func.isRequired,
+  onCellMouseDown: PropTypes.func.isRequired,
+  onCellMouseEnter: PropTypes.func.isRequired,
   onCellContextMenu: PropTypes.func.isRequired,
   onCellDoubleClick: PropTypes.func.isRequired,
   onDragEnter: PropTypes.func.isRequired,

packages/react-data-grid/src/ReactDataGrid.js

@@ -55,6 +55,11 @@ class ReactDataGrid extends React.Component {
     cellNavigationMode: PropTypes.oneOf(['none', 'loopOverRow', 'changeRow']),
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    cellRangeSelection: PropTypes.shape({
+      onStart: PropTypes.func,
+      onUpdate: PropTypes.func,
+      onComplete: PropTypes.func
+    }),
     onCellExpand: PropTypes.func,
     enableDragAndDrop: PropTypes.bool,
     onRowExpandToggle: PropTypes.func,
@@ -137,12 +142,14 @@ class ReactDataGrid extends React.Component {
   componentDidMount() {
     this._mounted = true;
     window.addEventListener('resize', this.metricsUpdated);
+    window.addEventListener('mouseup', this.onWindowMouseUp);
     this.metricsUpdated();
   }
 
   componentWillUnmount() {
     this._mounted = false;
     window.removeEventListener('resize', this.metricsUpdated);
+    window.removeEventListener('mouseup', this.onWindowMouseUp);
   }
 
   componentWillReceiveProps(nextProps) {
@@ -159,6 +166,18 @@ class ReactDataGrid extends React.Component {
     this.eventBus.dispatch(EventTypes.SELECT_CELL, { rowIdx, idx }, openEditor);
   };
 
+  selectStart = (cellPosition) => {
+    this.eventBus.dispatch(EventTypes.SELECT_START, cellPosition);
+  };
+
+  selectUpdate = (cellPosition) => {
+    this.eventBus.dispatch(EventTypes.SELECT_UPDATE, cellPosition);
+  };
+
+  selectEnd = () => {
+    this.eventBus.dispatch(EventTypes.SELECT_END);
+  };
+
   handleDragEnter = ({ overRowIdx }) => {
     this.eventBus.dispatch(EventTypes.DRAG_ENTER, { overRowIdx });
   };
@@ -275,6 +294,18 @@ class ReactDataGrid extends React.Component {
     }
   };
 
+  onCellMouseDown = (cellPosition) => {
+    this.selectStart(cellPosition);
+  };
+
+  onCellMouseEnter = (cellPosition) => {
+    this.selectUpdate(cellPosition);
+  };
+
+  onWindowMouseUp = () => {
+    this.selectEnd();
+  };
+
   onCellContextMenu = ({ rowIdx, idx }) => {
     this.selectCell({ rowIdx, idx });
   };
@@ -613,6 +644,8 @@ class ReactDataGrid extends React.Component {
     const cellMetaData = {
       rowKey: this.props.rowKey,
       onCellClick: this.onCellClick,
+      onCellMouseDown: this.onCellMouseDown,
+      onCellMouseEnter: this.onCellMouseEnter,
       onCellContextMenu: this.onCellContextMenu,
       onCellDoubleClick: this.onCellDoubleClick,
       onColumnEvent: this.onColumnEvent,
@@ -678,6 +711,9 @@ class ReactDataGrid extends React.Component {
             onDragHandleDoubleClick={this.onDragHandleDoubleClick}
             onCellSelected={this.props.onCellSelected}
             onCellDeSelected={this.props.onCellDeSelected}
+            onCellRangeSelectionStarted={this.props.cellRangeSelection && this.props.cellRangeSelection.onStart}
+            onCellRangeSelectionUpdated={this.props.cellRangeSelection && this.props.cellRangeSelection.onUpdate}
+            onCellRangeSelectionCompleted={this.props.cellRangeSelection && this.props.cellRangeSelection.onComplete}
             onCommit={this.onCommit}
           />
         </div>

packages/react-data-grid/src/Viewport.js

@@ -55,6 +55,9 @@ class Viewport extends React.Component {
     onDragHandleDoubleClick: PropTypes.func.isRequired,
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
+    onCellRangeSelectionStarted: PropTypes.func,
+    onCellRangeSelectionUpdated: PropTypes.func,
+    onCellRangeSelectionCompleted: PropTypes.func,
     onCommit: PropTypes.func.isRequired
   };
 
@@ -258,6 +261,9 @@ class Viewport extends React.Component {
           onDragHandleDoubleClick={this.props.onDragHandleDoubleClick}
           onCellSelected={this.props.onCellSelected}
           onCellDeSelected={this.props.onCellDeSelected}
+          onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
+          onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
+          onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
           onCommit={this.props.onCommit}
         />
       </div>

packages/react-data-grid/src/constants/EventTypes.js

@@ -1,3 +1,6 @@
 export const SELECT_CELL = 'SELECT_CELL';
+export const SELECT_START = 'SELECT_START';
+export const SELECT_UPDATE = 'SELECT_UPDATE';
+export const SELECT_END = 'SELECT_END';
 export const DRAG_ENTER = 'DRAG_ENTER';
 export const SCROLL_TO_COLUMN = 'SCROLL_TO_COLUMN';