feat: change behavior for dropping at bottom of open folders [#148]

Author: lukasbach

next-release-notes.md

@@ -1,9 +1,4 @@
-<!--
 ### Breaking Changes
-
-### Features
-
-### Bug Fixes and Improvements
-
-### Other Changes
--->
+- Changed the behavior for dropping an item at the bottom of an open folder has changed, and will now drop
+  into the open folder at its top, instead of the parent folder below the open folder. See discussion at #148 for details.
+  You can opt out of this behavior by setting the `canDropBelowOpenFolders` prop on the tree environment (#148).

packages/core/src/controlledEnvironment/useOnDragOverTreeHandler.ts

@@ -95,6 +95,7 @@ export const useOnDragOverTreeHandler = (
     items,
     canReorderItems,
     trees,
+    canDropBelowOpenFolders,
   } = useTreeEnvironment();
   const getParentOfLinearItem = useGetGetParentOfLinearItem();
   const isDescendant = useIsDescendant();
@@ -188,6 +189,18 @@ export const useOnDragOverTreeHandler = (
         return;
       }
 
+      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;
       const targetItemData = items[targetItem.item];
 

packages/core/src/stories/DndLimitations.stories.tsx renamed to packages/core/src/stories/DndConfigurability.stories.tsx

@@ -9,6 +9,28 @@ export default {
   title: 'Core/Drag-and-Drop Configurability',
 } as Meta;
 
+export const Default = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {
+        expandedItems: ['Fruit'],
+      },
+    }}
+  >
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);
+
 export const NoDragAndDrop = () => (
   <UncontrolledTreeEnvironment<string>
     dataProvider={new StaticTreeDataProvider(longTree.items)}
@@ -179,3 +201,32 @@ export const AllowDroppingOnlyOnItemsStartingWithA = () => (
     <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
   </UncontrolledTreeEnvironment>
 );
+
+export const CanDropBelowOpenFolders = () => (
+  <UncontrolledTreeEnvironment<string>
+    canDragAndDrop
+    canDropOnFolder
+    canReorderItems
+    canDropBelowOpenFolders
+    dataProvider={
+      new StaticTreeDataProvider(longTree.items, (item, data) => ({
+        ...item,
+        data,
+      }))
+    }
+    getItemTitle={item => item.data}
+    viewState={{
+      'tree-1': {
+        expandedItems: ['Fruit'],
+      },
+    }}
+  >
+    <p>
+      In this sample, canDropBelowOpenFolders is enabled. Try dropping Orange on
+      the bottom part of the Fruit folder. It will be dropped in the parent
+      folder, below the open Fruit folder. If you disable this option, it
+      dropping there will drop at the top of the contents of the Fruit folder.
+    </p>
+    <Tree treeId="tree-1" rootItem="root" treeLabel="Tree Example" />
+  </UncontrolledTreeEnvironment>
+);

packages/core/src/types.ts

@@ -176,6 +176,17 @@ export interface TreeCapabilities<T = any, C extends string = never> {
     itemTitle: string
   ) => boolean;
   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;
 }
 
 export type IndividualTreeViewState<C extends string = never> = {