refactor(react-grid): standardize draft change actions in TableColumn…

…Resizing (#665) BREAKING CHANGES: The `changeDraftTableColumnWidth` action has been renamed to `draftTableColumnWidth`. The functionality that resets draft column width has been moved from from the `draftTableColumnWidth` action into the separate `cancelTableColumnWidthDraft` action. The `onDraftWidthChange` event of the TableHeaderRow's cellComponent has been renamed to `onWidthDraft`. The functionality that cancels draft width changes has been extracted to the `onWidthDraftCancel` event.
DevExpress · Jan 16, 2018 · 3fec37a · 3fec37a
1 parent a3974bd
commit 3fec37a
Show file tree

Hide file tree

Showing 16 changed files with 182 additions and 117 deletions.
diff --git a/packages/dx-grid-core/src/plugins/table-column-resizing/reducers.js b/packages/dx-grid-core/src/plugins/table-column-resizing/reducers.js
@@ -9,22 +9,20 @@ export const changeTableColumnWidth = (state, { columnName, shift }) => {
   nextColumnWidth.splice(index, 1, { columnName, width: size });
 
   return {
-    ...state,
     columnWidths: nextColumnWidth,
-    draftColumnWidths: [],
   };
 };
 
-export const changeDraftTableColumnWidth = (state, { columnName, shift }) => {
+export const draftTableColumnWidth = (state, { columnName, shift }) => {
   const { columnWidths } = state;
   const updatedColumn = columnWidths.find(elem => elem.columnName === columnName);
-  if (!shift) {
-    return { ...state, draftColumnWidths: [] };
-  }
   const size = Math.max(MIN_SIZE, updatedColumn.width + shift);
 
   return {
-    ...state,
     draftColumnWidths: [{ columnName: updatedColumn.columnName, width: size }],
   };
 };
+
+export const cancelTableColumnWidthDraft = () => ({
+  draftColumnWidths: [],
+});
diff --git a/packages/dx-grid-core/src/plugins/table-column-resizing/reducers.test.js b/packages/dx-grid-core/src/plugins/table-column-resizing/reducers.test.js
@@ -1,6 +1,7 @@
 import {
   changeTableColumnWidth,
-  changeDraftTableColumnWidth,
+  draftTableColumnWidth,
+  cancelTableColumnWidthDraft,
 } from './reducers';
 
 describe('TableColumnResizing Plugin reducers', () => {
@@ -13,47 +14,30 @@ describe('TableColumnResizing Plugin reducers', () => {
       expect(changeTableColumnWidth(state, { columnName: 'a', shift: 5 }))
         .toEqual({
           columnWidths: [{ columnName: 'a', width: 45 }, { columnName: 'b', width: 60 }],
-          draftColumnWidths: [],
-        });
-    });
-
-    it('should work with existing draft', () => {
-      const state = {
-        columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
-        draftColumnWidths: [{ columnName: 'a', width: 45 }],
-      };
-
-      expect(changeTableColumnWidth(state, { columnName: 'a', shift: 5 }))
-        .toEqual({
-          columnWidths: [{ columnName: 'a', width: 45 }, { columnName: 'b', width: 60 }],
-          draftColumnWidths: [],
         });
     });
 
     it('should stick size to the min', () => {
       const state = {
         columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
-        draftColumnWidths: [{ columnName: 'a', width: 45 }],
       };
 
       expect(changeTableColumnWidth(state, { columnName: 'b', shift: -25 }))
         .toEqual({
           columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 40 }],
-          draftColumnWidths: [],
         });
     });
   });
 
-  describe('#changeDraftTableColumnWidth', () => {
+  describe('#draftTableColumnWidth', () => {
     it('should work', () => {
       const state = {
         columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
         draftColumnWidths: [],
       };
 
-      expect(changeDraftTableColumnWidth(state, { columnName: 'a', shift: 5 }))
+      expect(draftTableColumnWidth(state, { columnName: 'a', shift: 5 }))
         .toEqual({
-          columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
           draftColumnWidths: [{ columnName: 'a', width: 45 }],
         });
     });
@@ -64,22 +48,17 @@ describe('TableColumnResizing Plugin reducers', () => {
         draftColumnWidths: [],
       };
 
-      expect(changeDraftTableColumnWidth(state, { columnName: 'b', shift: -25 }))
+      expect(draftTableColumnWidth(state, { columnName: 'b', shift: -25 }))
         .toEqual({
-          columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
           draftColumnWidths: [{ columnName: 'b', width: 40 }],
         });
     });
+  });
 
-    it('should reset size when null passed', () => {
-      const state = {
-        columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
-        draftColumnWidths: [{ columnName: 'b', width: 45 }],
-      };
-
-      expect(changeDraftTableColumnWidth(state, { columnName: 'b', shift: null }))
+  describe('#cancelTableColumnWidthDraft', () => {
+    it('should work', () => {
+      expect(cancelTableColumnWidthDraft())
         .toEqual({
-          columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
           draftColumnWidths: [],
         });
     });

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.jsx
@@ -42,7 +42,7 @@ export class TableHeaderCell extends React.PureComponent {
       showSortingControls, sortingDirection,
       showGroupingControls, onGroup,
       draggingEnabled,
-      resizingEnabled, onWidthChange, onDraftWidthChange,
+      resizingEnabled, onWidthChange, onWidthDraft, onWidthDraftCancel,
       tableRow, getMessage, onSort,
       ...restProps
     } = this.props;
@@ -99,7 +99,8 @@ export class TableHeaderCell extends React.PureComponent {
         {resizingEnabled && (
           <ResizingControl
             onWidthChange={onWidthChange}
-            onDraftWidthChange={onDraftWidthChange}
+            onWidthDraft={onWidthDraft}
+            onWidthDraftCancel={onWidthDraftCancel}
           />
         )}
       </th>
@@ -131,7 +132,8 @@ TableHeaderCell.propTypes = {
   draggingEnabled: PropTypes.bool,
   resizingEnabled: PropTypes.bool,
   onWidthChange: PropTypes.func,
-  onDraftWidthChange: PropTypes.func,
+  onWidthDraft: PropTypes.func,
+  onWidthDraftCancel: PropTypes.func,
   getMessage: PropTypes.func,
 };
 
@@ -148,6 +150,7 @@ TableHeaderCell.defaultProps = {
   draggingEnabled: false,
   resizingEnabled: false,
   onWidthChange: undefined,
-  onDraftWidthChange: undefined,
+  onWidthDraft: undefined,
+  onWidthDraftCancel: undefined,
   getMessage: undefined,
 };
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.test.jsx
@@ -127,22 +127,27 @@ describe('TableHeaderCell', () => {
 
   it('should render resize control if resizing is allowed', () => {
     const onWidthChange = () => {};
-    const onDraftWidthChange = () => {};
+    const onWidthDraft = () => {};
+    const onWidthDraftCancel = () => {};
+
     const tree = shallow((
       <TableHeaderCell
         column={{}}
         resizingEnabled
-        onDraftWidthChange={onDraftWidthChange}
         onWidthChange={onWidthChange}
+        onWidthDraft={onWidthDraft}
+        onWidthDraftCancel={onWidthDraftCancel}
       />
     ));
 
     expect(tree.find(ResizingControl).exists())
       .toBeTruthy();
-    expect(tree.find(ResizingControl).prop('onDraftWidthChange'))
-      .toBe(onDraftWidthChange);
     expect(tree.find(ResizingControl).prop('onWidthChange'))
       .toBe(onWidthChange);
+    expect(tree.find(ResizingControl).prop('onWidthDraft'))
+      .toBe(onWidthDraft);
+    expect(tree.find(ResizingControl).prop('onWidthDraftCancel'))
+      .toBe(onWidthDraftCancel);
   });
 
   it('should have correct styles when grouping by click is not allowed and column align is left', () => {

diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell/resizing-control.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell/resizing-control.jsx
@@ -50,11 +50,12 @@ export class ResizingControl extends React.PureComponent {
       this.setState({ resizing: true });
     };
     this.onResizeUpdate = ({ x }) => {
-      const { onDraftWidthChange } = this.props;
-      onDraftWidthChange({ shift: x - this.resizeStartingX });
+      const { onWidthDraft } = this.props;
+      onWidthDraft({ shift: x - this.resizeStartingX });
     };
     this.onResizeEnd = ({ x }) => {
-      const { onWidthChange } = this.props;
+      const { onWidthChange, onWidthDraftCancel } = this.props;
+      onWidthDraftCancel();
       onWidthChange({ shift: x - this.resizeStartingX });
       this.setState({ resizing: false });
     };
@@ -92,5 +93,6 @@ export class ResizingControl extends React.PureComponent {
 
 ResizingControl.propTypes = {
   onWidthChange: PropTypes.func.isRequired,
-  onDraftWidthChange: PropTypes.func.isRequired,
+  onWidthDraft: PropTypes.func.isRequired,
+  onWidthDraftCancel: PropTypes.func.isRequired,
 };
diff --git a/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell/resizing-control.test.jsx b/packages/dx-react-grid-bootstrap3/src/templates/table-header-cell/resizing-control.test.jsx
@@ -1,9 +1,15 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { shallow } from 'enzyme';
 import { setupConsole } from '@devexpress/dx-testing';
 import { Draggable } from '@devexpress/dx-react-core';
 import { ResizingControl } from './resizing-control';
 
+const defaultProps = {
+  onWidthChange: () => {},
+  onWidthDraft: () => {},
+  onWidthDraftCancel: () => {},
+};
+
 describe('ResizingControl', () => {
   let resetConsole;
   beforeAll(() => {
@@ -15,33 +21,37 @@ describe('ResizingControl', () => {
 
   it('should trigger onWidthChange with correct change on resize end', () => {
     const onWidthChange = jest.fn();
-    const tree = mount((
+    const onWidthDraftCancel = jest.fn();
+    const tree = shallow((
       <ResizingControl
-        onDraftWidthChange={() => {}}
+        {...defaultProps}
         onWidthChange={onWidthChange}
+        onWidthDraftCancel={onWidthDraftCancel}
       />
     ));
 
     tree.find(Draggable).prop('onStart')({ x: 0 });
 
     tree.find(Draggable).prop('onEnd')({ x: 10 });
+    expect(onWidthDraftCancel)
+      .toBeCalled();
     expect(onWidthChange)
       .toBeCalledWith({ shift: 10 });
   });
 
-  it('should trigger onDraftWidthChange with correct change on resize update', () => {
-    const onDraftWidthChange = jest.fn();
-    const tree = mount((
+  it('should trigger onWidthDraft with correct change on resize update', () => {
+    const onWidthDraft = jest.fn();
+    const tree = shallow((
       <ResizingControl
-        onDraftWidthChange={onDraftWidthChange}
-        onWidthChange={() => {}}
+        {...defaultProps}
+        onWidthDraft={onWidthDraft}
       />
     ));
 
     tree.find(Draggable).prop('onStart')({ x: 0 });
 
     tree.find(Draggable).prop('onUpdate')({ x: 10 });
-    expect(onDraftWidthChange)
+    expect(onWidthDraft)
       .toBeCalledWith({ shift: 10 });
   });
 });
diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx
@@ -79,7 +79,7 @@ class TableHeaderCellBase extends React.PureComponent {
       showSortingControls, sortingDirection,
       showGroupingControls, onGroup,
       draggingEnabled,
-      resizingEnabled, onWidthChange, onDraftWidthChange,
+      resizingEnabled, onWidthChange, onWidthDraft, onWidthDraftCancel,
       classes, getMessage, tableRow, className, onSort,
       ...restProps
     } = this.props;
@@ -124,7 +124,8 @@ class TableHeaderCellBase extends React.PureComponent {
         {resizingEnabled && (
           <ResizingControl
             onWidthChange={onWidthChange}
-            onDraftWidthChange={onDraftWidthChange}
+            onWidthDraft={onWidthDraft}
+            onWidthDraftCancel={onWidthDraftCancel}
           />
         )}
       </TableCell>
@@ -156,7 +157,8 @@ TableHeaderCellBase.propTypes = {
   draggingEnabled: PropTypes.bool,
   resizingEnabled: PropTypes.bool,
   onWidthChange: PropTypes.func,
-  onDraftWidthChange: PropTypes.func,
+  onWidthDraft: PropTypes.func,
+  onWidthDraftCancel: PropTypes.func,
   classes: PropTypes.object.isRequired,
   getMessage: PropTypes.func.isRequired,
   className: PropTypes.string,
@@ -175,7 +177,8 @@ TableHeaderCellBase.defaultProps = {
   draggingEnabled: false,
   resizingEnabled: false,
   onWidthChange: undefined,
-  onDraftWidthChange: undefined,
+  onWidthDraft: undefined,
+  onWidthDraftCancel: undefined,
   className: undefined,
 };
 

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx
@@ -125,22 +125,26 @@ describe('TableHeaderCell', () => {
 
   it('should render resize control if resize allowed', () => {
     const onWidthChange = () => {};
-    const onDraftWidthChange = () => {};
+    const onWidthDraft = () => {};
+    const onWidthDraftCancel = () => {};
     const tree = shallow((
       <TableHeaderCell
         {...defaultProps}
         resizingEnabled
-        onDraftWidthChange={onDraftWidthChange}
         onWidthChange={onWidthChange}
+        onWidthDraft={onWidthDraft}
+        onWidthDraftCancel={onWidthDraftCancel}
       />
     ));
 
     expect(tree.find(ResizingControl).exists())
       .toBeTruthy();
-    expect(tree.find(ResizingControl).prop('onDraftWidthChange'))
-      .toBe(onDraftWidthChange);
     expect(tree.find(ResizingControl).prop('onWidthChange'))
       .toBe(onWidthChange);
+    expect(tree.find(ResizingControl).prop('onWidthDraft'))
+      .toBe(onWidthDraft);
+    expect(tree.find(ResizingControl).prop('onWidthDraftCancel'))
+      .toBe(onWidthDraftCancel);
   });
 
   it('should pass correct text to SortingControl', () => {

diff --git a/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx b/packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx
@@ -66,11 +66,12 @@ export class ResizingControlBase extends React.PureComponent {
       this.setState({ resizing: true });
     };
     this.onResizeUpdate = ({ x }) => {
-      const { onDraftWidthChange } = this.props;
-      onDraftWidthChange({ shift: x - this.resizeStartingX });
+      const { onWidthDraft } = this.props;
+      onWidthDraft({ shift: x - this.resizeStartingX });
     };
     this.onResizeEnd = ({ x }) => {
-      const { onWidthChange } = this.props;
+      const { onWidthChange, onWidthDraftCancel } = this.props;
+      onWidthDraftCancel();
       onWidthChange({ shift: x - this.resizeStartingX });
       this.setState({ resizing: false });
     };
@@ -111,7 +112,8 @@ export class ResizingControlBase extends React.PureComponent {
 
 ResizingControlBase.propTypes = {
   onWidthChange: PropTypes.func.isRequired,
-  onDraftWidthChange: PropTypes.func.isRequired,
+  onWidthDraft: PropTypes.func.isRequired,
+  onWidthDraftCancel: PropTypes.func.isRequired,
   classes: PropTypes.object.isRequired,
 };