Skip to content

Commit af98a79

Browse files
author
Patrick Tran
committed
Bugfix - only call onDraggedColumnChange when column ordering is changed in ReactTable. We do not want to call onDraggedColumnChange if column order is changed outside of ReactTable
1 parent d53304c commit af98a79

File tree

11 files changed

+862
-751
lines changed

11 files changed

+862
-751
lines changed

Diff for: ‎.eslintrc

+1-4
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
11
{
22
"parser": "babel-eslint",
3-
"extends": [
4-
"standard",
5-
"standard-react"
6-
],
3+
"extends": ["react-app", "plugin:jest-dom/recommended", "prettier"],
74
"env": {
85
"es6": true
96
},

Diff for: ‎.vscode/extensions.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"recommendations": ["esbenp.prettier-vscode"]
3+
}

Diff for: ‎.vscode/settings.json

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
{
2+
"editor.tabSize": 2,
3+
"editor.formatOnSave": true,
4+
"eslint.alwaysShowStatus": true,
5+
"editor.codeActionsOnSave": {
6+
"source.fixAll.eslint": true
7+
}
8+
}
9+

Diff for: ‎CHANGELOG.md

+11-3
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,19 @@
1+
# 1.3.2 (2021-xx-xx)
2+
3+
Bugfix - only call `onDraggedColumnChange` when column ordering is changed in ReactTable.
4+
We do not want to call `onDraggedColumnChange` if column order is changed outside of ReactTable... this may
5+
lead to an infinite loop depending on your use case.
6+
7+
Update eslint/prettier config
8+
19
# 1.3.1 (2021-4-20)
210

3-
Maintenance release adding null/optional chaining checks
11+
Maintenance release adding null/optional chaining checks
412

513
# 1.3.0 (2021-4-06)
614

715
Refactor rendering process so that calling `setState` inside `onDraggedColumnChange` will not crash the HOC
8-
`onDraggedColumnChange` and `onDropSuccess` callback method arguments refer to the original column instance and not the modified draggable instance
16+
`onDraggedColumnChange` and `onDropSuccess` callback method arguments refer to the original column instance and not the modified draggable instance
917

1018
# 1.2.5 (2020-6-30)
1119

@@ -14,7 +22,7 @@ Remove scarf
1422
# 1.2.4 (2020-5-16)
1523

1624
Cleanup - remove leftover console.logs
17-
Add scarf installation analytics
25+
Add scarf installation analytics
1826

1927
# 1.2.3 (2020-4-10)
2028

Diff for: ‎example/src/App.js

+142-87
Original file line numberDiff line numberDiff line change
@@ -5,113 +5,31 @@ import withDraggableColumns, { DragMode } from 'react-table-hoc-draggable-column
55
import 'react-table-hoc-draggable-columns/dist/styles.css';
66
import { useState } from 'react';
77

8-
function shuffleArray(array) {
9-
const resultArr = [...array];
10-
11-
for (var i = resultArr.length - 1; i > 0; i--) {
12-
var j = Math.floor(Math.random() * (i + 1));
13-
var temp = resultArr[i];
14-
resultArr[i] = resultArr[j];
15-
resultArr[j] = temp;
16-
}
17-
18-
return resultArr;
19-
}
20-
21-
export default function App() {
22-
const [columns, setColumns] = useState(carColumns);
23-
const [draggable, setDraggable] = useState(['vin', 'year', 'brand', 'color']);
24-
25-
const removeColumn = () => {
26-
setColumns(prevState => prevState.slice(1));
27-
};
28-
29-
const removeDraggable = () => {
30-
setDraggable(prevState => prevState.slice(1));
31-
};
32-
33-
const randomOrderColumns = () => {
34-
setColumns(shuffleArray(columns));
35-
};
36-
37-
const ReactTableDraggableColumns = withDraggableColumns(ReactTable);
38-
39-
return (
40-
<div className="App">
41-
<button style={{ backgroundColor: 'red', color: 'white' }} onClick={removeColumn}>
42-
Remove A Column
43-
</button>
44-
&nbsp;
45-
<button style={{ backgroundColor: 'blue', color: 'white' }} onClick={removeDraggable}>
46-
Remove A Draggable
47-
</button>
48-
&nbsp;
49-
<button style={{ backgroundColor: 'green', color: 'white' }} onClick={randomOrderColumns}>
50-
Reshuffle Columns
51-
</button>
52-
<br />
53-
Draggable Columns: {draggable.join(', ')}
54-
<br />
55-
<ReactTableDraggableColumns
56-
style={{
57-
width: '98vw',
58-
height: '500px'
59-
}}
60-
sortable={false}
61-
columns={columns}
62-
data={carData}
63-
showPagination={false}
64-
draggableColumns={{
65-
mode: DragMode.REORDER,
66-
draggable: draggable,
67-
enableColumnWideDrag: false,
68-
disableTableScroll: false,
69-
useDragImage: true,
70-
onDraggedColumnChange: cols => {
71-
//update state
72-
setColumns(cols)
73-
},
74-
onDropSuccess: (
75-
draggedColumn,
76-
targetColumn,
77-
oldIndex,
78-
newIndex,
79-
oldOffset,
80-
newOffset
81-
) => {
82-
console.log(draggedColumn, targetColumn, oldIndex, newIndex, oldOffset, newOffset);
83-
}
84-
}}
85-
/>
86-
</div>
87-
);
88-
}
89-
908
const carColumns = [
919
{
9210
Header: 'Vin',
9311
accessor: 'vin',
94-
width: 300
12+
width: 200
9513
},
9614
{
9715
Header: 'Year',
9816
accessor: 'year',
99-
width: 500
17+
width: 200
10018
},
10119
{
10220
Header: 'Brand',
10321
accessor: 'brand',
104-
width: 500
22+
width: 200
10523
},
10624
{
10725
Header: 'Color',
10826
accessor: 'color',
109-
width: 500
27+
width: 200
11028
},
11129
{
11230
Header: 'Price',
11331
accessor: 'price',
114-
width: 500
32+
width: 200
11533
}
11634
];
11735

@@ -467,3 +385,140 @@ const carData = [
467385
price: 50000
468386
}
469387
];
388+
389+
function shuffleArray(array) {
390+
const resultArr = [...array];
391+
392+
for (var i = resultArr.length - 1; i > 0; i--) {
393+
var j = Math.floor(Math.random() * (i + 1));
394+
var temp = resultArr[i];
395+
resultArr[i] = resultArr[j];
396+
resultArr[j] = temp;
397+
}
398+
399+
return resultArr;
400+
}
401+
402+
class TableComponent extends React.Component {
403+
constructor(props) {
404+
super(props);
405+
this.ReactTableDraggableColumns = withDraggableColumns(ReactTable);
406+
}
407+
408+
render() {
409+
const {
410+
removeColumn,
411+
randomOrderColumns,
412+
setColumns,
413+
columns,
414+
draggable,
415+
removeDraggable
416+
} = this.props;
417+
418+
return (
419+
<>
420+
<button style={{ backgroundColor: 'red', color: 'white' }} onClick={removeColumn}>
421+
Remove A Column
422+
</button>
423+
&nbsp;
424+
<button style={{ backgroundColor: 'blue', color: 'white' }} onClick={removeDraggable}>
425+
Remove A Draggable
426+
</button>
427+
&nbsp;
428+
<button style={{ backgroundColor: 'green', color: 'white' }} onClick={randomOrderColumns}>
429+
Reshuffle Columns
430+
</button>
431+
<br />
432+
<strong>Draggable Columns: {draggable.join(', ')}</strong>
433+
<br />
434+
<this.ReactTableDraggableColumns
435+
style={{
436+
width: '98vw',
437+
height: '500px'
438+
}}
439+
columns={columns}
440+
data={carData}
441+
showPagination={false}
442+
draggableColumns={{
443+
mode: DragMode.REORDER,
444+
draggable: draggable,
445+
enableColumnWideDrag: false,
446+
disableTableScroll: false,
447+
useDragImage: true,
448+
onDraggedColumnChange: cols => setColumns(cols),
449+
onDropSuccess: (
450+
draggedColumn,
451+
targetColumn,
452+
oldIndex,
453+
newIndex,
454+
oldOffset,
455+
newOffset
456+
) => {
457+
/*console.log(
458+
draggedColumn,
459+
targetColumn,
460+
oldIndex,
461+
newIndex,
462+
oldOffset,
463+
newOffset
464+
);*/
465+
}
466+
}}
467+
/>
468+
</>
469+
);
470+
}
471+
}
472+
473+
function ColumnOrderList({ columns, randomOrderColumns }) {
474+
return (
475+
<>
476+
<strong>Column Order:</strong>
477+
<button
478+
style={{ backgroundColor: 'green', color: 'white', margin: '0 15px' }}
479+
onClick={randomOrderColumns}
480+
>
481+
Reshuffle Columns
482+
</button>
483+
<ul>
484+
{columns.map((col, idx) => {
485+
return <li key={idx}>{col.Header}</li>;
486+
})}
487+
</ul>
488+
</>
489+
);
490+
}
491+
492+
export default function App() {
493+
const [columns, setColumns] = useState(carColumns);
494+
const [draggable, setDraggable] = useState(['vin', 'year', 'brand', 'color', 'price']);
495+
496+
const removeColumn = () => {
497+
setColumns(prevState => prevState.slice(1));
498+
};
499+
500+
const removeDraggable = () => {
501+
setDraggable(prevState => prevState.slice(1));
502+
};
503+
504+
const randomOrderColumns = () => {
505+
setColumns(shuffleArray(columns));
506+
};
507+
508+
return (
509+
<div className="App">
510+
<TableComponent
511+
{...{
512+
removeColumn,
513+
randomOrderColumns,
514+
setColumns,
515+
columns,
516+
draggable,
517+
removeDraggable
518+
}}
519+
/>
520+
<br />
521+
<ColumnOrderList columns={columns} randomOrderColumns={randomOrderColumns} />
522+
</div>
523+
);
524+
}

Diff for: ‎example/src/stories/index.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22

33
import { storiesOf } from '@storybook/react';
4-
import { withKnobs, text, boolean } from '@storybook/addon-knobs';
4+
import { withKnobs, boolean, array } from '@storybook/addon-knobs';
55
import ReactTable from 'react-table';
66
import 'react-table/react-table.css';
77
import withDraggableColumns, { DragMode } from 'react-table-hoc-draggable-columns';
@@ -26,7 +26,7 @@ stories.add('Reorder Columns', () => {
2626
showPagination={false}
2727
draggableColumns={{
2828
mode: DragMode.REORDER,
29-
draggable: text('draggable', ['vin', 'year', 'brand', 'color']),
29+
draggable: array('draggable', ['vin', 'year', 'brand', 'color']),
3030
enableColumnWideDrag: boolean('enableColumnWideDrag', false),
3131
disableTableScroll: boolean('disableTableScroll', true),
3232
useDragImage: boolean('useDragImage', true),
@@ -54,7 +54,7 @@ stories
5454
showPagination={false}
5555
draggableColumns={{
5656
mode: DragMode.REORDER,
57-
draggable: text('draggable', ['vin', 'year', 'brand', 'color']),
57+
draggable: array('draggable', ['vin', 'year', 'brand', 'color']),
5858
enableColumnWideDrag: boolean('enableColumnWideDrag', true),
5959
disableTableScroll: boolean('disableTableScroll', true),
6060
useDragImage: boolean('useDragImage', true),
@@ -82,7 +82,7 @@ stories
8282
showPagination={false}
8383
draggableColumns={{
8484
mode: DragMode.REORDER,
85-
draggable: text('draggable', ['vin', 'year', 'brand', 'color']),
85+
draggable: array('draggable', ['vin', 'year', 'brand', 'color']),
8686
enableColumnWideDrag: boolean('enableColumnWideDrag', true),
8787
disableTableScroll: boolean('disableTableScroll', true),
8888
useDragImage: boolean('useDragImage', true),
@@ -116,7 +116,7 @@ stories
116116
showPagination={false}
117117
draggableColumns={{
118118
mode: DragMode.SWAP,
119-
draggable: text('draggable', ['vin', 'year', 'brand', 'color']),
119+
draggable: array('draggable', ['vin', 'year', 'brand', 'color']),
120120
enableColumnWideDrag: boolean('enableColumnWideDrag', true),
121121
disableTableScroll: boolean('disableTableScroll', true),
122122
useDragImage: boolean('useDragImage', true),

0 commit comments

Comments
 (0)