Bump version

Author: nosferatu500

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nosferatu500/react-sortable-tree",
-  "version": "4.0.0-beta.3",
+  "version": "4.0.0-beta.4",
   "description": "Drag-and-drop sortable component for nested data and hierarchies",
   "main": "./index.js",
   "types": "./index.d.ts",
@@ -135,14 +135,13 @@
     "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@babel/preset-env": "^7.15.8",
     "@babel/types": "^7.15.6",
-    "@nosferatu500/theme-file-explorer": "^3.0.9",
     "@rollup/plugin-babel": "^5.3.0",
     "@rollup/plugin-node-resolve": "^13.0.5",
     "@rollup/plugin-typescript": "^8.2.5",
-    "@storybook/addon-storyshots": "^6.3.11",
-    "@storybook/addons": "^6.3.11",
-    "@storybook/react": "^6.3.11",
-    "@storybook/theming": "^6.3.11",
+    "@storybook/addon-storyshots": "^6.3.12",
+    "@storybook/addons": "^6.3.12",
+    "@storybook/react": "^6.3.12",
+    "@storybook/theming": "^6.3.12",
     "@testing-library/react": "^12.1.2",
     "@types/babel-plugin-macros": "^2.8.5",
     "@types/enzyme": "^3.10.9",
@@ -162,7 +161,7 @@
     "eslint": "^8.0.1",
     "eslint-config-prettier": "^8.3.0",
     "eslint-plugin-import": "^2.25.2",
-    "eslint-plugin-jest": "^25.0.5",
+    "eslint-plugin-jest": "^25.0.6",
     "eslint-plugin-prettier": "^4.0.0",
     "eslint-plugin-react": "^7.26.1",
     "jest": "^27.2.5",

src/react-sortable-tree.tsx

@@ -22,7 +22,7 @@ import {
   defaultGetNodeKey,
   defaultSearchMethod,
 } from './utils/default-handlers'
-import DndManager from './utils/dnd-manager'
+import { wrapPlaceholder, wrapSource, wrapTarget } from './utils/dnd-manager'
 import { slideRows } from './utils/generic-utils'
 import {
   memoizedGetDescendantCount,
@@ -78,20 +78,26 @@ class ReactSortableTree extends Component {
     const { dndType, nodeContentRenderer, treeNodeRenderer, slideRegionSize } =
       mergeTheme(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 = this.dndManager.wrapSource(nodeContentRenderer)
-    this.treePlaceholderRenderer =
-      this.dndManager.wrapPlaceholder(TreePlaceholder)
-    this.treeNodeRenderer = this.dndManager.wrapTarget(treeNodeRenderer)
+    this.nodeContentRenderer = wrapSource(
+      nodeContentRenderer,
+      this.startDrag,
+      this.endDrag,
+      this.dndType
+    )
+    this.treePlaceholderRenderer = wrapPlaceholder(
+      TreePlaceholder,
+      this.treeId,
+      this.drop,
+      this.dndType
+    )
 
     // Prepare scroll-on-drag options for this list
     this.scrollZoneVirtualList = (createScrollingComponent || withScrolling)(
-      React.forwardRef((props) => {
+      React.forwardRef((props, ref) => {
         const { dragDropManager, ...otherProps } = props
         return <Virtuoso ref={this.listRef} {...otherProps} />
       })
@@ -117,6 +123,20 @@ class ReactSortableTree extends Component {
       },
     }
 
+    this.treeNodeRenderer = wrapTarget(
+      treeNodeRenderer,
+      this.canNodeHaveChildren,
+      this.treeId,
+      this.props.maxDepth,
+      this.props.canDrop,
+      this.drop,
+      this.dragHover,
+      this.dndType,
+      this.state.draggingTreeData,
+      this.props.treeData,
+      this.props.getNodeKey
+    )
+
     this.toggleChildrenVisibility = this.toggleChildrenVisibility.bind(this)
     this.moveNode = this.moveNode.bind(this)
     this.startDrag = this.startDrag.bind(this)
@@ -351,7 +371,7 @@ class ReactSortableTree extends Component {
     return newState
   }
 
-  startDrag({ path }) {
+  startDrag = ({ path }) => {
     this.setState((prevState) => {
       const {
         treeData: draggingTreeData,
@@ -373,11 +393,11 @@ class ReactSortableTree extends Component {
     })
   }
 
-  dragHover({
+  dragHover = ({
     node: draggedNode,
     depth: draggedDepth,
     minimumTreeIndex: draggedMinimumTreeIndex,
-  }) {
+  }) => {
     // Ignore this hover if it is at the same position as the last hover
     if (
       this.state.draggedDepth === draggedDepth &&
@@ -421,7 +441,7 @@ class ReactSortableTree extends Component {
     })
   }
 
-  endDrag(dropResult) {
+  endDrag = (dropResult) => {
     const { instanceProps } = this.state
 
     const resetTree = () =>
@@ -476,11 +496,11 @@ class ReactSortableTree extends Component {
     }
   }
 
-  drop(dropResult) {
+  drop = (dropResult) => {
     this.moveNode(dropResult)
   }
 
-  canNodeHaveChildren(node) {
+  canNodeHaveChildren = (node) => {
     const { canNodeHaveChildren } = this.props
     if (canNodeHaveChildren) {
       return canNodeHaveChildren(node)