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

Author: lukasbach

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)

packages/core/src/controlledEnvironment/useGetParentOfLinearItem.ts

@@ -22,7 +22,7 @@ export const useGetGetParentOfLinearItem = () => {
         parentLinearIndex = 0;
       }
 
-      return parent;
+      return { parent, parentLinearIndex };
     },
     [environment.linearItems, environment.trees]
   );

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);
 

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(

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', () => {