refactor: format and lint codebase (#971)

app/assets/javascripts/Components/QuickSettingsMenu/EventHandlers.ts

@@ -0,0 +1,75 @@
+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
+    }
+  }
+}