feat(tree-to-tree): Enable tree-to-tree drag-and-drop

Also makes implementation of external nodes more lightweight

BREAKING CHANGE: `dropCancelled` and `addNewItem` callbacks on
external nodes wrapped with `dndWrapExternalSource` are now ignored.
Drag-and-drop now works without them.

Author: fritz-c

examples/storybooks/__snapshots__/storyshots.test.js.snap

@@ -3,7 +3,6 @@ import { DragDropContext } from 'react-dnd';
 import HTML5Backend from 'react-dnd-html5-backend';
 import {
   SortableTreeWithoutDndContext as SortableTree,
-  insertNode,
   dndWrapExternalSource,
 } from '../../src';
 
@@ -47,22 +46,9 @@ class App extends Component {
         </div>
         <YourExternalNodeComponent
           node={{ title: 'External node' }}
-          addNewItem={newItem => {
-            const { treeData } = insertNode({
-              treeData: this.state.treeData,
-              newNode: newItem.node,
-              depth: newItem.depth,
-              minimumTreeIndex: newItem.minimumTreeIndex,
-              expandParent: true,
-              getNodeKey: ({ treeIndex }) => treeIndex,
-            });
-            this.setState({ treeData });
-          }}
+          addNewItem={() => {}}
           // Update the tree appearance post-drag
-          dropCancelled={() =>
-            this.setState(state => ({
-              treeData: state.treeData.concat(),
-            }))}
+          dropCancelled={() => {}}
         />
         ↑ drag this
       </div>

examples/storybooks/external-node.js

@@ -7,6 +7,7 @@ import BarebonesExample from './barebones';
 import AddRemoveExample from './add-remove';
 import ExternalNodeExample from './external-node';
 import TouchSupportExample from './touch-support';
+import TreeToTreeExample from './tree-to-tree';
 
 const wrapWithSource = (node, src) =>
   <div>
@@ -36,4 +37,7 @@ storiesOf('Advanced', module)
   )
   .add('Touch support (Experimental)', () =>
     wrapWithSource(<TouchSupportExample />, 'touch-support.js')
+  )
+  .add('Tree-to-tree dragging', () =>
+    wrapWithSource(<TreeToTreeExample />, 'tree-to-tree.js')
   );

examples/storybooks/index.js

@@ -0,0 +1,63 @@
+import React, { Component } from 'react';
+// import { DragDropContext } from 'react-dnd';
+// import HTML5Backend from 'react-dnd-html5-backend';
+import SortableTree from '../../src';
+// SortableTreeWithoutDndContext as SortableTree,
+// insertNode,
+// dndWrapExternalSource,
+
+const externalNodeType = 'yourNodeType';
+
+class App extends Component {
+  constructor(props) {
+    super(props);
+
+    this.state = {
+      treeData1: [
+        { title: 'node1', children: [{ title: 'Child node' }] },
+        { title: 'node2' },
+      ],
+      treeData2: [{ title: 'node3' }, { title: 'node4' }],
+    };
+  }
+
+  render() {
+    return (
+      <div>
+        <div
+          style={{
+            height: 350,
+            width: 350,
+            float: 'left',
+            border: 'solid black 1px',
+          }}
+        >
+          <SortableTree
+            treeData={this.state.treeData1}
+            onChange={treeData1 => this.setState({ treeData1 })}
+            dndType={externalNodeType}
+          />
+        </div>
+
+        <div
+          style={{
+            height: 350,
+            width: 350,
+            float: 'left',
+            border: 'solid black 1px',
+          }}
+        >
+          <SortableTree
+            treeData={this.state.treeData2}
+            onChange={treeData2 => this.setState({ treeData2 })}
+            dndType={externalNodeType}
+          />
+        </div>
+
+        <div style={{ clear: 'both' }} />
+      </div>
+    );
+  }
+}
+
+export default App;