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);
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
if (isHoveredItemCollapsed) {
hoveredParent = hovered;
hoveredChildIndex = 0;
} else {
hoveredParent = hovered;
hoveredChildIndex = 0;
}
hoveredParent = hovered;
hoveredChildIndex = 0;
}
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
if (!isHovered) return null;
// Don't show if we're right under a collapsed folder, or empty folder. We have a separate delayed expansion
// animation for that.
// Don't show if we're right under a collapsed folder, or empty folder. We have a separate
// delayed expansion animation for that.
if (collapsed || node?.children?.length === 0) return null;
return (