Create global keyboard shortcut handler (#10145)

src/components/forms/SearchInput.tsx

@@ -1,8 +1,9 @@
-import {forwardRef} from 'react'
+import {useEffect, useRef} from 'react'
 import {type TextInput, View} from 'react-native'
 import {useLingui} from '@lingui/react/macro'
 
 import {HITSLOP_10} from '#/lib/constants'
+import {listenFocusSearch} from '#/state/events'
 import {atoms as a, useTheme} from '#/alf'
 import {Button, ButtonIcon} from '#/components/Button'
 import * as TextField from '#/components/forms/TextField'
@@ -10,73 +11,89 @@ import {MagnifyingGlass_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/
 import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 import {IS_NATIVE} from '#/env'
 
-type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
+type Props = Omit<TextField.InputProps, 'label'> & {
   label?: TextField.InputProps['label']
   /**
    * Called when the user presses the (X) button
    */
   onClearText?: () => void
+  hotkey?: boolean
+  ref?: React.RefObject<TextInput | null>
 }
 
-export const SearchInput = forwardRef<TextInput, SearchInputProps>(
-  function SearchInput({value, label, onClearText, ...rest}, ref) {
-    const t = useTheme()
-    const {t: l} = useLingui()
-    const showClear = value && value.length > 0
+export function SearchInput({
+  value,
+  label,
+  onClearText,
+  hotkey,
+  ref,
+  ...rest
+}: Props) {
+  const t = useTheme()
+  const {t: l} = useLingui()
+  const showClear = value && value.length > 0
+  const internalRef = useRef<TextInput>(null)
+  const inputRef = ref ?? internalRef
 
-    return (
-      <View style={[a.w_full, a.relative]}>
-        <TextField.Root>
-          <TextField.Icon icon={MagnifyingGlassIcon} />
-          <TextField.Input
-            inputRef={ref}
-            label={label || l`Search`}
-            value={value}
-            placeholder={l`Search`}
-            returnKeyType="search"
-            keyboardAppearance={t.scheme}
-            selectTextOnFocus={IS_NATIVE}
-            autoFocus={false}
-            accessibilityRole="search"
-            autoCorrect={false}
-            autoComplete="off"
-            autoCapitalize="none"
-            style={[
-              showClear
-                ? {
-                    paddingRight: 24,
-                  }
-                : {},
-            ]}
-            {...rest}
-          />
-        </TextField.Root>
+  useEffect(() => {
+    if (!hotkey) return
+    return listenFocusSearch(() => {
+      inputRef.current?.focus()
+    })
+  }, [hotkey, inputRef])
 
-        {showClear && (
-          <View
-            style={[
-              a.absolute,
-              a.z_20,
-              a.my_auto,
-              a.inset_0,
-              a.justify_center,
-              a.pr_sm,
-              {left: 'auto'},
-            ]}>
-            <Button
-              testID="searchTextInputClearBtn"
-              onPress={onClearText}
-              label={l`Clear search query`}
-              hitSlop={HITSLOP_10}
-              size="tiny"
-              shape="round"
-              variant="ghost"
-              color="secondary">
-              <ButtonIcon icon={X} size="xs" />
-            </Button>
-          </View>
-        )}
-      </View>
-    )
-  },
-)
+  return (
+    <View style={[a.w_full, a.relative]}>
+      <TextField.Root>
+        <TextField.Icon icon={MagnifyingGlassIcon} />
+        <TextField.Input
+          inputRef={inputRef}
+          label={label || l`Search`}
+          value={value}
+          placeholder={l`Search`}
+          returnKeyType="search"
+          keyboardAppearance={t.scheme}
+          selectTextOnFocus={IS_NATIVE}
+          autoFocus={false}
+          accessibilityRole="search"
+          autoCorrect={false}
+          autoComplete="off"
+          autoCapitalize="none"
+          style={[
+            showClear
+              ? {
+                  paddingRight: 24,
+                }
+              : {},
+          ]}
+          {...rest}
+        />
+      </TextField.Root>
+
+      {showClear && (
+        <View
+          style={[
+            a.absolute,
+            a.z_20,
+            a.my_auto,
+            a.inset_0,
+            a.justify_center,
+            a.pr_sm,
+            {left: 'auto'},
+          ]}>
+          <Button
+            testID="searchTextInputClearBtn"
+            onPress={onClearText}
+            label={l`Clear search query`}
+            hitSlop={HITSLOP_10}
+            size="tiny"
+            shape="round"
+            variant="ghost"
+            color="secondary">
+            <ButtonIcon icon={X} size="xs" />
+          </Button>
+        </View>
+      )}
+    </View>
+  )
+}