Skip to content

Commit c449524

Browse files
kserjeylifejuggler
kserjey
authored and
lifejuggler
committed
feat: update react-dnd (#531)
* feat: update react-dnd * feat: use prepare to install from github * fix: cjs for jest * fix: update enzyme * fix: dnd simulation * refactor: remove unused test-utils * feat: remove extra lint script * feat: add script to only build
1 parent 420d602 commit c449524

8 files changed

+874
-185
lines changed

‎package.json

+16-9
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@
66
"start": "parcel website/index.html",
77
"prebuild": "npm run lint && npm run clean",
88
"build": "rollup -c",
9+
"buildOnly": "rollup -c",
910
"build:storybook": "npm run clean:storybook && build-storybook -o build/storybook",
1011
"build:website": "npm run clean:website && parcel build website/index.html -d build --public-url /react-sortable-tree/",
1112
"clean": "rimraf dist",
1213
"clean:storybook": "rimraf build/storybook",
1314
"clean:website": "rimraf build",
1415
"lint": "eslint src",
1516
"prettier": "prettier --write \"{src,example/src,stories}/**/*.{js,css,md}\"",
16-
"prepublishOnly": "npm run lint && npm run test && npm run build",
17+
"prepublishOnly": "npm run test && npm run build",
1718
"release": "standard-version",
1819
"test": "jest",
1920
"test:watch": "jest --watchAll",
@@ -51,7 +52,13 @@
5152
"node_modules"
5253
],
5354
"moduleNameMapper": {
54-
"\\.(css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js"
55+
"\\.(css|jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$": "<rootDir>/__mocks__/fileMock.js",
56+
"^dnd-core$": "dnd-core/dist/cjs",
57+
"^react-dnd$": "react-dnd/dist/cjs",
58+
"^react-dnd-html5-backend$": "react-dnd-html5-backend/dist/cjs",
59+
"^react-dnd-touch-backend$": "react-dnd-touch-backend/dist/cjs",
60+
"^react-dnd-test-backend$": "react-dnd-test-backend/dist/cjs",
61+
"^react-dnd-test-utils$": "react-dnd-test-utils/dist/cjs"
5562
}
5663
},
5764
"browserslist": [
@@ -63,8 +70,8 @@
6370
"frontend-collective-react-dnd-scrollzone": "^1.0.2",
6471
"lodash.isequal": "^4.5.0",
6572
"prop-types": "^15.6.1",
66-
"react-dnd": "^7.3.0",
67-
"react-dnd-html5-backend": "^7.0.1",
73+
"react-dnd": "^9.3.4",
74+
"react-dnd-html5-backend": "^9.3.4",
6875
"react-lifecycles-compat": "^3.0.4",
6976
"react-sortable-tree": "^2.6.0",
7077
"react-virtualized": "^9.19.1"
@@ -91,8 +98,8 @@
9198
"codesandbox": "^1.2.10",
9299
"coveralls": "^3.0.1",
93100
"cross-env": "^5.1.6",
94-
"enzyme": "^3.3.0",
95-
"enzyme-adapter-react-16": "^1.1.1",
101+
"enzyme": "^3.10.0",
102+
"enzyme-adapter-react-16": "^1.14.0",
96103
"eslint": "^5.9.0",
97104
"eslint-config-airbnb": "^17.1.0",
98105
"eslint-config-prettier": "^3.3.0",
@@ -101,13 +108,13 @@
101108
"eslint-plugin-react": "^7.8.2",
102109
"gh-pages": "^2.0.1",
103110
"jest": "^23.1.0",
104-
"jest-enzyme": "^7.0.1",
111+
"jest-enzyme": "^7.1.1",
105112
"parcel-bundler": "^1.11.0",
106113
"prettier": "^1.13.3",
107114
"react": "^16.3.0",
108115
"react-addons-shallow-compare": "^15.6.2",
109-
"react-dnd-test-backend": "^7.0.1",
110-
"react-dnd-touch-backend": "^0.6.0",
116+
"react-dnd-test-backend": "^9.3.4",
117+
"react-dnd-touch-backend": "^9.3.4",
111118
"react-dom": "^16.3.0",
112119
"react-hot-loader": "^4.3.0",
113120
"react-sortable-tree-theme-file-explorer": "^1.1.2",

‎src/react-sortable-tree.js

+11-4
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

+34-23
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
/* eslint-disable react/no-multi-comp */
12
import React, { Component } from 'react';
23
import PropTypes from 'prop-types';
34
import renderer from 'react-test-renderer';
45
import { mount } from 'enzyme';
56
import { List } from 'react-virtualized';
6-
import { DragDropContext } from 'react-dnd';
7+
import { DndProvider, DndContext } from 'react-dnd';
8+
import TestBackend from 'react-dnd-test-backend';
79
import HTML5Backend from 'react-dnd-html5-backend';
810
import TouchBackend from 'react-dnd-touch-backend';
911
import SortableTree, {
@@ -401,41 +403,50 @@ describe('<SortableTree />', () => {
401403
});
402404

403405
it('loads using SortableTreeWithoutDndContext', () => {
404-
const HTML5Wrapped = DragDropContext(HTML5Backend)(
405-
SortableTreeWithoutDndContext
406-
);
407-
const TouchWrapped = DragDropContext(TouchBackend)(
408-
SortableTreeWithoutDndContext
409-
);
410-
411406
expect(
412-
mount(<HTML5Wrapped treeData={[{ title: 'a' }]} onChange={() => {}} />)
407+
mount(
408+
<DndProvider backend={HTML5Backend}>
409+
<SortableTreeWithoutDndContext
410+
treeData={[{ title: 'a' }]}
411+
onChange={() => {}}
412+
/>
413+
</DndProvider>
414+
)
413415
).toBeDefined();
414416
expect(
415-
mount(<TouchWrapped treeData={[{ title: 'a' }]} onChange={() => {}} />)
417+
mount(
418+
<DndProvider backend={TouchBackend}>
419+
<SortableTreeWithoutDndContext
420+
treeData={[{ title: 'a' }]}
421+
onChange={() => {}}
422+
/>
423+
</DndProvider>
424+
)
416425
).toBeDefined();
417426
});
418427

419428
it('loads using SortableTreeWithoutDndContext', () => {
420-
const TestWrapped = DragDropContext(HTML5Backend)(
421-
SortableTreeWithoutDndContext
422-
);
423-
424429
const onDragStateChanged = jest.fn();
425430
const treeData = [{ title: 'a' }, { title: 'b' }];
431+
let manager = null;
432+
426433
const wrapper = mount(
427-
<TestWrapped
428-
treeData={treeData}
429-
onDragStateChanged={onDragStateChanged}
430-
onChange={() => {}}
431-
/>
434+
<DndProvider backend={TestBackend}>
435+
<DndContext.Consumer>
436+
{({ dragDropManager }) => {
437+
manager = dragDropManager;
438+
}}
439+
</DndContext.Consumer>
440+
<SortableTreeWithoutDndContext
441+
treeData={treeData}
442+
onDragStateChanged={onDragStateChanged}
443+
onChange={() => {}}
444+
/>
445+
</DndProvider>
432446
);
433447

434448
// Obtain a reference to the backend
435-
const backend = wrapper
436-
.instance()
437-
.getManager()
438-
.getBackend();
449+
const backend = manager.getBackend();
439450

440451
// Retrieve our DnD-wrapped node component type
441452
const wrappedNodeType = wrapper.find('ReactSortableTree').instance()

‎src/utils/dnd-manager.js

+1-10
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

+15-14
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

+14-12
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

+15-15
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)