78 lines
2.2 KiB
TypeScript
78 lines
2.2 KiB
TypeScript
import { RefObject } from 'preact';
|
|
import { StateUpdater } from 'preact/hooks';
|
|
import { JSXInternal } from 'preact/src/jsx';
|
|
|
|
export const quickSettingsKeyDownHandler = (
|
|
closeQuickSettingsMenu: () => void,
|
|
event: JSXInternal.TargetedKeyboardEvent<HTMLDivElement>,
|
|
quickSettingsMenuRef: RefObject<HTMLDivElement>,
|
|
themesMenuOpen: boolean
|
|
) => {
|
|
if (quickSettingsMenuRef?.current) {
|
|
const items: NodeListOf<HTMLButtonElement> =
|
|
quickSettingsMenuRef.current.querySelectorAll(':scope > button');
|
|
const currentFocusedIndex = Array.from(items).findIndex(
|
|
(btn) => btn === document.activeElement
|
|
);
|
|
|
|
if (!themesMenuOpen) {
|
|
switch (event.key) {
|
|
case 'Escape':
|
|
closeQuickSettingsMenu();
|
|
break;
|
|
case 'ArrowDown':
|
|
if (items[currentFocusedIndex + 1]) {
|
|
items[currentFocusedIndex + 1].focus();
|
|
} else {
|
|
items[0].focus();
|
|
}
|
|
break;
|
|
case 'ArrowUp':
|
|
if (items[currentFocusedIndex - 1]) {
|
|
items[currentFocusedIndex - 1].focus();
|
|
} else {
|
|
items[items.length - 1].focus();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
};
|
|
|
|
export const themesMenuKeyDownHandler = (
|
|
event: React.KeyboardEvent<HTMLDivElement>,
|
|
themesMenuRef: RefObject<HTMLDivElement>,
|
|
setThemesMenuOpen: StateUpdater<boolean>,
|
|
themesButtonRef: RefObject<HTMLButtonElement>
|
|
) => {
|
|
if (themesMenuRef?.current) {
|
|
const themes = themesMenuRef.current.querySelectorAll('button');
|
|
const currentFocusedIndex = Array.from(themes).findIndex(
|
|
(themeBtn) => themeBtn === document.activeElement
|
|
);
|
|
|
|
switch (event.key) {
|
|
case 'Escape':
|
|
case 'ArrowLeft':
|
|
event.stopPropagation();
|
|
setThemesMenuOpen(false);
|
|
themesButtonRef.current?.focus();
|
|
break;
|
|
case 'ArrowDown':
|
|
if (themes[currentFocusedIndex + 1]) {
|
|
themes[currentFocusedIndex + 1].focus();
|
|
} else {
|
|
themes[0].focus();
|
|
}
|
|
break;
|
|
case 'ArrowUp':
|
|
if (themes[currentFocusedIndex - 1]) {
|
|
themes[currentFocusedIndex - 1].focus();
|
|
} else {
|
|
themes[themes.length - 1].focus();
|
|
}
|
|
break;
|
|
}
|
|
}
|
|
};
|