Function App

examples/solid/createHotkey/src/index.tsx:14–653

()

import './index.css'

function App() {
  const [lastHotkey, setLastHotkey] = createSignal<Hotkey | null>(null)
  const [saveCount, setSaveCount] = createSignal(0)
  const [incrementCount, setIncrementCount] = createSignal(0)
  const [enabled, setEnabled] = createSignal(true)
  const [activeTab, setActiveTab] = createSignal(1)
  const [navigationCount, setNavigationCount] = createSignal(0)
  const [functionKeyCount, setFunctionKeyCount] = createSignal(0)
  const [multiModifierCount, setMultiModifierCount] = createSignal(0)
  const [editingKeyCount, setEditingKeyCount] = createSignal(0)

  const [modalOpen, setModalOpen] = createSignal(false)
  const [editorContent, setEditorContent] = createSignal('')
  const [sidebarShortcutCount, setSidebarShortcutCount] = createSignal(0)
  const [modalShortcutCount, setModalShortcutCount] = createSignal(0)
  const [editorShortcutCount, setEditorShortcutCount] = createSignal(0)

  const [sidebarRef, setSidebarRef] = createSignal<HTMLDivElement | null>(null)
  const [modalRef, setModalRef] = createSignal<HTMLDivElement | null>(null)
  const [editorRef, setEditorRef] = createSignal<HTMLTextAreaElement | null>(
    null,
  )

  createHotkey('Mod+S', (_event, { hotkey, parsedHotkey }) => {
    setLastHotkey(hotkey)
    setSaveCount((c) => c + 1)
    console.log('Hotkey triggered:', hotkey)
    console.log('Parsed hotkey:', parsedHotkey)
  })

  createHotkey(
    'Mod+K',
    (_event, { hotkey }) => {
      setLastHotkey(hotkey)
      setIncrementCount((c) => c + 1)
    },
    { requireReset: true },
  )

  createHotkey(
    'Mod+E',
    (_event, { hotkey }) => {
      setLastHotkey(hotkey)
      alert('This hotkey can be toggled!')
    },
    () => ({ enabled: enabled() }),
  )

  createHotkey('Mod+1', () => {
    setLastHotkey('Mod+1')
    setActiveTab(1)
  })
  createHotkey('Mod+2', () => {
    setLastHotkey('Mod+2')
    setActiveTab(2)
  })
  createHotkey('Mod+3', () => {
    setLastHotkey('Mod+3')