Skip to content

Commit 3fec37a

Browse files
kvetkvet
authored
refactor(react-grid): standardize draft change actions in TableColumnResizing (#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.
1 parent a3974bd commit 3fec37a

File tree

16 files changed

+182
-117
lines changed

16 files changed

+182
-117
lines changed

‎packages/dx-grid-core/src/plugins/table-column-resizing/reducers.js

Lines changed: 5 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -9,22 +9,20 @@ export const changeTableColumnWidth = (state, { columnName, shift }) => {
99
nextColumnWidth.splice(index, 1, { columnName, width: size });
1010

1111
return {
12-
...state,
1312
columnWidths: nextColumnWidth,
14-
draftColumnWidths: [],
1513
};
1614
};
1715

18-
export const changeDraftTableColumnWidth = (state, { columnName, shift }) => {
16+
export const draftTableColumnWidth = (state, { columnName, shift }) => {
1917
const { columnWidths } = state;
2018
const updatedColumn = columnWidths.find(elem => elem.columnName === columnName);
21-
if (!shift) {
22-
return { ...state, draftColumnWidths: [] };
23-
}
2419
const size = Math.max(MIN_SIZE, updatedColumn.width + shift);
2520

2621
return {
27-
...state,
2822
draftColumnWidths: [{ columnName: updatedColumn.columnName, width: size }],
2923
};
3024
};
25+
26+
export const cancelTableColumnWidthDraft = () => ({
27+
draftColumnWidths: [],
28+
});

‎packages/dx-grid-core/src/plugins/table-column-resizing/reducers.test.js

Lines changed: 9 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import {
22
changeTableColumnWidth,
3-
changeDraftTableColumnWidth,
3+
draftTableColumnWidth,
4+
cancelTableColumnWidthDraft,
45
} from './reducers';
56

67
describe('TableColumnResizing Plugin reducers', () => {
@@ -13,47 +14,30 @@ describe('TableColumnResizing Plugin reducers', () => {
1314
expect(changeTableColumnWidth(state, { columnName: 'a', shift: 5 }))
1415
.toEqual({
1516
columnWidths: [{ columnName: 'a', width: 45 }, { columnName: 'b', width: 60 }],
16-
draftColumnWidths: [],
17-
});
18-
});
19-
20-
it('should work with existing draft', () => {
21-
const state = {
22-
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
23-
draftColumnWidths: [{ columnName: 'a', width: 45 }],
24-
};
25-
26-
expect(changeTableColumnWidth(state, { columnName: 'a', shift: 5 }))
27-
.toEqual({
28-
columnWidths: [{ columnName: 'a', width: 45 }, { columnName: 'b', width: 60 }],
29-
draftColumnWidths: [],
3017
});
3118
});
3219

3320
it('should stick size to the min', () => {
3421
const state = {
3522
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
36-
draftColumnWidths: [{ columnName: 'a', width: 45 }],
3723
};
3824

3925
expect(changeTableColumnWidth(state, { columnName: 'b', shift: -25 }))
4026
.toEqual({
4127
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 40 }],
42-
draftColumnWidths: [],
4328
});
4429
});
4530
});
4631

47-
describe('#changeDraftTableColumnWidth', () => {
32+
describe('#draftTableColumnWidth', () => {
4833
it('should work', () => {
4934
const state = {
5035
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
5136
draftColumnWidths: [],
5237
};
5338

54-
expect(changeDraftTableColumnWidth(state, { columnName: 'a', shift: 5 }))
39+
expect(draftTableColumnWidth(state, { columnName: 'a', shift: 5 }))
5540
.toEqual({
56-
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
5741
draftColumnWidths: [{ columnName: 'a', width: 45 }],
5842
});
5943
});
@@ -64,22 +48,17 @@ describe('TableColumnResizing Plugin reducers', () => {
6448
draftColumnWidths: [],
6549
};
6650

67-
expect(changeDraftTableColumnWidth(state, { columnName: 'b', shift: -25 }))
51+
expect(draftTableColumnWidth(state, { columnName: 'b', shift: -25 }))
6852
.toEqual({
69-
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
7053
draftColumnWidths: [{ columnName: 'b', width: 40 }],
7154
});
7255
});
56+
});
7357

74-
it('should reset size when null passed', () => {
75-
const state = {
76-
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
77-
draftColumnWidths: [{ columnName: 'b', width: 45 }],
78-
};
79-
80-
expect(changeDraftTableColumnWidth(state, { columnName: 'b', shift: null }))
58+
describe('#cancelTableColumnWidthDraft', () => {
59+
it('should work', () => {
60+
expect(cancelTableColumnWidthDraft())
8161
.toEqual({
82-
columnWidths: [{ columnName: 'a', width: 40 }, { columnName: 'b', width: 60 }],
8362
draftColumnWidths: [],
8463
});
8564
});

‎packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.jsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export class TableHeaderCell extends React.PureComponent {
4242
showSortingControls, sortingDirection,
4343
showGroupingControls, onGroup,
4444
draggingEnabled,
45-
resizingEnabled, onWidthChange, onDraftWidthChange,
45+
resizingEnabled, onWidthChange, onWidthDraft, onWidthDraftCancel,
4646
tableRow, getMessage, onSort,
4747
...restProps
4848
} = this.props;
@@ -99,7 +99,8 @@ export class TableHeaderCell extends React.PureComponent {
9999
{resizingEnabled && (
100100
<ResizingControl
101101
onWidthChange={onWidthChange}
102-
onDraftWidthChange={onDraftWidthChange}
102+
onWidthDraft={onWidthDraft}
103+
onWidthDraftCancel={onWidthDraftCancel}
103104
/>
104105
)}
105106
</th>
@@ -131,7 +132,8 @@ TableHeaderCell.propTypes = {
131132
draggingEnabled: PropTypes.bool,
132133
resizingEnabled: PropTypes.bool,
133134
onWidthChange: PropTypes.func,
134-
onDraftWidthChange: PropTypes.func,
135+
onWidthDraft: PropTypes.func,
136+
onWidthDraftCancel: PropTypes.func,
135137
getMessage: PropTypes.func,
136138
};
137139

@@ -148,6 +150,7 @@ TableHeaderCell.defaultProps = {
148150
draggingEnabled: false,
149151
resizingEnabled: false,
150152
onWidthChange: undefined,
151-
onDraftWidthChange: undefined,
153+
onWidthDraft: undefined,
154+
onWidthDraftCancel: undefined,
152155
getMessage: undefined,
153156
};

‎packages/dx-react-grid-bootstrap3/src/templates/table-header-cell.test.jsx

Lines changed: 9 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -127,22 +127,27 @@ describe('TableHeaderCell', () => {
127127

128128
it('should render resize control if resizing is allowed', () => {
129129
const onWidthChange = () => {};
130-
const onDraftWidthChange = () => {};
130+
const onWidthDraft = () => {};
131+
const onWidthDraftCancel = () => {};
132+
131133
const tree = shallow((
132134
<TableHeaderCell
133135
column={{}}
134136
resizingEnabled
135-
onDraftWidthChange={onDraftWidthChange}
136137
onWidthChange={onWidthChange}
138+
onWidthDraft={onWidthDraft}
139+
onWidthDraftCancel={onWidthDraftCancel}
137140
/>
138141
));
139142

140143
expect(tree.find(ResizingControl).exists())
141144
.toBeTruthy();
142-
expect(tree.find(ResizingControl).prop('onDraftWidthChange'))
143-
.toBe(onDraftWidthChange);
144145
expect(tree.find(ResizingControl).prop('onWidthChange'))
145146
.toBe(onWidthChange);
147+
expect(tree.find(ResizingControl).prop('onWidthDraft'))
148+
.toBe(onWidthDraft);
149+
expect(tree.find(ResizingControl).prop('onWidthDraftCancel'))
150+
.toBe(onWidthDraftCancel);
146151
});
147152

148153
it('should have correct styles when grouping by click is not allowed and column align is left', () => {

‎packages/dx-react-grid-bootstrap3/src/templates/table-header-cell/resizing-control.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,11 +50,12 @@ export class ResizingControl extends React.PureComponent {
5050
this.setState({ resizing: true });
5151
};
5252
this.onResizeUpdate = ({ x }) => {
53-
const { onDraftWidthChange } = this.props;
54-
onDraftWidthChange({ shift: x - this.resizeStartingX });
53+
const { onWidthDraft } = this.props;
54+
onWidthDraft({ shift: x - this.resizeStartingX });
5555
};
5656
this.onResizeEnd = ({ x }) => {
57-
const { onWidthChange } = this.props;
57+
const { onWidthChange, onWidthDraftCancel } = this.props;
58+
onWidthDraftCancel();
5859
onWidthChange({ shift: x - this.resizeStartingX });
5960
this.setState({ resizing: false });
6061
};
@@ -92,5 +93,6 @@ export class ResizingControl extends React.PureComponent {
9293

9394
ResizingControl.propTypes = {
9495
onWidthChange: PropTypes.func.isRequired,
95-
onDraftWidthChange: PropTypes.func.isRequired,
96+
onWidthDraft: PropTypes.func.isRequired,
97+
onWidthDraftCancel: PropTypes.func.isRequired,
9698
};

‎packages/dx-react-grid-bootstrap3/src/templates/table-header-cell/resizing-control.test.jsx

Lines changed: 19 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,15 @@
11
import React from 'react';
2-
import { mount } from 'enzyme';
2+
import { shallow } from 'enzyme';
33
import { setupConsole } from '@devexpress/dx-testing';
44
import { Draggable } from '@devexpress/dx-react-core';
55
import { ResizingControl } from './resizing-control';
66

7+
const defaultProps = {
8+
onWidthChange: () => {},
9+
onWidthDraft: () => {},
10+
onWidthDraftCancel: () => {},
11+
};
12+
713
describe('ResizingControl', () => {
814
let resetConsole;
915
beforeAll(() => {
@@ -15,33 +21,37 @@ describe('ResizingControl', () => {
1521

1622
it('should trigger onWidthChange with correct change on resize end', () => {
1723
const onWidthChange = jest.fn();
18-
const tree = mount((
24+
const onWidthDraftCancel = jest.fn();
25+
const tree = shallow((
1926
<ResizingControl
20-
onDraftWidthChange={() => {}}
27+
{...defaultProps}
2128
onWidthChange={onWidthChange}
29+
onWidthDraftCancel={onWidthDraftCancel}
2230
/>
2331
));
2432

2533
tree.find(Draggable).prop('onStart')({ x: 0 });
2634

2735
tree.find(Draggable).prop('onEnd')({ x: 10 });
36+
expect(onWidthDraftCancel)
37+
.toBeCalled();
2838
expect(onWidthChange)
2939
.toBeCalledWith({ shift: 10 });
3040
});
3141

32-
it('should trigger onDraftWidthChange with correct change on resize update', () => {
33-
const onDraftWidthChange = jest.fn();
34-
const tree = mount((
42+
it('should trigger onWidthDraft with correct change on resize update', () => {
43+
const onWidthDraft = jest.fn();
44+
const tree = shallow((
3545
<ResizingControl
36-
onDraftWidthChange={onDraftWidthChange}
37-
onWidthChange={() => {}}
46+
{...defaultProps}
47+
onWidthDraft={onWidthDraft}
3848
/>
3949
));
4050

4151
tree.find(Draggable).prop('onStart')({ x: 0 });
4252

4353
tree.find(Draggable).prop('onUpdate')({ x: 10 });
44-
expect(onDraftWidthChange)
54+
expect(onWidthDraft)
4555
.toBeCalledWith({ shift: 10 });
4656
});
4757
});

‎packages/dx-react-grid-material-ui/src/templates/table-header-cell.jsx

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ class TableHeaderCellBase extends React.PureComponent {
7979
showSortingControls, sortingDirection,
8080
showGroupingControls, onGroup,
8181
draggingEnabled,
82-
resizingEnabled, onWidthChange, onDraftWidthChange,
82+
resizingEnabled, onWidthChange, onWidthDraft, onWidthDraftCancel,
8383
classes, getMessage, tableRow, className, onSort,
8484
...restProps
8585
} = this.props;
@@ -124,7 +124,8 @@ class TableHeaderCellBase extends React.PureComponent {
124124
{resizingEnabled && (
125125
<ResizingControl
126126
onWidthChange={onWidthChange}
127-
onDraftWidthChange={onDraftWidthChange}
127+
onWidthDraft={onWidthDraft}
128+
onWidthDraftCancel={onWidthDraftCancel}
128129
/>
129130
)}
130131
</TableCell>
@@ -156,7 +157,8 @@ TableHeaderCellBase.propTypes = {
156157
draggingEnabled: PropTypes.bool,
157158
resizingEnabled: PropTypes.bool,
158159
onWidthChange: PropTypes.func,
159-
onDraftWidthChange: PropTypes.func,
160+
onWidthDraft: PropTypes.func,
161+
onWidthDraftCancel: PropTypes.func,
160162
classes: PropTypes.object.isRequired,
161163
getMessage: PropTypes.func.isRequired,
162164
className: PropTypes.string,
@@ -175,7 +177,8 @@ TableHeaderCellBase.defaultProps = {
175177
draggingEnabled: false,
176178
resizingEnabled: false,
177179
onWidthChange: undefined,
178-
onDraftWidthChange: undefined,
180+
onWidthDraft: undefined,
181+
onWidthDraftCancel: undefined,
179182
className: undefined,
180183
};
181184

‎packages/dx-react-grid-material-ui/src/templates/table-header-cell.test.jsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -125,22 +125,26 @@ describe('TableHeaderCell', () => {
125125

126126
it('should render resize control if resize allowed', () => {
127127
const onWidthChange = () => {};
128-
const onDraftWidthChange = () => {};
128+
const onWidthDraft = () => {};
129+
const onWidthDraftCancel = () => {};
129130
const tree = shallow((
130131
<TableHeaderCell
131132
{...defaultProps}
132133
resizingEnabled
133-
onDraftWidthChange={onDraftWidthChange}
134134
onWidthChange={onWidthChange}
135+
onWidthDraft={onWidthDraft}
136+
onWidthDraftCancel={onWidthDraftCancel}
135137
/>
136138
));
137139

138140
expect(tree.find(ResizingControl).exists())
139141
.toBeTruthy();
140-
expect(tree.find(ResizingControl).prop('onDraftWidthChange'))
141-
.toBe(onDraftWidthChange);
142142
expect(tree.find(ResizingControl).prop('onWidthChange'))
143143
.toBe(onWidthChange);
144+
expect(tree.find(ResizingControl).prop('onWidthDraft'))
145+
.toBe(onWidthDraft);
146+
expect(tree.find(ResizingControl).prop('onWidthDraftCancel'))
147+
.toBe(onWidthDraftCancel);
144148
});
145149

146150
it('should pass correct text to SortingControl', () => {

‎packages/dx-react-grid-material-ui/src/templates/table-header-cell/resizing-control.jsx

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -66,11 +66,12 @@ export class ResizingControlBase extends React.PureComponent {
6666
this.setState({ resizing: true });
6767
};
6868
this.onResizeUpdate = ({ x }) => {
69-
const { onDraftWidthChange } = this.props;
70-
onDraftWidthChange({ shift: x - this.resizeStartingX });
69+
const { onWidthDraft } = this.props;
70+
onWidthDraft({ shift: x - this.resizeStartingX });
7171
};
7272
this.onResizeEnd = ({ x }) => {
73-
const { onWidthChange } = this.props;
73+
const { onWidthChange, onWidthDraftCancel } = this.props;
74+
onWidthDraftCancel();
7475
onWidthChange({ shift: x - this.resizeStartingX });
7576
this.setState({ resizing: false });
7677
};
@@ -111,7 +112,8 @@ export class ResizingControlBase extends React.PureComponent {
111112

112113
ResizingControlBase.propTypes = {
113114
onWidthChange: PropTypes.func.isRequired,
114-
onDraftWidthChange: PropTypes.func.isRequired,
115+
onWidthDraft: PropTypes.func.isRequired,
116+
onWidthDraftCancel: PropTypes.func.isRequired,
115117
classes: PropTypes.object.isRequired,
116118
};
117119

0 commit comments

Comments
 (0)