react-complex-tree - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

lib/cjs/controlledEnvironment/useOnDragOverTreeHandler.js

@@ -51,3 +51,3 @@ "use strict";
 var useOnDragOverTreeHandler = function (lastDragCode, setLastDragCode, draggingItems, itemHeight, onDragAtPosition, onPerformDrag) {
-    var _a = (0, ControlledTreeEnvironment_1.useTreeEnvironment)(), canDropOnFolder = _a.canDropOnFolder, canDropOnNonFolder = _a.canDropOnNonFolder, canDragAndDrop = _a.canDragAndDrop, linearItems = _a.linearItems, items = _a.items, canReorderItems = _a.canReorderItems, trees = _a.trees;
+    var _a = (0, ControlledTreeEnvironment_1.useTreeEnvironment)(), canDropOnFolder = _a.canDropOnFolder, canDropOnNonFolder = _a.canDropOnNonFolder, canDragAndDrop = _a.canDragAndDrop, linearItems = _a.linearItems, items = _a.items, canReorderItems = _a.canReorderItems, trees = _a.trees, canDropBelowOpenFolders = _a.canDropBelowOpenFolders;
     var getParentOfLinearItem = (0, useGetParentOfLinearItem_1.useGetGetParentOfLinearItem)();
@@ -111,2 +111,12 @@ var isDescendant = useIsDescendant();
         }
+        var nextItem = linearItems[treeId][linearIndex + 1];
+        var redirectToFirstChild = !canDropBelowOpenFolders &&
+            nextItem &&
+            targetItem.depth === nextItem.depth - 1 &&
+            offset === 'bottom';
+        if (redirectToFirstChild) {
+            targetItem = nextItem;
+            linearIndex += 1;
+            offset = 'top';
+        }
         var depth = targetItem.depth;
@@ -113,0 +123,0 @@ var targetItemData = items[targetItem.item];

lib/cjs/tree/useTreeKeyboardBindings.js

@@ -128,8 +128,12 @@ "use strict";
         var _a;
-        if (viewState.focusedItem !== undefined) {
-            e.preventDefault();
-            var item = environment.items[viewState.focusedItem];
-            (_a = environment.onStartRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
-            setRenamingItem(item.index);
+        if (viewState.focusedItem === undefined) {
+            return;
         }
+        e.preventDefault();
+        var item = environment.items[viewState.focusedItem];
+        if (item.canRename === false) {
+            return;
+        }
+        (_a = environment.onStartRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
+        setRenamingItem(item.index);
     }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true) && !isRenaming);
@@ -136,0 +140,0 @@ (0, useHotkey_1.useHotkey)('startSearch', function (e) {

lib/cjs/types.d.ts

@@ -140,2 +140,12 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     showLiveDescription?: boolean;
+    /**
+     * See Issue #148 or the sample at
+     * https://rct.lukasbach.com/storybook/?path=/story/core-basic-examples--single-tree?path=/story/core-drag-and-drop-configurability--can-drop-below-open-folders
+     * for details.
+     *
+     * If enabled, dropping at the bottom of an open folder will drop the items
+     * in the parent folder below the hovered item instead of inside the folder
+     * at the top.
+     */
+    canDropBelowOpenFolders?: boolean;
 }
@@ -142,0 +152,0 @@ export type IndividualTreeViewState<C extends string = never> = {

lib/esm/controlledEnvironment/useOnDragOverTreeHandler.js

@@ -48,3 +48,3 @@ import { useTreeEnvironment } from './ControlledTreeEnvironment';
 export var useOnDragOverTreeHandler = function (lastDragCode, setLastDragCode, draggingItems, itemHeight, onDragAtPosition, onPerformDrag) {
-    var _a = useTreeEnvironment(), canDropOnFolder = _a.canDropOnFolder, canDropOnNonFolder = _a.canDropOnNonFolder, canDragAndDrop = _a.canDragAndDrop, linearItems = _a.linearItems, items = _a.items, canReorderItems = _a.canReorderItems, trees = _a.trees;
+    var _a = useTreeEnvironment(), canDropOnFolder = _a.canDropOnFolder, canDropOnNonFolder = _a.canDropOnNonFolder, canDragAndDrop = _a.canDragAndDrop, linearItems = _a.linearItems, items = _a.items, canReorderItems = _a.canReorderItems, trees = _a.trees, canDropBelowOpenFolders = _a.canDropBelowOpenFolders;
     var getParentOfLinearItem = useGetGetParentOfLinearItem();
@@ -108,2 +108,12 @@ var isDescendant = useIsDescendant();
         }
+        var nextItem = linearItems[treeId][linearIndex + 1];
+        var redirectToFirstChild = !canDropBelowOpenFolders &&
+            nextItem &&
+            targetItem.depth === nextItem.depth - 1 &&
+            offset === 'bottom';
+        if (redirectToFirstChild) {
+            targetItem = nextItem;
+            linearIndex += 1;
+            offset = 'top';
+        }
         var depth = targetItem.depth;
@@ -110,0 +120,0 @@ var targetItemData = items[targetItem.item];

lib/esm/tree/useTreeKeyboardBindings.js

@@ -125,8 +125,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
         var _a;
-        if (viewState.focusedItem !== undefined) {
-            e.preventDefault();
-            var item = environment.items[viewState.focusedItem];
-            (_a = environment.onStartRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
-            setRenamingItem(item.index);
+        if (viewState.focusedItem === undefined) {
+            return;
         }
+        e.preventDefault();
+        var item = environment.items[viewState.focusedItem];
+        if (item.canRename === false) {
+            return;
+        }
+        (_a = environment.onStartRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
+        setRenamingItem(item.index);
     }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true) && !isRenaming);
@@ -133,0 +137,0 @@ useHotkey('startSearch', function (e) {

lib/esm/types.d.ts

@@ -140,2 +140,12 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     showLiveDescription?: boolean;
+    /**
+     * See Issue #148 or the sample at
+     * https://rct.lukasbach.com/storybook/?path=/story/core-basic-examples--single-tree?path=/story/core-drag-and-drop-configurability--can-drop-below-open-folders
+     * for details.
+     *
+     * If enabled, dropping at the bottom of an open folder will drop the items
+     * in the parent folder below the hovered item instead of inside the folder
+     * at the top.
+     */
+    canDropBelowOpenFolders?: boolean;
 }
@@ -142,0 +152,0 @@ export type IndividualTreeViewState<C extends string = never> = {

lib/esnext/controlledEnvironment/useOnDragOverTreeHandler.js

@@ -48,3 +48,3 @@ import { useTreeEnvironment } from './ControlledTreeEnvironment';
 export var useOnDragOverTreeHandler = function (lastDragCode, setLastDragCode, draggingItems, itemHeight, onDragAtPosition, onPerformDrag) {
-    var _a = useTreeEnvironment(), canDropOnFolder = _a.canDropOnFolder, canDropOnNonFolder = _a.canDropOnNonFolder, canDragAndDrop = _a.canDragAndDrop, linearItems = _a.linearItems, items = _a.items, canReorderItems = _a.canReorderItems, trees = _a.trees;
+    var _a = useTreeEnvironment(), canDropOnFolder = _a.canDropOnFolder, canDropOnNonFolder = _a.canDropOnNonFolder, canDragAndDrop = _a.canDragAndDrop, linearItems = _a.linearItems, items = _a.items, canReorderItems = _a.canReorderItems, trees = _a.trees, canDropBelowOpenFolders = _a.canDropBelowOpenFolders;
     var getParentOfLinearItem = useGetGetParentOfLinearItem();
@@ -108,2 +108,12 @@ var isDescendant = useIsDescendant();
         }
+        var nextItem = linearItems[treeId][linearIndex + 1];
+        var redirectToFirstChild = !canDropBelowOpenFolders &&
+            nextItem &&
+            targetItem.depth === nextItem.depth - 1 &&
+            offset === 'bottom';
+        if (redirectToFirstChild) {
+            targetItem = nextItem;
+            linearIndex += 1;
+            offset = 'top';
+        }
         var depth = targetItem.depth;
@@ -110,0 +120,0 @@ var targetItemData = items[targetItem.item];

lib/esnext/tree/useTreeKeyboardBindings.js

@@ -125,8 +125,12 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
         var _a;
-        if (viewState.focusedItem !== undefined) {
-            e.preventDefault();
-            var item = environment.items[viewState.focusedItem];
-            (_a = environment.onStartRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
-            setRenamingItem(item.index);
+        if (viewState.focusedItem === undefined) {
+            return;
         }
+        e.preventDefault();
+        var item = environment.items[viewState.focusedItem];
+        if (item.canRename === false) {
+            return;
+        }
+        (_a = environment.onStartRenamingItem) === null || _a === void 0 ? void 0 : _a.call(environment, item, treeId);
+        setRenamingItem(item.index);
     }, isActiveTree && ((_a = environment.canRename) !== null && _a !== void 0 ? _a : true) && !isRenaming);
@@ -133,0 +137,0 @@ useHotkey('startSearch', function (e) {

lib/esnext/types.d.ts

@@ -140,2 +140,12 @@ import React, { FormHTMLAttributes, HTMLProps, InputHTMLAttributes, Ref } from 'react';
     showLiveDescription?: boolean;
+    /**
+     * See Issue #148 or the sample at
+     * https://rct.lukasbach.com/storybook/?path=/story/core-basic-examples--single-tree?path=/story/core-drag-and-drop-configurability--can-drop-below-open-folders
+     * for details.
+     *
+     * If enabled, dropping at the bottom of an open folder will drop the items
+     * in the parent folder below the hovered item instead of inside the folder
+     * at the top.
+     */
+    canDropBelowOpenFolders?: boolean;
 }
@@ -142,0 +152,0 @@ export type IndividualTreeViewState<C extends string = never> = {

package.json

 {
   "name": "react-complex-tree",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "main": "lib/cjs/index.js",
@@ -37,3 +37,3 @@ "module": "lib/esm/index.js",
     "cpy-cli": "^3.1.1",
-    "demodata": "^2.2.4",
+    "demodata": "^2.3.0",
     "jest": "^29.2.2",
@@ -70,3 +70,3 @@ "jest-dom": "^4.0.0",
   },
-  "gitHead": "30bd4a6b9cfa764baca769392e5d48a690a280d4"
+  "gitHead": "7e2a22922e8b91eef046d13a0454738616d865bb"
 }

src/controlledEnvironment/useOnDragOverTreeHandler.ts

@@ -98,2 +98,3 @@ import * as React from 'react';
     trees,
+    canDropBelowOpenFolders,
   } = useTreeEnvironment();
@@ -192,2 +193,14 @@ const getParentOfLinearItem = useGetGetParentOfLinearItem();
 
+      const nextItem = linearItems[treeId][linearIndex + 1];
+      const redirectToFirstChild =
+        !canDropBelowOpenFolders &&
+        nextItem &&
+        targetItem.depth === nextItem.depth - 1 &&
+        offset === 'bottom';
+      if (redirectToFirstChild) {
+        targetItem = nextItem;
+        linearIndex += 1;
+        offset = 'top';
+      }
+
       const { depth } = targetItem;
@@ -194,0 +207,0 @@ const targetItemData = items[targetItem.item];

src/tree/useTreeKeyboardBindings.ts

@@ -173,8 +173,15 @@ import { useKey } from '../hotkeys/useKey';
     e => {
-      if (viewState.focusedItem !== undefined) {
-        e.preventDefault();
-        const item = environment.items[viewState.focusedItem];
-        environment.onStartRenamingItem?.(item, treeId);
-        setRenamingItem(item.index);
+      if (viewState.focusedItem === undefined) {
+        return;
       }
+
+      e.preventDefault();
+      const item = environment.items[viewState.focusedItem];
+
+      if (item.canRename === false) {
+        return;
+      }
+
+      environment.onStartRenamingItem?.(item, treeId);
+      setRenamingItem(item.index);
     },
@@ -181,0 +188,0 @@ isActiveTree && (environment.canRename ?? true) && !isRenaming

src/types.ts

@@ -179,2 +179,13 @@ import React, {
   showLiveDescription?: boolean;
+
+  /**
+   * See Issue #148 or the sample at
+   * https://rct.lukasbach.com/storybook/?path=/story/core-basic-examples--single-tree?path=/story/core-drag-and-drop-configurability--can-drop-below-open-folders
+   * for details.
+   *
+   * If enabled, dropping at the bottom of an open folder will drop the items
+   * in the parent folder below the hovered item instead of inside the folder
+   * at the top.
+   */
+  canDropBelowOpenFolders?: boolean;
 }
@@ -181,0 +192,0 @@

No alert changes

Improved metrics

Total package byte prevSize

1238117

increased by0.49%

Lines of code

19093

increased by0.79%

No dependency changes