Skip to content

Fixes/run filtered keyboard nav #1074

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Apr 29, 2024
Merged

Fixes/run filtered keyboard nav #1074

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7dabb49
Ensure each switch condition returns a state
matt-aitken Apr 29, 2024
28dfeae
Fix for scrolling when filtered
matt-aitken Apr 29, 2024
99e94b1
Fix for up/down navigation when filtered
matt-aitken Apr 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion apps/webapp/app/components/primitives/TreeView/TreeView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ export function useTree<TData, TFilterValue>({

const scrollToNodeFn = useCallback(
(id: string) => {
const itemIndex = tree.findIndex((node) => node.id === id);
const itemIndex = state.visibleNodeIds.findIndex((n) => n === id);

if (itemIndex !== -1) {
virtualizer.scrollToIndex(itemIndex, { align: "auto" });
Expand Down
66 changes: 36 additions & 30 deletions apps/webapp/app/components/primitives/TreeView/reducer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -231,16 +231,16 @@ export function reducer(state: TreeState, action: Action): TreeState {
const currentlySelected = state.nodes[action.payload.id]?.selected ?? false;
if (currentlySelected) {
return reducer(state, { type: "DESELECT_NODE", payload: { id: action.payload.id } });
} else {
return reducer(state, {
type: "SELECT_NODE",
payload: {
id: action.payload.id,
scrollToNode: action.payload.scrollToNode,
scrollToNodeFn: action.payload.scrollToNodeFn,
},
});
}

return reducer(state, {
type: "SELECT_NODE",
payload: {
id: action.payload.id,
scrollToNode: action.payload.scrollToNode,
scrollToNodeFn: action.payload.scrollToNodeFn,
},
});
}
case "EXPAND_NODE": {
const newNodes = {
Expand Down Expand Up @@ -277,16 +277,16 @@ export function reducer(state: TreeState, action: Action): TreeState {
type: "COLLAPSE_NODE",
payload: { id: action.payload.id },
});
} else {
return reducer(state, {
type: "EXPAND_NODE",
payload: {
id: action.payload.id,
scrollToNode: action.payload.scrollToNode,
scrollToNodeFn: action.payload.scrollToNodeFn,
},
});
}

return reducer(state, {
type: "EXPAND_NODE",
payload: {
id: action.payload.id,
scrollToNode: action.payload.scrollToNode,
scrollToNodeFn: action.payload.scrollToNodeFn,
},
});
}
case "EXPAND_ALL_BELOW_DEPTH": {
const nodesToExpand = state.tree.filter(
Expand Down Expand Up @@ -396,17 +396,17 @@ export function reducer(state: TreeState, action: Action): TreeState {
level: action.payload.level,
},
});
} else {
return reducer(state, {
type: "EXPAND_LEVEL",
payload: {
level: action.payload.level,
},
});
}

return reducer(state, {
type: "EXPAND_LEVEL",
payload: {
level: action.payload.level,
},
});
}
case "SELECT_FIRST_VISIBLE_NODE": {
const node = firstVisibleNode(state.tree, state.nodes);
const node = firstVisibleNode(state.tree, state.filteredNodes);
if (node) {
return reducer(state, {
type: "SELECT_NODE",
Expand All @@ -417,9 +417,11 @@ export function reducer(state: TreeState, action: Action): TreeState {
},
});
}

return state;
}
case "SELECT_LAST_VISIBLE_NODE": {
const node = lastVisibleNode(state.tree, state.nodes);
const node = lastVisibleNode(state.tree, state.filteredNodes);
if (node) {
return reducer(state, {
type: "SELECT_NODE",
Expand All @@ -430,6 +432,8 @@ export function reducer(state: TreeState, action: Action): TreeState {
},
});
}

return state;
}
case "SELECT_NEXT_VISIBLE_NODE": {
const selected = selectedIdFromState(state.nodes);
Expand All @@ -443,7 +447,7 @@ export function reducer(state: TreeState, action: Action): TreeState {
});
}

const visible = visibleNodes(state.tree, state.nodes);
const visible = visibleNodes(state.tree, state.filteredNodes);
const selectedIndex = visible.findIndex((node) => node.id === selected);
const nextNode = visible[selectedIndex + 1];
if (nextNode) {
Expand All @@ -456,6 +460,8 @@ export function reducer(state: TreeState, action: Action): TreeState {
},
});
}

return state;
}
case "SELECT_PREVIOUS_VISIBLE_NODE": {
const selected = selectedIdFromState(state.nodes);
Expand All @@ -470,9 +476,9 @@ export function reducer(state: TreeState, action: Action): TreeState {
});
}

const visible = visibleNodes(state.tree, state.nodes);
const visible = visibleNodes(state.tree, state.filteredNodes);
const selectedIndex = visible.findIndex((node) => node.id === selected);
const previousNode = visible[selectedIndex - 1];
const previousNode = visible[Math.max(0, selectedIndex - 1)];
if (previousNode) {
return reducer(state, {
type: "SELECT_NODE",
Expand Down