|
| 1 | +/* eslint-disable no-shadow */ |
| 2 | +import { useCallback, useEffect } from 'react'; |
| 3 | +import { useModal } from '@faceless-ui/modal'; |
| 4 | +import { setsAreEqual } from '../utilities/setsAreEqual'; |
| 5 | + |
| 6 | +// Required to be outside of hook, else debounce would be necessary |
| 7 | +// and then one could not prevent the default behaviour. |
| 8 | +const pressedKeys = new Set<string>([]); |
| 9 | + |
| 10 | +const map = { |
| 11 | + metaleft: 'meta', |
| 12 | + metaright: 'meta', |
| 13 | + osleft: 'meta', |
| 14 | + osright: 'meta', |
| 15 | + shiftleft: 'shift', |
| 16 | + shiftright: 'shift', |
| 17 | + ctrlleft: 'ctrl', |
| 18 | + ctrlright: 'ctrl', |
| 19 | + controlleft: 'ctrl', |
| 20 | + controlright: 'ctrl', |
| 21 | + altleft: 'alt', |
| 22 | + altright: 'alt', |
| 23 | + escape: 'esc', |
| 24 | +}; |
| 25 | + |
| 26 | +const stripKey = (key: string) => { |
| 27 | + return (map[key.toLowerCase()] || key).trim() |
| 28 | + .toLowerCase() |
| 29 | + .replace('key', ''); |
| 30 | +}; |
| 31 | + |
| 32 | +const pushToKeys = (code: string) => { |
| 33 | + const key = stripKey(code); |
| 34 | + |
| 35 | + // There is a weird bug with macos that if the keys are not cleared they remain in the |
| 36 | + // pressed keys set. |
| 37 | + if (key === 'meta') { |
| 38 | + pressedKeys.forEach((pressedKey) => pressedKey !== 'meta' && pressedKeys.delete(pressedKey)); |
| 39 | + } |
| 40 | + |
| 41 | + pressedKeys.add(key); |
| 42 | +}; |
| 43 | + |
| 44 | +const removeFromKeys = (code: string) => { |
| 45 | + const key = stripKey(code); |
| 46 | + // There is a weird bug with macos that if the keys are not cleared they remain in the |
| 47 | + // pressed keys set. |
| 48 | + if (key === 'meta') { |
| 49 | + pressedKeys.clear(); |
| 50 | + } |
| 51 | + pressedKeys.delete(key); |
| 52 | +}; |
| 53 | + |
| 54 | +/** |
| 55 | + * Hook function to work with hotkeys. |
| 56 | + * @param param0.keyCode {string[]} The keys to listen for (`Event.code` without `'Key'` and lowercased) |
| 57 | + * @param param0.cmdCtrlKey {boolean} Whether Ctrl on windows or Cmd on mac must be pressed |
| 58 | + * @param param0.editDepth {boolean} This ensures that the hotkey is only triggered for the most top-level drawer in case there are nested drawers |
| 59 | + * @param func The callback function |
| 60 | + */ |
| 61 | +const useHotkey = (options: { |
| 62 | + keyCodes: string[] |
| 63 | + cmdCtrlKey: boolean |
| 64 | + editDepth: number |
| 65 | +}, func: (e: KeyboardEvent) => void): void => { |
| 66 | + const { keyCodes, cmdCtrlKey, editDepth } = options; |
| 67 | + |
| 68 | + const { modalState } = useModal(); |
| 69 | + |
| 70 | + |
| 71 | + const keydown = useCallback((event: KeyboardEvent | CustomEvent) => { |
| 72 | + const e: KeyboardEvent = event.detail?.key ? event.detail : event; |
| 73 | + if (e.key === undefined) { |
| 74 | + // Autofill events, or other synthetic events, can be ignored |
| 75 | + return; |
| 76 | + } |
| 77 | + if (e.code) pushToKeys(e.code); |
| 78 | + |
| 79 | + // Check for Mac and iPad |
| 80 | + const hasCmd = window.navigator.userAgent.includes('Mac OS X'); |
| 81 | + const pressedWithoutModifier = [...pressedKeys].filter((key) => !['meta', 'ctrl', 'alt', 'shift'].includes(key)); |
| 82 | + |
| 83 | + // Check whether arrays contain the same values (regardless of number of occurrences) |
| 84 | + if ( |
| 85 | + setsAreEqual(new Set(pressedWithoutModifier), new Set(keyCodes)) |
| 86 | + && (!cmdCtrlKey || (hasCmd && pressedKeys.has('meta')) || (!hasCmd && e.ctrlKey)) |
| 87 | + ) { |
| 88 | + // get the maximum edit depth by counting the number of open drawers. modalState is and object which contains the state of all drawers. |
| 89 | + const maxEditDepth = Object.keys(modalState).filter((key) => modalState[key]?.isOpen)?.length + 1 ?? 1; |
| 90 | + |
| 91 | + if (maxEditDepth !== editDepth) { |
| 92 | + // We only want to execute the hotkey from the most top-level drawer / edit depth. |
| 93 | + return; |
| 94 | + } |
| 95 | + // execute the function associated with the maximum edit depth |
| 96 | + func(e); |
| 97 | + } |
| 98 | + }, [keyCodes, cmdCtrlKey, editDepth, modalState, func]); |
| 99 | + |
| 100 | + const keyup = useCallback((e: KeyboardEvent) => { |
| 101 | + if (e.code) removeFromKeys(e.code); |
| 102 | + }, []); |
| 103 | + |
| 104 | + useEffect(() => { |
| 105 | + document.addEventListener('keydown', keydown, false); |
| 106 | + document.addEventListener('bypassKeyDown', keydown, false); // this is called if the keydown event's propagation is stopped by react-select |
| 107 | + document.addEventListener('keyup', keyup, false); |
| 108 | + |
| 109 | + return () => { |
| 110 | + document.removeEventListener('keydown', keydown); |
| 111 | + document.removeEventListener('bypassKeyDown', keydown); |
| 112 | + document.removeEventListener('keyup', keyup); |
| 113 | + }; |
| 114 | + }, [keydown, keyup]); |
| 115 | +}; |
| 116 | + |
| 117 | +export default useHotkey; |
0 commit comments