Fix Issue 556 (adazzle#561)

diegomurakami · conor-j-malone · commit 20c478cd2114 · 2017-01-06T13:07:27.000Z
* Fix the bug

* Allow only -1,-1 changes to grid selection

* Add test

* Add check for the parameter -1

* Remove fdescribe
diff --git a/src/Grid.js b/src/Grid.js
@@ -96,6 +96,7 @@ const Grid = React.createClass({
           onSort={this.props.onSort}
           onScroll={this.onHeaderScroll}
           getValidFilterValues={this.props.getValidFilterValues}
+          cellMetaData={this.props.cellMetaData}
           />
           {this.props.rowsCount >= 1 || (this.props.rowsCount === 0 && !this.props.emptyRowsView) ?
             <div ref="viewPortContainer" tabIndex="0" onKeyDown={this.props.onViewportKeydown} onKeyUp={this.props.onViewportKeyup} onDoubleClick={this.props.onViewportDoubleClick}   onDragStart={this.props.onViewportDragStart} onDragEnd={this.props.onViewportDragEnd}>
diff --git a/src/Header.js b/src/Header.js
@@ -8,6 +8,7 @@ const HeaderRow           = require('./HeaderRow');
 const getScrollbarSize  = require('./getScrollbarSize');
 const PropTypes           = React.PropTypes;
 const createObjectWithProperties = require('./createObjectWithProperties');
+const cellMetaDataShape    = require('./PropTypeShapes/CellMetaDataShape');
 
 type Column = {
   width: number
@@ -28,7 +29,8 @@ const Header = React.createClass({
     onColumnResize: PropTypes.func,
     onScroll: PropTypes.func,
     draggableHeaderCell: PropTypes.func,
-    getValidFilterValues: PropTypes.func
+    getValidFilterValues: PropTypes.func,
+    cellMetaData: PropTypes.shape(cellMetaDataShape)
   },
 
   getInitialState(): {resizing: any} {
@@ -182,6 +184,11 @@ const Header = React.createClass({
     return createObjectWithProperties(this.props, knownDivPropertyKeys);
   },
 
+  // Set the cell selection to -1 x -1 when clicking on the header
+  onHeaderClick() {
+    this.props.cellMetaData.onCellClick({rowIdx: -1, idx: -1 });
+  },
+
   render(): ?ReactElement {
     let className = joinClasses({
       'react-grid-Header': true,
@@ -190,7 +197,7 @@ const Header = React.createClass({
     let headerRows = this.getHeaderRows();
 
     return (
-      <div {...this.getKnownDivProps()} style={this.getStyle()} className={className}>
+      <div {...this.getKnownDivProps()} style={this.getStyle()} className={className} onClick={this.onHeaderClick}>
         {headerRows}
       </div>
     );
diff --git a/src/ReactDataGrid.js b/src/ReactDataGrid.js
@@ -189,6 +189,9 @@ const ReactDataGrid = React.createClass({
             this.props.onCellSelected(selected);
           }
         });
+      } else if (selected.rowIdx === -1 && selected.idx === -1) {
+        // When it's outside of the grid, set rowIdx anyway
+        this.setState({selected: { idx, rowIdx }});
       }
     }
   },
diff --git a/src/__tests__/Header.spec.js b/src/__tests__/Header.spec.js
@@ -132,7 +132,16 @@ describe('Header Unit Tests', () => {
       onColumnResize: jasmine.createSpy(),
       onScroll: jasmine.createSpy(),
       draggableHeaderCell: jasmine.createSpy(),
-      getValidFilterValues: jasmine.createSpy()
+      getValidFilterValues: jasmine.createSpy(),
+      cellMetaData: {
+        onCommitCancel: () => {},
+        onCommit: () => {},
+        onCellDoubleClick: () => {},
+        onCellClick: () => { },
+        handleDragEnterRow: () => {},
+        handleTerminateDrag: () => {},
+        selected: { rowIdx: 0, id: 1 }
+      }
     };
     it('passes classname property', () => {
       const wrapper = renderComponent(testAllProps);
@@ -178,5 +187,14 @@ describe('Header Unit Tests', () => {
       expect(headerDiv.props().draggableHeaderCell).toBeUndefined();
       expect(headerDiv.props().getValidFilterValues).toBeUndefined();
     });
+
+    it('execute onCellClick event on cellMetaData and rowIdx & idx = -1', () => {
+      spyOn(testAllProps.cellMetaData, 'onCellClick');
+      const wrapper = renderComponent(testAllProps);
+      const headerDiv = wrapper.find('div');
+      headerDiv.simulate('click');
+      expect(testAllProps.cellMetaData.onCellClick).toHaveBeenCalled();
+      expect(testAllProps.cellMetaData.onCellClick.calls.mostRecent().args[0]).toEqual({ rowIdx: -1, idx: -1 });
+    });
   });
 });

Original file line number	Diff line number	Diff line change
`@@ -189,6 +189,9 @@ const ReactDataGrid = React.createClass({`
`189`	`189`	`this.props.onCellSelected(selected);`
`190`	`190`	`}`
`191`	`191`	`});`
	`192`	`+ } else if (selected.rowIdx === -1 && selected.idx === -1) {`
	`193`	`+ // When it's outside of the grid, set rowIdx anyway`
	`194`	`+ this.setState({selected: { idx, rowIdx }});`
`192`	`195`	`}`
`193`	`196`	`}`
`194`	`197`	`},`