feat: target parent when dragging on child (#219)

lukasbach · Feb 24, 2023 · 5f61f4f · 5f61f4f
1 parent 2d4c6e3
commit 5f61f4f
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 15 deletions.
diff --git a/next-release-notes.md b/next-release-notes.md
@@ -1,9 +1,4 @@
-<!--
-### Breaking Changes
-
-### Features
-
 ### Bug Fixes and Improvements
 
-### Other Changes
--->
+* Dragging on a non-folder item with `canDropOnNonFolder=false` and 
+  `canReorderItems=false` will now target the item's parent. (#219)
diff --git a/packages/core/src/controlledEnvironment/useGetParentOfLinearItem.ts b/packages/core/src/controlledEnvironment/useGetParentOfLinearItem.ts
@@ -22,7 +22,7 @@ export const useGetGetParentOfLinearItem = () => {
         parentLinearIndex = 0;
       }
 
-      return parent;
+      return { parent, parentLinearIndex };
     },
     [environment.linearItems, environment.trees]
   );

diff --git a/packages/core/src/controlledEnvironment/useGetViableDragPositions.ts b/packages/core/src/controlledEnvironment/useGetViableDragPositions.ts
@@ -14,7 +14,7 @@ export const useGetViableDragPositions = () => {
       const linearItems = environment.linearItems[treeId];
       return linearItems
         .map<DraggingPosition[]>(({ item, depth }, linearIndex) => {
-          const parent = getParentOfLinearItem(linearIndex, treeId);
+          const { parent } = getParentOfLinearItem(linearIndex, treeId);
           const childIndex =
             environment.items[parent.item].children!.indexOf(item);
 

diff --git a/packages/core/src/controlledEnvironment/useOnDragOverTreeHandler.ts b/packages/core/src/controlledEnvironment/useOnDragOverTreeHandler.ts
@@ -18,7 +18,8 @@ const getHoveringPosition = (
   treeId: string,
   items: Record<TreeItemIndex, TreeItem>,
   canDropOnFolder?: boolean,
-  canDropOnNonFolder?: boolean
+  canDropOnNonFolder?: boolean,
+  canReorderItems?: boolean
 ) => {
   const hoveringPosition = (clientY - treeTop) / itemHeight;
 
@@ -38,8 +39,11 @@ const getHoveringPosition = (
   const targetItem = items[targetLinearItem.item];
   let offset: 'top' | 'bottom' | undefined;
 
-  const lineThreshold =
-    (targetItem?.isFolder && canDropOnFolder) || canDropOnNonFolder ? 0.2 : 0.5;
+  const lineThreshold = !canReorderItems
+    ? 0
+    : (targetItem?.isFolder && canDropOnFolder) || canDropOnNonFolder
+    ? 0.2
+    : 0.5;
 
   if (hoveringPosition % 1 < lineThreshold) {
     offset = 'top';
@@ -114,7 +118,8 @@ export const useOnDragOverTreeHandler = (
         treeId,
         items,
         canDropOnFolder,
-        canDropOnNonFolder
+        canDropOnNonFolder,
+        canReorderItems
       );
 
       const nextDragCode = outsideContainer
@@ -137,7 +142,21 @@ export const useOnDragOverTreeHandler = (
         return;
       }
 
-      const targetItem = linearItems[treeId][linearIndex];
+      let targetItem = linearItems[treeId][linearIndex];
+      const redirectTargetToParent =
+        !canReorderItems &&
+        !canDropOnNonFolder &&
+        !items[targetItem.item].isFolder;
+
+      if (redirectTargetToParent) {
+        const { parentLinearIndex, parent } = getParentOfLinearItem(
+          linearIndex,
+          treeId
+        );
+        targetItem = parent;
+        linearIndex = parentLinearIndex;
+      }
+
       const { depth } = targetItem;
       const targetItemData = items[targetItem.item];
 
@@ -156,7 +175,7 @@ export const useOnDragOverTreeHandler = (
         return;
       }
 
-      const parent = getParentOfLinearItem(linearIndex, treeId);
+      const { parent } = getParentOfLinearItem(linearIndex, treeId);
 
       if (
         draggingItems.some(

diff --git a/packages/core/test/dnd-restrictions.spec.tsx b/packages/core/test/dnd-restrictions.spec.tsx
@@ -159,6 +159,25 @@ describe('dnd restrictions', () => {
       await test.expectTreeUnchanged();
       await test.expectOpenViewState();
     });
+
+    it('dropping on undroppable nonfolder targets parent', async () => {
+      const test = await new TestUtil().renderOpenTree({
+        canReorderItems: false,
+        canDropOnNonFolder: false,
+      });
+      await test.startDrag('aaa');
+      await test.dragOver('aba');
+      await test.drop();
+      await test.expectVisibleItemContents('aa', ['aab', 'aac', 'aad']);
+      await test.expectVisibleItemContents('ab', [
+        'aba',
+        'abb',
+        'abc',
+        'abd',
+        'aaa',
+      ]);
+      await test.expectOpenViewState();
+    });
   });
 
   describe('item.canMove', () => {