Skip to content

Commit 173f90a

Browse files
kserjeykserjey
committed
feat: update react-dnd
1 parent 420d602 commit 173f90a

File tree

8 files changed

+156
-101
lines changed

8 files changed

+156
-101
lines changed

‎package.json

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -63,8 +63,8 @@
6363
"frontend-collective-react-dnd-scrollzone": "^1.0.2",
6464
"lodash.isequal": "^4.5.0",
6565
"prop-types": "^15.6.1",
66-
"react-dnd": "^7.3.0",
67-
"react-dnd-html5-backend": "^7.0.1",
66+
"react-dnd": "^9.3.4",
67+
"react-dnd-html5-backend": "^9.3.4",
6868
"react-lifecycles-compat": "^3.0.4",
6969
"react-sortable-tree": "^2.6.0",
7070
"react-virtualized": "^9.19.1"
@@ -106,8 +106,8 @@
106106
"prettier": "^1.13.3",
107107
"react": "^16.3.0",
108108
"react-addons-shallow-compare": "^15.6.2",
109-
"react-dnd-test-backend": "^7.0.1",
110-
"react-dnd-touch-backend": "^0.6.0",
109+
"react-dnd-test-backend": "^9.3.4",
110+
"react-dnd-touch-backend": "^9.3.4",
111111
"react-dom": "^16.3.0",
112112
"react-hot-loader": "^4.3.0",
113113
"react-sortable-tree-theme-file-explorer": "^1.1.2",

‎src/react-sortable-tree.js

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,8 @@ import withScrolling, {
77
createVerticalStrength,
88
createHorizontalStrength,
99
} from 'frontend-collective-react-dnd-scrollzone';
10-
import { DragDropContextConsumer } from 'react-dnd';
10+
import { DndProvider, DndContext } from 'react-dnd';
11+
import HTML5Backend from 'react-dnd-html5-backend';
1112
import { polyfill } from 'react-lifecycles-compat';
1213
import 'react-virtualized/styles.css';
1314
import TreeNode from './tree-node';
@@ -936,18 +937,24 @@ ReactSortableTree.defaultProps = {
936937
polyfill(ReactSortableTree);
937938

938939
const SortableTreeWithoutDndContext = props => (
939-
<DragDropContextConsumer>
940+
<DndContext.Consumer>
940941
{({ dragDropManager }) =>
941942
dragDropManager === undefined ? null : (
942943
<ReactSortableTree {...props} dragDropManager={dragDropManager} />
943944
)
944945
}
945-
</DragDropContextConsumer>
946+
</DndContext.Consumer>
946947
);
947948

949+
const SortableTree = props => (
950+
<DndProvider backend={HTML5Backend}>
951+
<SortableTreeWithoutDndContext {...props}/>
952+
</DndProvider>
953+
)
954+
948955
// Export the tree component without the react-dnd DragDropContext,
949956
// for when component is used with other components using react-dnd.
950957
// see: https://github.com/gaearon/react-dnd/issues/186
951958
export { SortableTreeWithoutDndContext };
952959

953-
export default DndManager.wrapRoot(SortableTreeWithoutDndContext);
960+
export default SortableTree;

‎src/react-sortable-tree.test.js

Lines changed: 24 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
33
import renderer from 'react-test-renderer';
44
import { mount } from 'enzyme';
55
import { List } from 'react-virtualized';
6-
import { DragDropContext } from 'react-dnd';
6+
import { DndProvider } from 'react-dnd';
77
import HTML5Backend from 'react-dnd-html5-backend';
88
import TouchBackend from 'react-dnd-touch-backend';
99
import SortableTree, {
@@ -401,34 +401,39 @@ describe('<SortableTree />', () => {
401401
});
402402

403403
it('loads using SortableTreeWithoutDndContext', () => {
404-
const HTML5Wrapped = DragDropContext(HTML5Backend)(
405-
SortableTreeWithoutDndContext
406-
);
407-
const TouchWrapped = DragDropContext(TouchBackend)(
408-
SortableTreeWithoutDndContext
409-
);
410-
411404
expect(
412-
mount(<HTML5Wrapped treeData={[{ title: 'a' }]} onChange={() => {}} />)
405+
mount(
406+
<DndProvider backend={HTML5Backend}>
407+
<SortableTreeWithoutDndContext
408+
treeData={[{ title: 'a' }]}
409+
onChange={() => {}}
410+
/>
411+
</DndProvider>
412+
)
413413
).toBeDefined();
414414
expect(
415-
mount(<TouchWrapped treeData={[{ title: 'a' }]} onChange={() => {}} />)
415+
mount(
416+
<DndProvider backend={TouchBackend}>
417+
<SortableTreeWithoutDndContext
418+
treeData={[{ title: 'a' }]}
419+
onChange={() => {}}
420+
/>
421+
</DndProvider>
422+
)
416423
).toBeDefined();
417424
});
418425

419426
it('loads using SortableTreeWithoutDndContext', () => {
420-
const TestWrapped = DragDropContext(HTML5Backend)(
421-
SortableTreeWithoutDndContext
422-
);
423-
424427
const onDragStateChanged = jest.fn();
425428
const treeData = [{ title: 'a' }, { title: 'b' }];
426429
const wrapper = mount(
427-
<TestWrapped
428-
treeData={treeData}
429-
onDragStateChanged={onDragStateChanged}
430-
onChange={() => {}}
431-
/>
430+
<DndProvider backend={HTML5Backend}>
431+
<SortableTreeWithoutDndContext
432+
treeData={treeData}
433+
onDragStateChanged={onDragStateChanged}
434+
onChange={() => {}}
435+
/>
436+
</DndProvider>
432437
);
433438

434439
// Obtain a reference to the backend

‎src/utils/dnd-manager.js

Lines changed: 1 addition & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,4 @@
1-
import {
2-
DragDropContext as dragDropContext,
3-
DragSource as dragSource,
4-
DropTarget as dropTarget,
5-
} from 'react-dnd';
6-
import HTML5Backend from 'react-dnd-html5-backend';
1+
import { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';
72
import { findDOMNode } from 'react-dom';
83
import { getDepth } from './tree-data-utils';
94
import { memoizedInsertNode } from './memoized-tree-data-utils';
@@ -13,10 +8,6 @@ export default class DndManager {
138
this.treeRef = treeRef;
149
}
1510

16-
static wrapRoot(el) {
17-
return dragDropContext(HTML5Backend)(el);
18-
}
19-
2011
get startDrag() {
2112
return this.treeRef.startDrag;
2213
}

‎stories/drag-out-to-remove.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/no-multi-comp */
22
import React, { Component } from 'react';
33
import PropTypes from 'prop-types';
4-
import { DragDropContext, DropTarget } from 'react-dnd';
4+
import { DndProvider, DropTarget } from 'react-dnd';
55
import HTML5Backend from 'react-dnd-html5-backend';
66
import { SortableTreeWithoutDndContext as SortableTree } from '../src';
77
// In your own app, you would need to use import styles once in the app
@@ -54,7 +54,7 @@ const TrashAreaComponent = DropTarget(
5454
trashAreaCollect
5555
)(trashAreaBaseComponent);
5656

57-
class UnwrappedApp extends Component {
57+
class App extends Component {
5858
constructor(props) {
5959
super(props);
6060

@@ -70,20 +70,21 @@ class UnwrappedApp extends Component {
7070

7171
render() {
7272
return (
73-
<div>
74-
<TrashAreaComponent>
75-
<div style={{ height: 250 }}>
76-
<SortableTree
77-
treeData={this.state.treeData}
78-
onChange={treeData => this.setState({ treeData })}
79-
dndType={trashAreaType}
80-
/>
81-
</div>
82-
</TrashAreaComponent>
83-
</div>
73+
<DndProvider backend={HTML5Backend}>
74+
<div>
75+
<TrashAreaComponent>
76+
<div style={{ height: 250 }}>
77+
<SortableTree
78+
treeData={this.state.treeData}
79+
onChange={treeData => this.setState({ treeData })}
80+
dndType={trashAreaType}
81+
/>
82+
</div>
83+
</TrashAreaComponent>
84+
</div>
85+
</DndProvider>
8486
);
8587
}
8688
}
8789

88-
const App = DragDropContext(HTML5Backend)(UnwrappedApp);
8990
export default App;

‎stories/external-node.js

Lines changed: 14 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/* eslint-disable react/no-multi-comp */
22
import React, { Component } from 'react';
33
import PropTypes from 'prop-types';
4-
import { DragDropContext, DragSource } from 'react-dnd';
4+
import { DndProvider, DragSource } from 'react-dnd';
55
import HTML5Backend from 'react-dnd-html5-backend';
66
import { SortableTreeWithoutDndContext as SortableTree } from '../src';
77
// In your own app, you would need to use import styles once in the app
@@ -55,7 +55,7 @@ const YourExternalNodeComponent = DragSource(
5555
externalNodeCollect
5656
)(externalNodeBaseComponent);
5757

58-
class UnwrappedApp extends Component {
58+
class App extends Component {
5959
constructor(props) {
6060
super(props);
6161

@@ -66,19 +66,21 @@ class UnwrappedApp extends Component {
6666

6767
render() {
6868
return (
69-
<div>
70-
<div style={{ height: 300 }}>
71-
<SortableTree
72-
treeData={this.state.treeData}
73-
onChange={treeData => this.setState({ treeData })}
74-
dndType={externalNodeType}
75-
/>
69+
<DndProvider backend={HTML5Backend}>
70+
<div>
71+
<div style={{ height: 300 }}>
72+
<SortableTree
73+
treeData={this.state.treeData}
74+
onChange={treeData => this.setState({ treeData })}
75+
dndType={externalNodeType}
76+
/>
77+
</div>
78+
<YourExternalNodeComponent node={{ title: 'Baby Rabbit' }} />← drag
79+
this
7680
</div>
77-
<YourExternalNodeComponent node={{ title: 'Baby Rabbit' }} />← drag this
78-
</div>
81+
</DndProvider>
7982
);
8083
}
8184
}
8285

83-
const App = DragDropContext(HTML5Backend)(UnwrappedApp);
8486
export default App;

‎stories/touch-support.js

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable import/no-extraneous-dependencies */
22
import React, { Component } from 'react';
3-
import { DragDropContext } from 'react-dnd';
3+
import { DndProvider } from 'react-dnd';
44
import HTML5Backend from 'react-dnd-html5-backend';
55
import TouchBackend from 'react-dnd-touch-backend';
66
import { SortableTreeWithoutDndContext as SortableTree } from '../src';
@@ -9,8 +9,9 @@ import { SortableTreeWithoutDndContext as SortableTree } from '../src';
99

1010
// https://stackoverflow.com/a/4819886/1601953
1111
const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
12+
const dndBackend = isTouchDevice ? TouchBackend : HTML5Backend;
1213

13-
class UnwrappedApp extends Component {
14+
class App extends Component {
1415
constructor(props) {
1516
super(props);
1617

@@ -23,23 +24,22 @@ class UnwrappedApp extends Component {
2324

2425
render() {
2526
return (
26-
<div>
27-
<span>
28-
This is {!isTouchDevice && 'not '}a touch-supporting browser
29-
</span>
27+
<DndProvider backend={dndBackend}>
28+
<div>
29+
<span>
30+
This is {!isTouchDevice && 'not '}a touch-supporting browser
31+
</span>
3032

31-
<div style={{ height: 300 }}>
32-
<SortableTree
33-
treeData={this.state.treeData}
34-
onChange={treeData => this.setState({ treeData })}
35-
/>
33+
<div style={{ height: 300 }}>
34+
<SortableTree
35+
treeData={this.state.treeData}
36+
onChange={treeData => this.setState({ treeData })}
37+
/>
38+
</div>
3639
</div>
37-
</div>
40+
</DndProvider>
3841
);
3942
}
4043
}
4144

42-
const App = DragDropContext(isTouchDevice ? TouchBackend : HTML5Backend)(
43-
UnwrappedApp
44-
);
4545
export default App;

0 commit comments

Comments
 (0)