76 lines
2.2 KiB
TypeScript
76 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
|
|
}
|
|
}
|
|
}
|