Merge pull request #163 from minop1205/fix-162-handle

fix: nodes may not be draggable

CHANGELOG.md

@@ -1,5 +1,13 @@
 # Change Log
 
+## 3.2.2
+
+_Oct 31, 2022_
+
+### Fixed
+
+- Nodes may not be draggable.
+
 ## 3.2.1
 
 _Oct 19, 2022_

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@minoru/react-dnd-treeview",
   "description": "A draggable / droppable React-based treeview component.",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "license": "MIT",
   "repository": {
     "type": "git",

src/Node.tsx

@@ -12,6 +12,7 @@ import {
   useDragNode,
   useDropNode,
   useDragControl,
+  useDragHandle,
 } from "./hooks";
 import { PlaceholderContext } from "./providers";
 import { NodeModel, RenderParams } from "./types";
@@ -36,13 +37,7 @@ export const Node = <T,>(props: Props): ReactElement | null => {
   const [isDragging, drag, preview] = useDragNode(item, containerRef);
   const [isOver, dragSource, drop] = useDropNode(item, containerRef);
 
-  useEffect(() => {
-    if (handleRef.current) {
-      drag(handleRef);
-    } else {
-      drag(containerRef);
-    }
-  }, [handleRef.current]);
+  useDragHandle(containerRef, handleRef, drag);
 
   if (isDroppable(dragSource?.id, props.id, treeContext)) {
     drop(containerRef);

src/hooks/index.ts

@@ -7,3 +7,4 @@ export { useOpenIdsHelper } from "./useOpenIdsHelper";
 export { useTreeDragLayer } from "./useTreeDragLayer";
 export { useTreeContext } from "./useTreeContext";
 export { useContainerClassName } from "./useContainerClassName";
+export { useDragHandle } from "./useDragHandle";

src/hooks/useDragHandle.ts

@@ -0,0 +1,22 @@
+import { useEffect, RefObject } from "react";
+import { DragElementWrapper, DragSourceOptions } from "react-dnd";
+
+export const useDragHandle = (
+  containerRef: RefObject<HTMLElement>,
+  handleRef: RefObject<any>,
+  drag: DragElementWrapper<DragSourceOptions>
+) => {
+  if (handleRef.current) {
+    drag(handleRef);
+  } else {
+    drag(containerRef);
+  }
+
+  useEffect(() => {
+    if (handleRef.current) {
+      drag(handleRef);
+    } else {
+      drag(containerRef);
+    }
+  }, [handleRef.current]);
+};