react-complex-tree - npm Package Compare versions

Comparing version 2.2.4 to 2.2.5-alpha.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/TreeManager.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 export declare const TreeManager: () => JSX.Element;

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/cjs/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -88,2 +88,3 @@ "use strict";
 var useIsMounted_1 = require("../useIsMounted");
+var useRefCopy_1 = require("../useRefCopy");
 /* const createCompleteDataProvider = (provider: TreeDataProvider): CompleteTreeDataProvider => ({ // TODO Write class that internally uses provider instead
@@ -100,2 +101,3 @@ ...provider,
     var _b = (0, react_1.useState)(props.viewState), viewState = _b[0], setViewState = _b[1];
+    var viewStateRef = (0, useRefCopy_1.useRefCopy)(viewState);
     var missingItemIds = (0, react_1.useRef)([]);
@@ -150,12 +152,13 @@ var dataProvider = (0, react_1.useMemo)(function () { return new CompleteTreeDataProvider_1.CompleteTreeDataProvider(props.dataProvider); }, [props.dataProvider]);
         }, onSelectItems: function (items, treeId) {
-            amendViewState(treeId, function (old) {
-                var _a, _b;
-                if (props.disableMultiselect) {
-                    var newSelected = old.focusedItem ? [old.focusedItem] : [];
-                    (_a = props.onSelectItems) === null || _a === void 0 ? void 0 : _a.call(props, newSelected, treeId);
-                    return __assign(__assign({}, old), { selectedItems: newSelected });
-                }
-                (_b = props.onSelectItems) === null || _b === void 0 ? void 0 : _b.call(props, items, treeId);
-                return __assign(__assign({}, old), { selectedItems: items });
-            });
+            var _a, _b, _c;
+            var oldFocusedItem = (_a = viewStateRef.current[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem;
+            if (props.disableMultiselect) {
+                var newSelected_1 = oldFocusedItem ? [oldFocusedItem] : [];
+                (_b = props.onSelectItems) === null || _b === void 0 ? void 0 : _b.call(props, newSelected_1, treeId);
+                amendViewState(treeId, function (old) { return (__assign(__assign({}, old), { selectedItems: newSelected_1 })); });
+            }
+            else {
+                (_c = props.onSelectItems) === null || _c === void 0 ? void 0 : _c.call(props, items, treeId);
+                amendViewState(treeId, function (old) { return (__assign(__assign({}, old), { selectedItems: items })); });
+            }
         }, onFocusItem: function (item, treeId) {
@@ -162,0 +165,0 @@ var _a;

lib/cjs/useIsMounted.d.ts

@@ -0,1 +1,2 @@
+/// <reference types="react" />
 export declare const useIsMounted: () => import("react").MutableRefObject<boolean>;

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/esm/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -62,2 +62,3 @@ var __assign = (this && this.__assign) || function () {
 import { useIsMounted } from '../useIsMounted';
+import { useRefCopy } from '../useRefCopy';
 /* const createCompleteDataProvider = (provider: TreeDataProvider): CompleteTreeDataProvider => ({ // TODO Write class that internally uses provider instead
@@ -74,2 +75,3 @@ ...provider,
     var _b = useState(props.viewState), viewState = _b[0], setViewState = _b[1];
+    var viewStateRef = useRefCopy(viewState);
     var missingItemIds = useRef([]);
@@ -124,12 +126,13 @@ var dataProvider = useMemo(function () { return new CompleteTreeDataProvider(props.dataProvider); }, [props.dataProvider]);
         }, onSelectItems: function (items, treeId) {
-            amendViewState(treeId, function (old) {
-                var _a, _b;
-                if (props.disableMultiselect) {
-                    var newSelected = old.focusedItem ? [old.focusedItem] : [];
-                    (_a = props.onSelectItems) === null || _a === void 0 ? void 0 : _a.call(props, newSelected, treeId);
-                    return __assign(__assign({}, old), { selectedItems: newSelected });
-                }
-                (_b = props.onSelectItems) === null || _b === void 0 ? void 0 : _b.call(props, items, treeId);
-                return __assign(__assign({}, old), { selectedItems: items });
-            });
+            var _a, _b, _c;
+            var oldFocusedItem = (_a = viewStateRef.current[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem;
+            if (props.disableMultiselect) {
+                var newSelected_1 = oldFocusedItem ? [oldFocusedItem] : [];
+                (_b = props.onSelectItems) === null || _b === void 0 ? void 0 : _b.call(props, newSelected_1, treeId);
+                amendViewState(treeId, function (old) { return (__assign(__assign({}, old), { selectedItems: newSelected_1 })); });
+            }
+            else {
+                (_c = props.onSelectItems) === null || _c === void 0 ? void 0 : _c.call(props, items, treeId);
+                amendViewState(treeId, function (old) { return (__assign(__assign({}, old), { selectedItems: items })); });
+            }
         }, onFocusItem: function (item, treeId) {
@@ -136,0 +139,0 @@ var _a;

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> = {

lib/esnext/uncontrolledEnvironment/UncontrolledTreeEnvironment.js

@@ -62,2 +62,3 @@ var __assign = (this && this.__assign) || function () {
 import { useIsMounted } from '../useIsMounted';
+import { useRefCopy } from '../useRefCopy';
 /* const createCompleteDataProvider = (provider: TreeDataProvider): CompleteTreeDataProvider => ({ // TODO Write class that internally uses provider instead
@@ -74,2 +75,3 @@ ...provider,
     var _b = useState(props.viewState), viewState = _b[0], setViewState = _b[1];
+    var viewStateRef = useRefCopy(viewState);
     var missingItemIds = useRef([]);
@@ -124,12 +126,13 @@ var dataProvider = useMemo(function () { return new CompleteTreeDataProvider(props.dataProvider); }, [props.dataProvider]);
         }, onSelectItems: function (items, treeId) {
-            amendViewState(treeId, function (old) {
-                var _a, _b;
-                if (props.disableMultiselect) {
-                    var newSelected = old.focusedItem ? [old.focusedItem] : [];
-                    (_a = props.onSelectItems) === null || _a === void 0 ? void 0 : _a.call(props, newSelected, treeId);
-                    return __assign(__assign({}, old), { selectedItems: newSelected });
-                }
-                (_b = props.onSelectItems) === null || _b === void 0 ? void 0 : _b.call(props, items, treeId);
-                return __assign(__assign({}, old), { selectedItems: items });
-            });
+            var _a, _b, _c;
+            var oldFocusedItem = (_a = viewStateRef.current[treeId]) === null || _a === void 0 ? void 0 : _a.focusedItem;
+            if (props.disableMultiselect) {
+                var newSelected_1 = oldFocusedItem ? [oldFocusedItem] : [];
+                (_b = props.onSelectItems) === null || _b === void 0 ? void 0 : _b.call(props, newSelected_1, treeId);
+                amendViewState(treeId, function (old) { return (__assign(__assign({}, old), { selectedItems: newSelected_1 })); });
+            }
+            else {
+                (_c = props.onSelectItems) === null || _c === void 0 ? void 0 : _c.call(props, items, treeId);
+                amendViewState(treeId, function (old) { return (__assign(__assign({}, old), { selectedItems: items })); });
+            }
         }, onFocusItem: function (item, treeId) {
@@ -136,0 +139,0 @@ var _a;

package.json

 {
   "name": "react-complex-tree",
-  "version": "2.2.4",
+  "version": "2.2.5-alpha.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.2.5-alpha.0",
     "jest": "^29.2.2",
@@ -70,3 +70,3 @@ "jest-dom": "^4.0.0",
   },
-  "gitHead": "30bd4a6b9cfa764baca769392e5d48a690a280d4"
+  "gitHead": "501645cea67087af9878f52e1cf31f47751d2785"
 }

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 @@

New alerts

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

1240457

increased by0.68%

Lines of code

19138

increased by1.02%

Worsened metrics

Number of low quality alerts

2

increased by100%

No dependency changes