starred/yaak
1
0
Fork 0
mirror of https://github.com/mountain-loop/yaak.git synced 2026-04-23 09:18:30 +02:00
Code Issues 8 Packages Projects Releases 10 Wiki Activity

Improve selecting items during filter

Browse Source
This commit is contained in:
Gregory Schier
2025-11-03 15:04:02 -08:00
parent d119f4cab2
commit 4dae1a7955
1 changed files with 17 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src-web/components/core/tree/Tree.tsx
View File

@@ -177,14 +177,23 @@ function TreeInner<T extends { id: string }>(
const ensureTabbableItem = useCallback(() => { const ensureTabbableItem = useCallback(() => {
const lastSelectedId = jotaiStore.get(focusIdsFamily(treeId)).lastId; const lastSelectedId = jotaiStore.get(focusIdsFamily(treeId)).lastId;
const lastSelectedItem = selectableItems.find((i) => const lastSelectedItem = selectableItems.find((i) =>
i.node.item.id === lastSelectedId i.node.item.id === lastSelectedId && !i.node.hidden
); );
// If no item found, default to selecting the first item (prefer leaf node);
if (lastSelectedItem == null) { if (lastSelectedItem == null) {
return false; const firstLeafItem = selectableItems.find((i) => !i.node.hidden && i.node.children == null);
const firstItem = firstLeafItem ?? selectableItems.find((i) => !i.node.hidden);
if (firstItem != null) {
const id = firstItem.node.item.id;
jotaiStore.set(selectedIdsFamily(treeId), [id]);
jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
}
return;
} }
const closest = closestVisibleNode(treeId, lastSelectedItem.node); const closest = closestVisibleNode(treeId, lastSelectedItem.node);
if (closest != null && closest !== lastSelectedItem.node) { if (closest != null) {
const id = closest.item.id; const id = closest.item.id;
jotaiStore.set(selectedIdsFamily(treeId), [id]); jotaiStore.set(selectedIdsFamily(treeId), [id]);
jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id }); jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
@@ -200,7 +209,6 @@ function TreeInner<T extends { id: string }>(
// Ensure there's always a tabbable item after render // Ensure there's always a tabbable item after render
useEffect(() => { useEffect(() => {
requestAnimationFrame(ensureTabbableItem); requestAnimationFrame(ensureTabbableItem);
ensureTabbableItem();
}); });
const setSelected = useCallback( const setSelected = useCallback(
@@ -220,6 +228,10 @@ function TreeInner<T extends { id: string }>(
treeRef.current?.contains(document.activeElement) ?? false, treeRef.current?.contains(document.activeElement) ?? false,
renameItem: (id) => treeItemRefs.current[id]?.rename(), renameItem: (id) => treeItemRefs.current[id]?.rename(),
selectItem: (id) => { selectItem: (id) => {
if (jotaiStore.get(selectedIdsFamily(treeId)).includes(id)) {
// Already selected
return;
}
setSelected([id], false); setSelected([id], false);
jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id }); jotaiStore.set(focusIdsFamily(treeId), { anchorId: id, lastId: id });
}, },
@@ -823,9 +835,7 @@ function DropRegionAfterList({
onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void; onContextMenu?: (e: MouseEvent<HTMLDivElement>) => void;
}) { }) {
const { setNodeRef } = useDroppable({ id }); const { setNodeRef } = useDroppable({ id });
return ( return <div ref={setNodeRef} onContextMenu={onContextMenu} />;
<div ref={setNodeRef} onContextMenu={onContextMenu} />
);
} }
interface TreeHotKeyProps<T extends { id: string }> { interface TreeHotKeyProps<T extends { id: string }> {