48 lines
1.6 KiB
TypeScript
48 lines
1.6 KiB
TypeScript
import { useRecoilValue } from 'recoil';
|
|
|
|
import { useScopedHotkeys } from '@/ui/utilities/hotkey/hooks/useScopedHotkeys';
|
|
import { AppHotkeyScope } from '@/ui/utilities/hotkey/types/AppHotkeyScope';
|
|
|
|
import {
|
|
keyboardShortcutsGeneral,
|
|
keyboardShortcutsTable,
|
|
} from '../constants/keyboardShortcuts';
|
|
import { useKeyboardShortcutMenu } from '../hooks/useKeyboardShortcutMenu';
|
|
import { isKeyboardShortcutMenuOpenedState } from '../states/isKeyboardShortcutMenuOpenedState';
|
|
|
|
import { KeyboardMenuDialog } from './KeyboardShortcutMenuDialog';
|
|
import { KeyboardMenuGroup } from './KeyboardShortcutMenuGroup';
|
|
import { KeyboardMenuItem } from './KeyboardShortcutMenuItem';
|
|
|
|
export const KeyboardShortcutMenu = () => {
|
|
const { toggleKeyboardShortcutMenu } = useKeyboardShortcutMenu();
|
|
const isKeyboardShortcutMenuOpened = useRecoilValue(
|
|
isKeyboardShortcutMenuOpenedState,
|
|
);
|
|
useScopedHotkeys(
|
|
'shift+?,meta+?',
|
|
() => {
|
|
toggleKeyboardShortcutMenu();
|
|
},
|
|
AppHotkeyScope.KeyboardShortcutMenu,
|
|
[toggleKeyboardShortcutMenu],
|
|
);
|
|
|
|
return (
|
|
isKeyboardShortcutMenuOpened && (
|
|
<KeyboardMenuDialog onClose={toggleKeyboardShortcutMenu}>
|
|
<KeyboardMenuGroup heading="Table">
|
|
{keyboardShortcutsTable.map((TableShortcut) => (
|
|
<KeyboardMenuItem shortcut={TableShortcut} />
|
|
))}
|
|
</KeyboardMenuGroup>
|
|
<KeyboardMenuGroup heading="General">
|
|
{keyboardShortcutsGeneral.map((GeneralShortcut) => (
|
|
<KeyboardMenuItem shortcut={GeneralShortcut} />
|
|
))}
|
|
</KeyboardMenuGroup>
|
|
</KeyboardMenuDialog>
|
|
)
|
|
);
|
|
};
|