feat: update react-dnd

frontend-collective · Sep 13, 2019 · 173f90a · 173f90a
1 parent 420d602
commit 173f90a
Show file tree

Hide file tree

Showing 8 changed files with 156 additions and 101 deletions.
diff --git a/package.json b/package.json
@@ -63,8 +63,8 @@
     "frontend-collective-react-dnd-scrollzone": "^1.0.2",
     "lodash.isequal": "^4.5.0",
     "prop-types": "^15.6.1",
-    "react-dnd": "^7.3.0",
-    "react-dnd-html5-backend": "^7.0.1",
+    "react-dnd": "^9.3.4",
+    "react-dnd-html5-backend": "^9.3.4",
     "react-lifecycles-compat": "^3.0.4",
     "react-sortable-tree": "^2.6.0",
     "react-virtualized": "^9.19.1"
@@ -106,8 +106,8 @@
     "prettier": "^1.13.3",
     "react": "^16.3.0",
     "react-addons-shallow-compare": "^15.6.2",
-    "react-dnd-test-backend": "^7.0.1",
-    "react-dnd-touch-backend": "^0.6.0",
+    "react-dnd-test-backend": "^9.3.4",
+    "react-dnd-touch-backend": "^9.3.4",
     "react-dom": "^16.3.0",
     "react-hot-loader": "^4.3.0",
     "react-sortable-tree-theme-file-explorer": "^1.1.2",

diff --git a/src/react-sortable-tree.js b/src/react-sortable-tree.js
@@ -7,7 +7,8 @@ import withScrolling, {
   createVerticalStrength,
   createHorizontalStrength,
 } from 'frontend-collective-react-dnd-scrollzone';
-import { DragDropContextConsumer } from 'react-dnd';
+import { DndProvider, DndContext } from 'react-dnd';
+import HTML5Backend from 'react-dnd-html5-backend';
 import { polyfill } from 'react-lifecycles-compat';
 import 'react-virtualized/styles.css';
 import TreeNode from './tree-node';
@@ -936,18 +937,24 @@ ReactSortableTree.defaultProps = {
 polyfill(ReactSortableTree);
 
 const SortableTreeWithoutDndContext = props => (
-  <DragDropContextConsumer>
+  <DndContext.Consumer>
     {({ dragDropManager }) =>
       dragDropManager === undefined ? null : (
         <ReactSortableTree {...props} dragDropManager={dragDropManager} />
       )
     }
-  </DragDropContextConsumer>
+  </DndContext.Consumer>
 );
 
+const SortableTree = props => (
+  <DndProvider backend={HTML5Backend}>
+    <SortableTreeWithoutDndContext {...props}/>
+  </DndProvider>
+)
+
 // Export the tree component without the react-dnd DragDropContext,
 // for when component is used with other components using react-dnd.
 // see: https://github.com/gaearon/react-dnd/issues/186
 export { SortableTreeWithoutDndContext };
 
-export default DndManager.wrapRoot(SortableTreeWithoutDndContext);
+export default SortableTree;
diff --git a/src/react-sortable-tree.test.js b/src/react-sortable-tree.test.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import renderer from 'react-test-renderer';
 import { mount } from 'enzyme';
 import { List } from 'react-virtualized';
-import { DragDropContext } from 'react-dnd';
+import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import TouchBackend from 'react-dnd-touch-backend';
 import SortableTree, {
@@ -401,34 +401,39 @@ describe('<SortableTree />', () => {
   });
 
   it('loads using SortableTreeWithoutDndContext', () => {
-    const HTML5Wrapped = DragDropContext(HTML5Backend)(
-      SortableTreeWithoutDndContext
-    );
-    const TouchWrapped = DragDropContext(TouchBackend)(
-      SortableTreeWithoutDndContext
-    );
-
     expect(
-      mount(<HTML5Wrapped treeData={[{ title: 'a' }]} onChange={() => {}} />)
+      mount(
+        <DndProvider backend={HTML5Backend}>
+          <SortableTreeWithoutDndContext
+            treeData={[{ title: 'a' }]}
+            onChange={() => {}}
+          />
+        </DndProvider>
+      )
     ).toBeDefined();
     expect(
-      mount(<TouchWrapped treeData={[{ title: 'a' }]} onChange={() => {}} />)
+      mount(
+        <DndProvider backend={TouchBackend}>
+          <SortableTreeWithoutDndContext
+            treeData={[{ title: 'a' }]}
+            onChange={() => {}}
+          />
+        </DndProvider>
+      )
     ).toBeDefined();
   });
 
   it('loads using SortableTreeWithoutDndContext', () => {
-    const TestWrapped = DragDropContext(HTML5Backend)(
-      SortableTreeWithoutDndContext
-    );
-
     const onDragStateChanged = jest.fn();
     const treeData = [{ title: 'a' }, { title: 'b' }];
     const wrapper = mount(
-      <TestWrapped
-        treeData={treeData}
-        onDragStateChanged={onDragStateChanged}
-        onChange={() => {}}
-      />
+      <DndProvider backend={HTML5Backend}>
+        <SortableTreeWithoutDndContext
+          treeData={treeData}
+          onDragStateChanged={onDragStateChanged}
+          onChange={() => {}}
+        />
+      </DndProvider>
     );
 
     // Obtain a reference to the backend

diff --git a/src/utils/dnd-manager.js b/src/utils/dnd-manager.js
@@ -1,9 +1,4 @@
-import {
-  DragDropContext as dragDropContext,
-  DragSource as dragSource,
-  DropTarget as dropTarget,
-} from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { DragSource as dragSource, DropTarget as dropTarget } from 'react-dnd';
 import { findDOMNode } from 'react-dom';
 import { getDepth } from './tree-data-utils';
 import { memoizedInsertNode } from './memoized-tree-data-utils';
@@ -13,10 +8,6 @@ export default class DndManager {
     this.treeRef = treeRef;
   }
 
-  static wrapRoot(el) {
-    return dragDropContext(HTML5Backend)(el);
-  }
-
   get startDrag() {
     return this.treeRef.startDrag;
   }

diff --git a/stories/drag-out-to-remove.js b/stories/drag-out-to-remove.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { DragDropContext, DropTarget } from 'react-dnd';
+import { DndProvider, DropTarget } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { SortableTreeWithoutDndContext as SortableTree } from '../src';
 // In your own app, you would need to use import styles once in the app
@@ -54,7 +54,7 @@ const TrashAreaComponent = DropTarget(
   trashAreaCollect
 )(trashAreaBaseComponent);
 
-class UnwrappedApp extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
 
@@ -70,20 +70,21 @@ class UnwrappedApp extends Component {
 
   render() {
     return (
-      <div>
-        <TrashAreaComponent>
-          <div style={{ height: 250 }}>
-            <SortableTree
-              treeData={this.state.treeData}
-              onChange={treeData => this.setState({ treeData })}
-              dndType={trashAreaType}
-            />
-          </div>
-        </TrashAreaComponent>
-      </div>
+      <DndProvider backend={HTML5Backend}>
+        <div>
+          <TrashAreaComponent>
+            <div style={{ height: 250 }}>
+              <SortableTree
+                treeData={this.state.treeData}
+                onChange={treeData => this.setState({ treeData })}
+                dndType={trashAreaType}
+              />
+            </div>
+          </TrashAreaComponent>
+        </div>
+      </DndProvider>
     );
   }
 }
 
-const App = DragDropContext(HTML5Backend)(UnwrappedApp);
 export default App;
diff --git a/stories/external-node.js b/stories/external-node.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/no-multi-comp */
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { DragDropContext, DragSource } from 'react-dnd';
+import { DndProvider, DragSource } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { SortableTreeWithoutDndContext as SortableTree } from '../src';
 // In your own app, you would need to use import styles once in the app
@@ -55,7 +55,7 @@ const YourExternalNodeComponent = DragSource(
   externalNodeCollect
 )(externalNodeBaseComponent);
 
-class UnwrappedApp extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
 
@@ -66,19 +66,21 @@ class UnwrappedApp extends Component {
 
   render() {
     return (
-      <div>
-        <div style={{ height: 300 }}>
-          <SortableTree
-            treeData={this.state.treeData}
-            onChange={treeData => this.setState({ treeData })}
-            dndType={externalNodeType}
-          />
+      <DndProvider backend={HTML5Backend}>
+        <div>
+          <div style={{ height: 300 }}>
+            <SortableTree
+              treeData={this.state.treeData}
+              onChange={treeData => this.setState({ treeData })}
+              dndType={externalNodeType}
+            />
+          </div>
+          <YourExternalNodeComponent node={{ title: 'Baby Rabbit' }} />← drag
+          this
         </div>
-        <YourExternalNodeComponent node={{ title: 'Baby Rabbit' }} />← drag this
-      </div>
+      </DndProvider>
     );
   }
 }
 
-const App = DragDropContext(HTML5Backend)(UnwrappedApp);
 export default App;
diff --git a/stories/touch-support.js b/stories/touch-support.js
@@ -1,6 +1,6 @@
 /* eslint-disable import/no-extraneous-dependencies */
 import React, { Component } from 'react';
-import { DragDropContext } from 'react-dnd';
+import { DndProvider } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import TouchBackend from 'react-dnd-touch-backend';
 import { SortableTreeWithoutDndContext as SortableTree } from '../src';
@@ -9,8 +9,9 @@ import { SortableTreeWithoutDndContext as SortableTree } from '../src';
 
 // https://stackoverflow.com/a/4819886/1601953
 const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
+const dndBackend = isTouchDevice ? TouchBackend : HTML5Backend;
 
-class UnwrappedApp extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
 
@@ -23,23 +24,22 @@ class UnwrappedApp extends Component {
 
   render() {
     return (
-      <div>
-        <span>
-          This is {!isTouchDevice && 'not '}a touch-supporting browser
-        </span>
+      <DndProvider backend={dndBackend}>
+        <div>
+          <span>
+            This is {!isTouchDevice && 'not '}a touch-supporting browser
+          </span>
 
-        <div style={{ height: 300 }}>
-          <SortableTree
-            treeData={this.state.treeData}
-            onChange={treeData => this.setState({ treeData })}
-          />
+          <div style={{ height: 300 }}>
+            <SortableTree
+              treeData={this.state.treeData}
+              onChange={treeData => this.setState({ treeData })}
+            />
+          </div>
         </div>
-      </div>
+      </DndProvider>
     );
   }
 }
 
-const App = DragDropContext(isTouchDevice ? TouchBackend : HTML5Backend)(
-  UnwrappedApp
-);
 export default App;