Update ReactDataGrid API to group cell range event handlers under cel…

…lRangeSelection prop
adazzle · Jul 24, 2018 · 80e49e1 · 80e49e1
1 parent d97094d
commit 80e49e1
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 12 deletions.
diff --git a/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js b/packages/react-data-grid-examples/src/scripts/example30-selection-range-events.js
@@ -74,9 +74,11 @@ class Example extends React.Component {
           rowGetter={this.rowGetter}
           rowsCount={this.state.rows.length}
           minHeight={500}
-          onCellRangeSelectionStarted={this.onStart}
-          onCellRangeSelectionUpdated={this.onUpdate}
-          onCellRangeSelectionCompleted={this.onComplete}
+          cellRangeSelection={{
+            onStart: this.onStart,
+            onUpdate: this.onUpdate,
+            onComplete: this.onComplete
+          }}
         />
       </div>
     );
@@ -85,11 +87,11 @@ class Example extends React.Component {
 
 const exampleDescription = (
   <div>
-    <h4>onCellRangeSelectionStarted</h4>
+    <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>onCellRangeSelectionUpdated</h4>
+    <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>onCellRangeSelectionCompleted</h4>
+    <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>

diff --git a/packages/react-data-grid/src/ReactDataGrid.js b/packages/react-data-grid/src/ReactDataGrid.js
@@ -55,9 +55,11 @@ class ReactDataGrid extends React.Component {
     cellNavigationMode: PropTypes.oneOf(['none', 'loopOverRow', 'changeRow']),
     onCellSelected: PropTypes.func,
     onCellDeSelected: PropTypes.func,
-    onCellRangeSelectionStarted: PropTypes.func,
-    onCellRangeSelectionUpdated: PropTypes.func,
-    onCellRangeSelectionCompleted: PropTypes.func,
+    cellRangeSelection: PropTypes.shape({
+      onStart: PropTypes.func,
+      onUpdate: PropTypes.func,
+      onComplete: PropTypes.func
+    }),
     onCellExpand: PropTypes.func,
     enableDragAndDrop: PropTypes.bool,
     onRowExpandToggle: PropTypes.func,
@@ -709,9 +711,9 @@ class ReactDataGrid extends React.Component {
             onDragHandleDoubleClick={this.onDragHandleDoubleClick}
             onCellSelected={this.props.onCellSelected}
             onCellDeSelected={this.props.onCellDeSelected}
-            onCellRangeSelectionStarted={this.props.onCellRangeSelectionStarted}
-            onCellRangeSelectionUpdated={this.props.onCellRangeSelectionUpdated}
-            onCellRangeSelectionCompleted={this.props.onCellRangeSelectionCompleted}
+            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>