feat: Add shouldCopyOnOutsideDrop prop to enable copying of nodes that leave the tree

When enabled, `shouldCopyOnOutsideDrop` makes nodes dragged out of the
tree leave behind a copy in their place.

Author: fritz-c

README.md

@@ -57,6 +57,7 @@ onMoveNode                | func           |                     |          | Ca
 onVisibilityToggle        | func           |                     |          | Called after children nodes collapsed or expanded. <div>`({ treeData: object[], node: object, expanded: bool }): void`</div>
 canDrag                   | func or bool   | `true`              |          | Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to `false` to disable dragging on all nodes. <div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool`</div>
 canDrop                   | func           |                     |          | Return false to prevent node from dropping in the given location. <div>`({ node: object, prevPath: number[] or string[], prevParent: object, prevTreeIndex: number, nextPath: number[] or string[], nextParent: object, nextTreeIndex: number}): bool`</div>
+canDrag                   | func or bool   | `true`              |          | Return false from callback to prevent node from dragging, by hiding the drag handle. Set prop to `false` to disable dragging on all nodes. <div>`({ node: object, path: number[] or string[], treeIndex: number, lowerSiblingCounts: number[], isSearchMatch: bool, isSearchFocus: bool }): bool`</div>
 reactVirtualizedListProps | object         |                     |          | Custom properties to hand to the [react-virtualized list](https://github.com/bvaughn/react-virtualized/blob/master/docs/List.md#prop-types)
 rowHeight                 | number or func | `62`                |          | Used by react-virtualized. Either a fixed row height (number) or a function that returns the height of a row given its index: `({ index: number }): number`
 slideRegionSize           | number         | `100`               |          | Size in px of the region near the edges that initiates scrolling on dragover.

examples/storybooks/tree-to-tree.js

@@ -11,13 +11,15 @@ class App extends Component {
         { title: 'node2' },
       ],
       treeData2: [{ title: 'node3' }, { title: 'node4' }],
+      shouldCopyOnOutsideDrop: false,
     };
   }
 
   render() {
     // Both trees need to share this same node type in their
     // `dndType` prop
     const externalNodeType = 'yourNodeType';
+    const { shouldCopyOnOutsideDrop } = this.state;
     return (
       <div>
         <div
@@ -32,6 +34,7 @@ class App extends Component {
             treeData={this.state.treeData1}
             onChange={treeData1 => this.setState({ treeData1 })}
             dndType={externalNodeType}
+            shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
           />
         </div>
 
@@ -47,10 +50,26 @@ class App extends Component {
             treeData={this.state.treeData2}
             onChange={treeData2 => this.setState({ treeData2 })}
             dndType={externalNodeType}
+            shouldCopyOnOutsideDrop={shouldCopyOnOutsideDrop}
           />
         </div>
 
         <div style={{ clear: 'both' }} />
+
+        <div>
+          <label htmlFor="should-copy" style={{ fontSize: '0.8rem' }}>
+            Enable node copy via <b>shouldCopyOnOutsideDrop</b>:
+            <input
+              type="checkbox"
+              id="should-copy"
+              value={shouldCopyOnOutsideDrop}
+              onChange={event =>
+                this.setState({
+                  shouldCopyOnOutsideDrop: event.target.checked,
+                })}
+            />
+          </label>
+        </div>
       </div>
     );
   }

src/react-sortable-tree.js

@@ -311,32 +311,55 @@ class ReactSortableTree extends Component {
   }
 
   endDrag(dropResult) {
-    // Drop was cancelled
-    if (!dropResult) {
+    const resetTree = () =>
       this.setState({
         draggingTreeData: null,
         swapFrom: null,
         swapLength: null,
         swapDepth: null,
         rows: this.getRows(this.props.treeData),
       });
+
+    // Drop was cancelled
+    if (!dropResult) {
+      resetTree();
     } else if (dropResult.treeId !== this.treeId) {
       // The node was dropped in an external drop target or tree
-      const { node, path: prevPath, treeIndex: prevTreeIndex } = dropResult;
-      const treeData = this.state.draggingTreeData || this.props.treeData;
-      this.props.onChange(treeData);
-
-        this.props.onMoveNode({
-          treeData,
+      const { node, path, treeIndex } = dropResult;
+      let shouldCopy = this.props.shouldCopyOnOutsideDrop;
+      if (typeof shouldCopy === 'function') {
+        shouldCopy = shouldCopy({
           node,
-          treeIndex: null,
-          path: null,
-          nextPath: null,
-          nextTreeIndex: null,
-          prevPath,
-          prevTreeIndex,
+          prevTreeIndex: treeIndex,
+          prevPath: path,
+        });
+      }
+
+      let treeData = this.state.draggingTreeData || this.props.treeData;
+
+      // If copying is enabled, a drop outside leaves behind a copy in the
+      //  source tree
+      if (shouldCopy) {
+        treeData = changeNodeAtPath({
+          treeData: this.props.treeData, // use treeData unaltered by the drag operation
+          path,
+          newNode: ({ node: copyNode }) => ({ ...copyNode }), // create a shallow copy of the node
+          getNodeKey: this.props.getNodeKey,
         });
       }
+
+      this.props.onChange(treeData);
+
+      this.props.onMoveNode({
+        treeData,
+        node,
+        treeIndex: null,
+        path: null,
+        nextPath: null,
+        nextTreeIndex: null,
+        prevPath: path,
+        prevTreeIndex: treeIndex,
+      });
     }
   }
 
@@ -644,6 +667,13 @@ ReactSortableTree.propTypes = {
   // Determine whether a node can be dropped based on its path and parents'.
   canDrop: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
 
+  // When true, or a callback returning true, dropping nodes to react-dnd
+  // drop targets outside of this tree will not remove them from this tree
+  shouldCopyOnOutsideDrop: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.bool,
+  ]),
+
   // Called after children nodes collapsed or expanded.
   onVisibilityToggle: PropTypes.func,
 
@@ -671,6 +701,7 @@ ReactSortableTree.defaultProps = {
   searchFocusOffset: null,
   searchMethod: null,
   searchQuery: null,
+  shouldCopyOnOutsideDrop: false,
   slideRegionSize: 100,
   style: {},
 };