refactor: Move dnd utils to manager that can access tree settings directly

Author: fritz-c

src/node-renderer-default.js

@@ -38,13 +38,8 @@ class NodeRendererDefault extends Component {
       className,
       style,
       didDrop,
-      /* eslint-disable no-unused-vars */
-      isOver: _isOver, // Not needed, but preserved for other renderers
-      parentNode: _parentNode, // Needed for drag-and-drop utils
-      endDrag: _endDrag, // Needed for drag-and-drop utils
-      startDrag: _startDrag, // Needed for drag-and-drop utils
-      treeId: _treeId, // Needed for drag-and-drop utils
-      /* eslint-enable no-unused-vars */
+      isOver, // Not needed, but preserved for other renderers
+      parentNode, // Needed for dndManager
       ...otherProps
     } = this.props;
     const nodeTitle = title || node.title;
@@ -223,10 +218,7 @@ NodeRendererDefault.propTypes = {
   // Drag source
   connectDragPreview: PropTypes.func.isRequired,
   connectDragSource: PropTypes.func.isRequired,
-  parentNode: PropTypes.shape({}), // Needed for drag-and-drop utils
-  startDrag: PropTypes.func.isRequired, // Needed for drag-and-drop utils
-  endDrag: PropTypes.func.isRequired, // Needed for drag-and-drop utils
-  treeId: PropTypes.string.isRequired, // Needed for drag-and-drop utils
+  parentNode: PropTypes.shape({}), // Needed for dndManager
   isDragging: PropTypes.bool.isRequired,
   didDrop: PropTypes.bool.isRequired,
   draggedNode: PropTypes.shape({}),

src/react-sortable-tree.js

@@ -32,12 +32,7 @@ import {
   defaultGetNodeKey,
   defaultSearchMethod,
 } from './utils/default-handlers';
-import {
-  dndWrapRoot,
-  dndWrapSource,
-  dndWrapTarget,
-  dndWrapPlaceholder,
-} from './utils/drag-and-drop-utils';
+import DndManager from './utils/dnd-manager';
 import styles from './react-sortable-tree.scss';
 
 let treeIdCounter = 1;
@@ -54,16 +49,17 @@ class ReactSortableTree extends Component {
       treeData,
     } = props;
 
+    this.dndManager = new DndManager(this);
+
     // Wrapping classes for use with react-dnd
     this.treeId = `rst__${treeIdCounter}`;
     treeIdCounter += 1;
     this.dndType = dndType || this.treeId;
-    this.nodeContentRenderer = dndWrapSource(nodeContentRenderer, this.dndType);
-    this.treePlaceholderRenderer = dndWrapPlaceholder(
-      TreePlaceholder,
-      this.dndType
+    this.nodeContentRenderer = this.dndManager.wrapSource(nodeContentRenderer);
+    this.treePlaceholderRenderer = this.dndManager.wrapPlaceholder(
+      TreePlaceholder
     );
-    this.treeNodeRenderer = dndWrapTarget(TreeNode, this.dndType);
+    this.treeNodeRenderer = this.dndManager.wrapTarget(TreeNode);
 
     // Prepare scroll-on-drag options for this list
     if (isVirtualized) {
@@ -401,10 +397,7 @@ class ReactSortableTree extends Component {
   ) {
     const {
       canDrag,
-      canDrop,
       generateNodeProps,
-      getNodeKey,
-      maxDepth,
       scaffoldBlockPxWidth,
       searchFocusOffset,
     } = this.props;
@@ -434,7 +427,6 @@ class ReactSortableTree extends Component {
       scaffoldBlockPxWidth,
       node,
       path,
-      treeId: this.treeId,
     };
 
     return (
@@ -443,24 +435,16 @@ class ReactSortableTree extends Component {
         key={nodeKey}
         listIndex={listIndex}
         getPrevRow={getPrevRow}
-        treeData={this.state.draggingTreeData || this.state.treeData}
-        getNodeKey={getNodeKey}
-        customCanDrop={canDrop}
         lowerSiblingCounts={lowerSiblingCounts}
         swapFrom={this.state.swapFrom}
         swapLength={this.state.swapLength}
         swapDepth={this.state.swapDepth}
-        maxDepth={maxDepth}
-        dragHover={this.dragHover}
-        drop={this.drop}
         {...sharedProps}
       >
         <NodeContentRenderer
           parentNode={parentNode}
           isSearchMatch={isSearchMatch}
           isSearchFocus={isSearchFocus}
-          startDrag={this.startDrag}
-          endDrag={this.endDrag}
           canDrag={rowCanDrag}
           toggleChildrenVisibility={this.toggleChildrenVisibility}
           {...sharedProps}
@@ -603,7 +587,7 @@ ReactSortableTree.propTypes = {
   scaffoldBlockPxWidth: PropTypes.number,
 
   // Maximum depth nodes can be inserted at. Defaults to infinite.
-  maxDepth: PropTypes.number,
+  maxDepth: PropTypes.number, // eslint-disable-line react/no-unused-prop-types
 
   // The method used to search nodes.
   // Defaults to a function that uses the `searchQuery` string to search for nodes with
@@ -658,7 +642,7 @@ ReactSortableTree.propTypes = {
   canDrag: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]),
 
   // Determine whether a node can be dropped based on its path and parents'.
-  canDrop: PropTypes.func,
+  canDrop: PropTypes.func, // eslint-disable-line react/no-unused-prop-types
 
   // Called after children nodes collapsed or expanded.
   onVisibilityToggle: PropTypes.func,
@@ -700,4 +684,4 @@ ReactSortableTree.contextTypes = {
 // see: https://github.com/gaearon/react-dnd/issues/186
 export { ReactSortableTree as SortableTreeWithoutDndContext };
 
-export default dndWrapRoot(ReactSortableTree);
+export default DndManager.wrapRoot(ReactSortableTree);

src/tree-node.js

@@ -17,16 +17,9 @@ class TreeNode extends Component {
       draggedNode,
       canDrop,
       treeIndex,
-      customCanDrop, // Delete from otherProps
-      dragHover, // Delete from otherProps
-      getNodeKey, // Delete from otherProps
       getPrevRow, // Delete from otherProps
-      maxDepth, // Delete from otherProps
       node, // Delete from otherProps
       path, // Delete from otherProps
-      treeData, // Delete from otherProps
-      treeId, // Delete from otherProps
-      drop, // Delete from otherProps
       ...otherProps
     } = this.props;
 
@@ -147,17 +140,10 @@ TreeNode.defaultProps = {
   swapLength: null,
   canDrop: false,
   draggedNode: null,
-  customCanDrop: null,
-  maxDepth: null,
-  treeData: null,
 };
 
 TreeNode.propTypes = {
   treeIndex: PropTypes.number.isRequired,
-  node: PropTypes.shape({}).isRequired,
-  path: PropTypes.arrayOf(
-    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
-  ).isRequired,
   swapFrom: PropTypes.number,
   swapDepth: PropTypes.number,
   swapLength: PropTypes.number,
@@ -173,14 +159,12 @@ TreeNode.propTypes = {
   canDrop: PropTypes.bool,
   draggedNode: PropTypes.shape({}),
 
-  customCanDrop: PropTypes.func, // used in drag-and-drop-utils
-  dragHover: PropTypes.func.isRequired, // used in drag-and-drop-utils
-  getNodeKey: PropTypes.func.isRequired, // used in drag-and-drop-utils
-  getPrevRow: PropTypes.func.isRequired, // used in drag-and-drop-utils
-  drop: PropTypes.func.isRequired, // used in drag-and-drop-utils
-  maxDepth: PropTypes.number, // used in drag-and-drop-utils
-  treeData: PropTypes.arrayOf(PropTypes.object), // used in drag-and-drop-utils
-  treeId: PropTypes.string.isRequired, // used in drag-and-drop-utils
+  // used in dndManager
+  getPrevRow: PropTypes.func.isRequired,
+  node: PropTypes.shape({}).isRequired,
+  path: PropTypes.arrayOf(
+    PropTypes.oneOfType([PropTypes.string, PropTypes.number])
+  ).isRequired,
 };
 
 export default TreeNode;