react-arborist 3.10.2 → 3.10.3

package/dist/main/dnd/drag-hook.d.ts

@@ -2,4 +2,5 @@ import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeProps } from "../types/tree-props";
 export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
+export declare function canDragNode<T>(node: NodeApi<T>): boolean;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

package/dist/main/dnd/drag-hook.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.dragTypeForNode = dragTypeForNode;
+exports.canDragNode = canDragNode;
 exports.useDragHook = useDragHook;
 const react_1 = require("react");
 const react_dnd_1 = require("react-dnd");
@@ -14,11 +15,17 @@ function dragTypeForNode(dragType, node) {
         return dragType(node);
     return dragType !== null && dragType !== void 0 ? dragType : "NODE";
 }
+/* A node can start a drag only when it's draggable and not currently being
+   renamed. Without the editing guard, dragging inside the rename input would
+   pick the row up and move it (issue #195). */
+function canDragNode(node) {
+    return node.isDraggable && !node.isEditing;
+}
 function useDragHook(node) {
     const tree = (0, context_1.useTreeApi)();
     const ids = tree.selectedIds;
     const [_, ref, preview] = (0, react_dnd_1.useDrag)(() => ({
-        canDrag: () => node.isDraggable,
+        canDrag: () => canDragNode(node),
         type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
             // This is fired once at the beginning of a drag operation

package/dist/main/dnd/drag-hook.test.js

@@ -17,3 +17,17 @@ test("resolves a per-node dragType function against the node", () => {
     expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
     expect((0, drag_hook_1.dragTypeForNode)(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
 });
+/* canDragNode only reads the isDraggable/isEditing flags, so a minimal stub
+   stands in for a real NodeApi. */
+function draggableNode(flags) {
+    return flags;
+}
+test("a draggable node that isn't being edited can drag", () => {
+    expect((0, drag_hook_1.canDragNode)(draggableNode({ isDraggable: true, isEditing: false }))).toBe(true);
+});
+test("a non-draggable node can't drag", () => {
+    expect((0, drag_hook_1.canDragNode)(draggableNode({ isDraggable: false, isEditing: false }))).toBe(false);
+});
+test("a node being renamed can't drag, even when draggable (#195)", () => {
+    expect((0, drag_hook_1.canDragNode)(draggableNode({ isDraggable: true, isEditing: true }))).toBe(false);
+});

package/dist/module/dnd/drag-hook.d.ts

@@ -2,4 +2,5 @@ import { ConnectDragSource } from "react-dnd";
 import { NodeApi } from "../interfaces/node-api";
 import { TreeProps } from "../types/tree-props";
 export declare function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: NodeApi<T>): string;
+export declare function canDragNode<T>(node: NodeApi<T>): boolean;
 export declare function useDragHook<T>(node: NodeApi<T>): ConnectDragSource;

package/dist/module/dnd/drag-hook.js

@@ -10,11 +10,17 @@ export function dragTypeForNode(dragType, node) {
         return dragType(node);
     return dragType !== null && dragType !== void 0 ? dragType : "NODE";
 }
+/* A node can start a drag only when it's draggable and not currently being
+   renamed. Without the editing guard, dragging inside the rename input would
+   pick the row up and move it (issue #195). */
+export function canDragNode(node) {
+    return node.isDraggable && !node.isEditing;
+}
 export function useDragHook(node) {
     const tree = useTreeApi();
     const ids = tree.selectedIds;
     const [_, ref, preview] = useDrag(() => ({
-        canDrag: () => node.isDraggable,
+        canDrag: () => canDragNode(node),
         type: dragTypeForNode(tree.props.dragType, node),
         item: () => {
             // This is fired once at the beginning of a drag operation

package/dist/module/dnd/drag-hook.test.js

@@ -1,4 +1,4 @@
-import { dragTypeForNode } from "./drag-hook";
+import { canDragNode, dragTypeForNode } from "./drag-hook";
 /* dragTypeForNode only reads node.data when dragType is a function, so a
    minimal stub stands in for a real NodeApi. */
 function nodeWith(data) {
@@ -15,3 +15,17 @@ test("resolves a per-node dragType function against the node", () => {
     expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
     expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
 });
+/* canDragNode only reads the isDraggable/isEditing flags, so a minimal stub
+   stands in for a real NodeApi. */
+function draggableNode(flags) {
+    return flags;
+}
+test("a draggable node that isn't being edited can drag", () => {
+    expect(canDragNode(draggableNode({ isDraggable: true, isEditing: false }))).toBe(true);
+});
+test("a non-draggable node can't drag", () => {
+    expect(canDragNode(draggableNode({ isDraggable: false, isEditing: false }))).toBe(false);
+});
+test("a node being renamed can't drag, even when draggable (#195)", () => {
+    expect(canDragNode(draggableNode({ isDraggable: true, isEditing: true }))).toBe(false);
+});

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-arborist",
-  "version": "3.10.2",
+  "version": "3.10.3",
   "keywords": [
     "arborist",
     "dnd",

package/src/dnd/drag-hook.test.ts

@@ -1,5 +1,5 @@
 import { NodeApi } from "../interfaces/node-api";
-import { dragTypeForNode } from "./drag-hook";
+import { canDragNode, dragTypeForNode } from "./drag-hook";
 
 /* dragTypeForNode only reads node.data when dragType is a function, so a
    minimal stub stands in for a real NodeApi. */
@@ -20,3 +20,21 @@ test("resolves a per-node dragType function against the node", () => {
   expect(dragTypeForNode(dragType, nodeWith({ kind: "folder" }))).toBe("FOLDER");
   expect(dragTypeForNode(dragType, nodeWith({ kind: "file" }))).toBe("FILE");
 });
+
+/* canDragNode only reads the isDraggable/isEditing flags, so a minimal stub
+   stands in for a real NodeApi. */
+function draggableNode(flags: { isDraggable: boolean; isEditing: boolean }): NodeApi {
+  return flags as NodeApi;
+}
+
+test("a draggable node that isn't being edited can drag", () => {
+  expect(canDragNode(draggableNode({ isDraggable: true, isEditing: false }))).toBe(true);
+});
+
+test("a non-draggable node can't drag", () => {
+  expect(canDragNode(draggableNode({ isDraggable: false, isEditing: false }))).toBe(false);
+});
+
+test("a node being renamed can't drag, even when draggable (#195)", () => {
+  expect(canDragNode(draggableNode({ isDraggable: true, isEditing: true }))).toBe(false);
+});

package/src/dnd/drag-hook.ts

@@ -15,12 +15,19 @@ export function dragTypeForNode<T>(dragType: TreeProps<T>["dragType"], node: Nod
   return dragType ?? "NODE";
 }
 
+/* A node can start a drag only when it's draggable and not currently being
+   renamed. Without the editing guard, dragging inside the rename input would
+   pick the row up and move it (issue #195). */
+export function canDragNode<T>(node: NodeApi<T>): boolean {
+  return node.isDraggable && !node.isEditing;
+}
+
 export function useDragHook<T>(node: NodeApi<T>): ConnectDragSource {
   const tree = useTreeApi<T>();
   const ids = tree.selectedIds;
   const [_, ref, preview] = useDrag<DragItem<T>, DropResult, void>(
     () => ({
-      canDrag: () => node.isDraggable,
+      canDrag: () => canDragNode(node),
       type: dragTypeForNode(tree.props.dragType, node),
       item: () => {
         // This is fired once at the beginning of a drag operation