71 lines
2.1 KiB
TypeScript
71 lines
2.1 KiB
TypeScript
import { Dispatch, RefObject, SetStateAction } from 'react'
|
|
|
|
export const quickSettingsKeyDownHandler = (
|
|
closeQuickSettingsMenu: () => void,
|
|
event: React.KeyboardEvent,
|
|
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: Dispatch<SetStateAction<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
|
|
}
|
|
}
|
|
}
|