Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-02-14 00:19:16 +01:00
Code Issues Projects Releases Wiki Activity

feat: command bar up down navigation (#7546)

Browse Source
This commit is contained in:
David Leek 2024-07-05 12:57:43 +02:00 committed by GitHub
parent 2e205fc14e
commit 2f9483441f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 47 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
frontend/src/component/commandBar/CommandBar.tsx
View File

@ -201,6 +201,53 @@ export const CommandBar = () => {
});
const placeholder = `Command bar (${hotkey})`;
const findCommandBarLinksAndSelectedIndex = () => {
const allCommandBarLinks =
searchContainerRef.current?.querySelectorAll('ul > a');
if (!allCommandBarLinks || allCommandBarLinks.length === 0) return;
let selectedIndex = -1;
allCommandBarLinks.forEach((link, index) => {
if (link === document.activeElement) {
selectedIndex = index;
}
});
return { allCommandBarLinks, selectedIndex };
};
useKeyboardShortcut({ key: 'ArrowDown', preventDefault: true }, () => {
const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
if (!itemsAndIndex) return;
const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
const newIndex = selectedIndex + 1;
if (newIndex >= allCommandBarLinks.length) return;
(allCommandBarLinks[newIndex] as HTMLElement).focus();
});
useKeyboardShortcut({ key: 'ArrowUp', preventDefault: true }, () => {
const itemsAndIndex = findCommandBarLinksAndSelectedIndex();
if (!itemsAndIndex) return;
const { allCommandBarLinks, selectedIndex } = itemsAndIndex;
const newIndex = selectedIndex - 1;
if (newIndex >= 0) {
(allCommandBarLinks[newIndex] as HTMLElement).focus();
} else {
const element = searchInputRef.current;
if (element) {
element.focus();
element.setSelectionRange(
element.value.length,
element.value.length,
);
}
}
});
useOnClickOutside([searchContainerRef], hideSuggestions);
const onKeyDown = (event: React.KeyboardEvent) => {
if (event.key === 'Escape') {