From eaf8256261c21544acd9e4b8cb6c88def8a1f5db Mon Sep 17 00:00:00 2001
From: Minoru Okuyama <okuyama@analogic.jp>
Date: Mon, 31 Oct 2022 15:27:09 +0900
Subject: [PATCH] fix: nodes may not be draggable

---
 CHANGELOG.md               |  8 ++++++++
 package-lock.json          |  4 ++--
 package.json               |  2 +-
 src/Node.tsx               |  9 ++-------
 src/hooks/index.ts         |  1 +
 src/hooks/useDragHandle.ts | 22 ++++++++++++++++++++++
 6 files changed, 36 insertions(+), 10 deletions(-)
 create mode 100644 src/hooks/useDragHandle.ts

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 493338a..f1fea24 100644
--- a/CHANGELOG.md
+++ b/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_
diff --git a/package-lock.json b/package-lock.json
index 4bb6fe8..0b757c1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@minoru/react-dnd-treeview",
-  "version": "3.2.1",
+  "version": "3.2.2",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@minoru/react-dnd-treeview",
-      "version": "3.2.1",
+      "version": "3.2.2",
       "license": "MIT",
       "dependencies": {
         "dnd-multi-backend": "^7.0.0-alpha.4",
diff --git a/package.json b/package.json
index 426cd76..7a92a99 100644
--- a/package.json
+++ b/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",
diff --git a/src/Node.tsx b/src/Node.tsx
index e54dc84..1c59cca 100644
--- a/src/Node.tsx
+++ b/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);
diff --git a/src/hooks/index.ts b/src/hooks/index.ts
index 004888a..b871835 100644
--- a/src/hooks/index.ts
+++ b/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";
diff --git a/src/hooks/useDragHandle.ts b/src/hooks/useDragHandle.ts
new file mode 100644
index 0000000..29427b3
--- /dev/null
+++ b/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]);
+};