feat: auto-expand closed items on drop

Author: lukasbach

.changeset/quick-foxes-dance.md

@@ -0,0 +1,5 @@
+---
+"@headless-tree/core": minor
+---
+
+added feature where closed items are auto-expanded briefly after dragging onto them. set config option `openOnDropDelay` to zero to disable.

packages/core/src/features/drag-and-drop/feature.ts

@@ -1,13 +1,47 @@
-import { FeatureImplementation } from "../../types/core";
+import {
+  FeatureImplementation,
+  type ItemInstance,
+  type TreeInstance,
+} from "../../types/core";
 import { DndDataRef, DragLineData, DragTarget } from "./types";
 import {
+  PlacementType,
+  type TargetPlacement,
   canDrop,
   getDragCode,
   getDragTarget,
+  getTargetPlacement,
   isOrderedDragTarget,
 } from "./utils";
 import { makeStateUpdater } from "../../utils";
 
+const handleAutoOpenFolder = (
+  dataRef: { current: DndDataRef },
+  tree: TreeInstance<any>,
+  item: ItemInstance<any>,
+  placement: TargetPlacement,
+) => {
+  const { openOnDropDelay } = tree.getConfig();
+  const dragCode = dataRef.current.lastDragCode;
+
+  if (
+    !openOnDropDelay ||
+    !item.isFolder() ||
+    item.isExpanded() ||
+    placement.type !== PlacementType.MakeChild
+  ) {
+    return;
+  }
+  setTimeout(() => {
+    if (
+      dragCode !== dataRef.current.lastDragCode ||
+      !dataRef.current.lastAllowDrop
+    )
+      return;
+    item.expand();
+  }, openOnDropDelay);
+};
+
 const defaultCanDropForeignDragObject = () => false;
 export const dragAndDropFeature: FeatureImplementation = {
   key: "drag-and-drop",
@@ -22,6 +56,7 @@ export const dragAndDropFeature: FeatureImplementation = {
         : () => false,
     setDndState: makeStateUpdater("dnd", tree),
     canReorder: true,
+    openOnDropDelay: 800,
     ...defaultConfig,
   }),
 
@@ -185,7 +220,10 @@ export const dragAndDropFeature: FeatureImplementation = {
       onDragOver: (e: DragEvent) => {
         e.stopPropagation(); // don't bubble up to container dragover
         const dataRef = tree.getDataRef<DndDataRef>();
-        const nextDragCode = getDragCode(e, item, tree);
+        const placement = getTargetPlacement(e, item, tree, true);
+        const nextDragCode = getDragCode(item, placement);
+        handleAutoOpenFolder(dataRef, tree, item, placement);
+
         if (nextDragCode === dataRef.current.lastDragCode) {
           if (dataRef.current.lastAllowDrop) {
             e.preventDefault();

packages/core/src/features/drag-and-drop/types.ts

@@ -93,6 +93,9 @@ export type DragAndDropFeatureDef<T> = {
       target: DragTarget<T>,
     ) => void | Promise<void>;
     onCompleteForeignDrop?: (items: ItemInstance<T>[]) => void;
+
+    /** When dragging for this many ms on a closed folder, the folder will automatically open. Set to zero to disable. */
+    openOnDropDelay?: number;
   };
   treeInstance: {
     getDragTarget: () => DragTarget<T> | null;

packages/core/src/features/drag-and-drop/utils.ts

@@ -7,14 +7,14 @@ export enum ItemDropCategory {
   LastInGroup,
 }
 
-enum PlacementType {
+export enum PlacementType {
   ReorderAbove,
   ReorderBelow,
   MakeChild,
   Reparent,
 }
 
-type TargetPlacement =
+export type TargetPlacement =
   | {
       type:
         | PlacementType.ReorderAbove
@@ -95,7 +95,7 @@ export const getInsertionIndex = <T>(
   return childIndex - numberOfDragItemsBeforeTarget;
 };
 
-const getTargetPlacement = (
+export const getTargetPlacement = (
   e: any,
   item: ItemInstance<any>,
   tree: TreeInstance<any>,
@@ -153,11 +153,9 @@ const getTargetPlacement = (
 };
 
 export const getDragCode = (
-  e: any,
   item: ItemInstance<any>,
-  tree: TreeInstance<any>,
+  placement: TargetPlacement,
 ) => {
-  const placement = getTargetPlacement(e, item, tree, true);
   return [
     item.getId(),
     placement.type,