[No QA] [TS migration] Migrate 'useKeyboardShortcut.js' hook to TypeScript

src/hooks/useKeyboardShortcut.ts

@@ -0,0 +1,56 @@
+import {useEffect} from 'react';
+import {ValueOf} from 'type-fest';
+import KeyboardShortcut from '@libs/KeyboardShortcut';
+import CONST from '@src/CONST';
+
+type Shortcut = ValueOf<typeof CONST.KEYBOARD_SHORTCUTS>;
+type KeyboardShortcutConfig = {
+ captureOnInputs?: boolean;
+ shouldBubble?: boolean;
+ priority?: number;
+ shouldPreventDefault?: boolean;
+ excludedNodes?: string[];
+ isActive?: boolean;
+};
+
+/**
+ * Register a keyboard shortcut handler.
+ * Recommendation: To ensure stability, wrap the `callback` function with the useCallback hook before using it with this hook.
+ *
+ */
+export default function useKeyboardShortcut(shortcut: Shortcut, callback: () => void, config: KeyboardShortcutConfig | Record<string, never> = {}) {
+ const {
+ captureOnInputs = true,
+ shouldBubble = false,
+ priority = 0,
+ shouldPreventDefault = true,
+
+ // The "excludedNodes" array needs to be stable to prevent the "useEffect" hook from being recreated unnecessarily.
+ // Hence the use of CONST.EMPTY_ARRAY.
+ excludedNodes = CONST.EMPTY_ARRAY,
+ isActive = true,
+ } = config;
+
+ useEffect(() => {
+ if (!isActive) {
+ return () => {};
+ }
+
+ const unsubscribe = KeyboardShortcut.subscribe(
+ shortcut.shortcutKey,
+ callback,
+ shortcut.descriptionKey ?? '',
+ shortcut.modifiers,
+ captureOnInputs,
+ shouldBubble,
+ priority,
+ shouldPreventDefault,
+ excludedNodes,
+ );
+
+ return () => {
+ unsubscribe();
+ };
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [isActive, callback, captureOnInputs, excludedNodes, priority, shortcut.descriptionKey, shortcut.modifiers.join(), shortcut.shortcutKey, shouldBubble, shouldPreventDefault]);
+}

src/libs/KeyboardShortcut/index.ts

@@ -19,11 +19,13 @@ type EventHandler = {
 // Handlers for the various keyboard listeners we set up
 const eventHandlers: Record<string, EventHandler[]> = {};
 
+type ShortcutModifiers = readonly ['CTRL'] | readonly ['CTRL', 'SHIFT'] | readonly [];
+
 type Shortcut = {
  displayName: string;
  shortcutKey: string;
  descriptionKey: string;
- modifiers: string[];
+ modifiers: ShortcutModifiers;
 };
 
 // Documentation information for keyboard shortcuts that are displayed in the keyboard shortcuts informational modal
@@ -102,13 +104,13 @@ function unsubscribe(displayName: string, callbackID: string) {
 /**
  * Return platform specific modifiers for keys like Control (CMD on macOS)
  */
-function getPlatformEquivalentForKeys(keys: string[]): string[] {
+function getPlatformEquivalentForKeys(keys: ShortcutModifiers): string[] {
  return keys.map((key) => {
  if (!(key in CONST.PLATFORM_SPECIFIC_KEYS)) {
  return key;
  }
 
- const platformModifiers = CONST.PLATFORM_SPECIFIC_KEYS[key as keyof typeof CONST.PLATFORM_SPECIFIC_KEYS];
+ const platformModifiers = CONST.PLATFORM_SPECIFIC_KEYS[key];
  return platformModifiers?.[operatingSystem as keyof typeof platformModifiers] ?? platformModifiers.DEFAULT ?? key;
  });
 }
@@ -130,12 +132,12 @@ function subscribe(
  key: string,
  callback: () => void,
  descriptionKey: string,
- modifiers: string[] = ['shift'],
+ modifiers: ShortcutModifiers = ['CTRL'],
  captureOnInputs = false,
  shouldBubble = false,
  priority = 0,
  shouldPreventDefault = true,
- excludedNodes = [],
+ excludedNodes: string[] | readonly never[] = [],
  shouldStopPropagation = false,
 ) {
  const platformAdjustedModifiers = getPlatformEquivalentForKeys(modifiers);
@@ -151,7 +153,7 @@ function subscribe(
  captureOnInputs,
  shouldPreventDefault,
  shouldBubble,
- excludedNodes,
+ excludedNodes: [...excludedNodes],
  shouldStopPropagation,
  });