Improve handling of drag-and-drop for collapsed and empty folders in tree component

This commit is contained in:
Gregory Schier
2025-10-18 07:59:14 -07:00
parent 3a61ffbbb0
commit 8055b625d0
2 changed files with 7 additions and 11 deletions

View File

@@ -265,17 +265,13 @@ function TreeInner<T extends { id: string }>(
let hoveredChildIndex = selectableItem.index + (side === 'above' ? 0 : 1); let hoveredChildIndex = selectableItem.index + (side === 'above' ? 0 : 1);
const collapsedMap = jotaiStore.get(collapsedFamily(treeId)); const collapsedMap = jotaiStore.get(collapsedFamily(treeId));
const isHoveredItemCollapsed = hovered != null ? collapsedMap[hovered.item.id] : false; const isHoveredItemCollapsed =
hovered != null ? hovered.children?.length === 0 || collapsedMap[hovered.item.id] : false;
if (hovered?.children != null && side === 'below') { if (hovered?.children != null && side === 'below' && isHoveredItemCollapsed) {
// Move into the folder if it's open and we're moving below it // Move into the folder if it's open and we're moving below it
if (isHoveredItemCollapsed) { hoveredParent = hovered;
hoveredParent = hovered; hoveredChildIndex = 0;
hoveredChildIndex = 0;
} else {
hoveredParent = hovered;
hoveredChildIndex = 0;
}
} }
const parentId = hoveredParent?.item.id ?? null; const parentId = hoveredParent?.item.id ?? null;

View File

@@ -24,8 +24,8 @@ export const TreeDropMarker = memo(function TreeDropMarker<T extends { id: strin
// Only show if we're hovering over this index // Only show if we're hovering over this index
if (!isHovered) return null; if (!isHovered) return null;
// Don't show if we're right under a collapsed folder, or empty folder. We have a separate delayed expansion // Don't show if we're right under a collapsed folder, or empty folder. We have a separate
// animation for that. // delayed expansion animation for that.
if (collapsed || node?.children?.length === 0) return null; if (collapsed || node?.children?.length === 0) return null;
return ( return (