Update react-sortable-tree to compatible with react-dnd v9

package.json

@@ -62,17 +62,17 @@
   "dependencies": {
     "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",
+    "prop-types": "^15.7.2",
+    "react-dnd": "^9.0.0",
+    "react-dnd-html5-backend": "^9.0.0",
     "react-lifecycles-compat": "^3.0.4",
     "react-sortable-tree": "^2.6.0",
     "react-virtualized": "^9.19.1"
   },
   "peerDependencies": {
-    "react": "^16.3.0",
-    "react-dnd": "^7.3.0",
-    "react-dom": "^16.3.0"
+    "react": "^16.8.6",
+    "react-dnd": "^9.0.0",
+    "react-dom": "^16.8.6"
   },
   "devDependencies": {
     "@babel/cli": "^7.1.5",
@@ -104,11 +104,11 @@
     "jest-enzyme": "^7.0.1",
     "parcel-bundler": "^1.11.0",
     "prettier": "^1.13.3",
-    "react": "^16.3.0",
+    "react": "^16.8.6",
     "react-addons-shallow-compare": "^15.6.2",
-    "react-dnd-test-backend": "^7.0.1",
-    "react-dnd-touch-backend": "^0.6.0",
-    "react-dom": "^16.3.0",
+    "react-dnd-test-backend": "^9.0.0",
+    "react-dnd-touch-backend": "^9.0.0",
+    "react-dom": "^16.8.6",
     "react-hot-loader": "^4.3.0",
     "react-sortable-tree-theme-file-explorer": "^1.1.2",
     "react-test-renderer": "^16.4.0",

src/react-sortable-tree.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, useContext } from 'react';
 import PropTypes from 'prop-types';
 import { AutoSizer, List } from 'react-virtualized';
 import isEqual from 'lodash.isequal';
@@ -7,7 +7,7 @@ import withScrolling, {
   createVerticalStrength,
   createHorizontalStrength,
 } from 'frontend-collective-react-dnd-scrollzone';
-import { DragDropContextConsumer } from 'react-dnd';
+import { DndContext } from 'react-dnd';
 import { polyfill } from 'react-lifecycles-compat';
 import 'react-virtualized/styles.css';
 import TreeNode from './tree-node';
@@ -935,15 +935,12 @@ ReactSortableTree.defaultProps = {
 
 polyfill(ReactSortableTree);
 
-const SortableTreeWithoutDndContext = props => (
-  <DragDropContextConsumer>
-    {({ dragDropManager }) =>
-      dragDropManager === undefined ? null : (
-        <ReactSortableTree {...props} dragDropManager={dragDropManager} />
-      )
-    }
-  </DragDropContextConsumer>
-);
+const SortableTreeWithoutDndContext = props => {
+  const { dragDropManager } = useContext(DndContext);
+  return (
+    <ReactSortableTree {...props} dragDropManager={dragDropManager} />
+  );
+};
 
 // Export the tree component without the react-dnd DragDropContext,
 // for when component is used with other components using react-dnd.

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,35 +401,28 @@ 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}>
+        <TouchWrapped 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
+    const wrapper = mount(<DndProvider backend={HTML5Backend}>
+      <SortableTreeWithoutDndContext
         treeData={treeData}
         onDragStateChanged={onDragStateChanged}
         onChange={() => {}}
       />
-    );
+    </DndProvider>);
 
     // Obtain a reference to the backend
     const backend = wrapper

src/utils/dnd-manager.js

@@ -1,7 +1,7 @@
 import {
-  DragDropContext as dragDropContext,
   DragSource as dragSource,
   DropTarget as dropTarget,
+  DndProvider,
 } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import { findDOMNode } from 'react-dom';
@@ -13,8 +13,12 @@ export default class DndManager {
     this.treeRef = treeRef;
   }
 
-  static wrapRoot(el) {
-    return dragDropContext(HTML5Backend)(el);
+  static wrapRoot(Comp) {
+    return ((props) => (
+      <DndProvider backend={HTML5Backend}>
+        <Comp {...props} />
+      </DndProvider>
+    ));
   }
 
   get startDrag() {

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 { DropTarget, DndProvider } 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);
 
@@ -69,7 +69,7 @@ class UnwrappedApp extends Component {
   }
 
   render() {
-    return (
+    return (<DndProvider backend={HTML5Backend}>
       <div>
         <TrashAreaComponent>
           <div style={{ height: 250 }}>
@@ -81,9 +81,8 @@ class UnwrappedApp extends Component {
           </div>
         </TrashAreaComponent>
       </div>
-    );
+    </DndProvider>);
   }
 }
 
-const App = DragDropContext(HTML5Backend)(UnwrappedApp);
 export default App;

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 { DragSource, DndProvider } 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);
 
@@ -65,7 +65,7 @@ class UnwrappedApp extends Component {
   }
 
   render() {
-    return (
+    return (<DndProvider backend={HTML5Backend}>
       <div>
         <div style={{ height: 300 }}>
           <SortableTree
@@ -76,9 +76,8 @@ class UnwrappedApp extends Component {
         </div>
         <YourExternalNodeComponent node={{ title: 'Baby Rabbit' }} />← drag this
       </div>
-    );
+    </DndProvider>);
   }
 }
 
-const App = DragDropContext(HTML5Backend)(UnwrappedApp);
 export default App;

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';
@@ -10,7 +10,7 @@ import { SortableTreeWithoutDndContext as SortableTree } from '../src';
 // https://stackoverflow.com/a/4819886/1601953
 const isTouchDevice = !!('ontouchstart' in window || navigator.maxTouchPoints);
 
-class UnwrappedApp extends Component {
+class App extends Component {
   constructor(props) {
     super(props);
 
@@ -22,7 +22,7 @@ class UnwrappedApp extends Component {
   }
 
   render() {
-    return (
+    return (<DndProvider backend={isTouchDevice ? TouchBackend : HTML5Backend}>
       <div>
         <span>
           This is {!isTouchDevice && 'not '}a touch-supporting browser
@@ -35,11 +35,8 @@ class UnwrappedApp extends Component {
           />
         </div>
       </div>
-    );
+    </DndProvider>);
   }
 }
 
-const App = DragDropContext(isTouchDevice ? TouchBackend : HTML5Backend)(
-  UnwrappedApp
-);
 export default App;