ALF text input for generic search input

src/components/forms/SearchInput.tsx

@@ -0,0 +1,75 @@
+import React from 'react'
+import {TextInput, View} from 'react-native'
+import {msg} from '@lingui/macro'
+import {useLingui} from '@lingui/react'
+
+import {HITSLOP_10} from '#/lib/constants'
+import {isNative} from '#/platform/detection'
+import {atoms as a, useTheme} from '#/alf'
+import {Button, ButtonIcon} from '#/components/Button'
+import * as TextField from '#/components/forms/TextField'
+import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlassIcon} from '#/components/icons/MagnifyingGlass2'
+import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
+
+type SearchInputProps = Omit<TextField.InputProps, 'label'> & {
+  label?: TextField.InputProps['label']
+  /**
+   * Called when the user presses the (X) button
+   */
+  onClearText?: () => void
+}
+
+export const SearchInput = React.forwardRef<TextInput, SearchInputProps>(
+  function SearchInput({value, label, onClearText, ...rest}, ref) {
+    const t = useTheme()
+    const {_} = useLingui()
+
+    return (
+      <View style={[a.w_full, a.relative]}>
+        <TextField.Root>
+          <TextField.Icon icon={MagnifyingGlassIcon} />
+          <TextField.Input
+            inputRef={ref}
+            label={label || _(msg`Search`)}
+            value={value}
+            placeholder={_(msg`Search`)}
+            returnKeyType="search"
+            keyboardAppearance={t.scheme}
+            selectTextOnFocus={isNative}
+            autoFocus={false}
+            accessibilityRole="search"
+            autoCorrect={false}
+            autoComplete="off"
+            autoCapitalize="none"
+            {...rest}
+          />
+        </TextField.Root>
+
+        {value && value.length > 0 && (
+          <View
+            style={[
+              a.absolute,
+              a.z_10,
+              a.my_auto,
+              a.inset_0,
+              a.justify_center,
+              a.pr_sm,
+              {left: 'auto'},
+            ]}>
+            <Button
+              testID="searchTextInputClearBtn"
+              onPress={onClearText}
+              label={_(msg`Clear search query`)}
+              hitSlop={HITSLOP_10}
+              size="tiny"
+              shape="round"
+              variant="ghost"
+              color="secondary">
+              <ButtonIcon icon={X} size="xs" />
+            </Button>
+          </View>
+        )}
+      </View>
+    )
+  },
+)

src/components/forms/TextField.tsx

@@ -126,7 +126,7 @@ export type InputProps = Omit<TextInputProps, 'value' | 'onChangeText'> & {
   value?: string
   onChangeText?: (value: string) => void
   isInvalid?: boolean
-  inputRef?: React.RefObject<TextInput>
+  inputRef?: React.RefObject<TextInput> | React.ForwardedRef<TextInput>
 }
 
 export function createInput(Component: typeof TextInput) {

src/screens/StarterPack/Wizard/StepFeeds.tsx

@@ -4,17 +4,17 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {AppBskyFeedDefs, ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
+import {DISCOVER_FEED_URI} from '#/lib/constants'
 import {useA11y} from '#/state/a11y'
-import {DISCOVER_FEED_URI} from 'lib/constants'
 import {
   useGetPopularFeedsQuery,
   usePopularFeedsSearch,
   useSavedFeeds,
-} from 'state/queries/feed'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
-import {List} from 'view/com/util/List'
+} from '#/state/queries/feed'
+import {List} from '#/view/com/util/List'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {useThrottledValue} from '#/components/hooks/useThrottledValue'
 import {Loader} from '#/components/Loader'
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
@@ -81,20 +81,18 @@ export function StepFeeds({moderationOpts}: {moderationOpts: ModerationOpts}) {
   return (
     <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
-        <View style={[a.my_sm, a.px_md, {height: 40}]}>
+        <View style={[a.py_sm, a.px_md, {height: 60}]}>
           <SearchInput
-            query={query}
-            onChangeQuery={t => setQuery(t)}
-            onPressCancelSearch={() => setQuery('')}
-            onSubmitQuery={() => {}}
+            value={query}
+            onChangeText={t => setQuery(t)}
+            onClearText={() => setQuery('')}
           />
         </View>
       </View>
       <List
         data={query ? searchedFeeds : suggestedFeeds}
         renderItem={renderItem}
         keyExtractor={keyExtractor}
-        contentContainerStyle={{paddingTop: 6}}
         onEndReached={
           !query && !screenReaderEnabled ? () => fetchNextPage() : undefined
         }

src/screens/StarterPack/Wizard/StepProfiles.tsx

@@ -4,14 +4,14 @@ import {KeyboardAwareScrollView} from 'react-native-keyboard-controller'
 import {AppBskyActorDefs, ModerationOpts} from '@atproto/api'
 import {Trans} from '@lingui/macro'
 
+import {isNative} from '#/platform/detection'
 import {useA11y} from '#/state/a11y'
-import {isNative} from 'platform/detection'
-import {useActorAutocompleteQuery} from 'state/queries/actor-autocomplete'
-import {useActorSearchPaginated} from 'state/queries/actor-search'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
-import {List} from 'view/com/util/List'
+import {useActorAutocompleteQuery} from '#/state/queries/actor-autocomplete'
+import {useActorSearchPaginated} from '#/state/queries/actor-search'
+import {List} from '#/view/com/util/List'
 import {useWizardState} from '#/screens/StarterPack/Wizard/State'
 import {atoms as a, useTheme} from '#/alf'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {Loader} from '#/components/Loader'
 import {ScreenTransition} from '#/components/StarterPack/Wizard/ScreenTransition'
 import {WizardProfileCard} from '#/components/StarterPack/Wizard/WizardListCard'
@@ -65,12 +65,11 @@ export function StepProfiles({
   return (
     <ScreenTransition style={[a.flex_1]} direction={state.transitionDirection}>
       <View style={[a.border_b, t.atoms.border_contrast_medium]}>
-        <View style={[a.my_sm, a.px_md, {height: 40}]}>
+        <View style={[a.py_sm, a.px_md, {height: 60}]}>
           <SearchInput
-            query={query}
-            onChangeQuery={setQuery}
-            onPressCancelSearch={() => setQuery('')}
-            onSubmitQuery={() => {}}
+            value={query}
+            onChangeText={setQuery}
+            onClearText={() => setQuery('')}
           />
         </View>
       </View>

src/view/screens/Feeds.tsx

@@ -6,6 +6,12 @@ import {useLingui} from '@lingui/react'
 import {useFocusEffect} from '@react-navigation/native'
 import debounce from 'lodash.debounce'
 
+import {usePalette} from '#/lib/hooks/usePalette'
+import {useWebMediaQueries} from '#/lib/hooks/useWebMediaQueries'
+import {ComposeIcon2} from '#/lib/icons'
+import {CommonNavigatorParams, NativeStackScreenProps} from '#/lib/routes/types'
+import {cleanError} from '#/lib/strings/errors'
+import {s} from '#/lib/styles'
 import {isNative, isWeb} from '#/platform/detection'
 import {
   SavedFeedItem,
@@ -16,25 +22,19 @@ import {
 import {useSession} from '#/state/session'
 import {useSetMinimalShellMode} from '#/state/shell'
 import {useComposerControls} from '#/state/shell/composer'
-import {usePalette} from 'lib/hooks/usePalette'
-import {useWebMediaQueries} from 'lib/hooks/useWebMediaQueries'
-import {ComposeIcon2} from 'lib/icons'
-import {CommonNavigatorParams, NativeStackScreenProps} from 'lib/routes/types'
-import {cleanError} from 'lib/strings/errors'
-import {s} from 'lib/styles'
-import {ErrorMessage} from 'view/com/util/error/ErrorMessage'
-import {FAB} from 'view/com/util/fab/FAB'
-import {SearchInput} from 'view/com/util/forms/SearchInput'
-import {TextLink} from 'view/com/util/Link'
-import {List} from 'view/com/util/List'
-import {FeedFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
-import {Text} from 'view/com/util/text/Text'
-import {ViewHeader} from 'view/com/util/ViewHeader'
+import {ErrorMessage} from '#/view/com/util/error/ErrorMessage'
+import {FAB} from '#/view/com/util/fab/FAB'
+import {TextLink} from '#/view/com/util/Link'
+import {List} from '#/view/com/util/List'
+import {FeedFeedLoadingPlaceholder} from '#/view/com/util/LoadingPlaceholder'
+import {Text} from '#/view/com/util/text/Text'
+import {ViewHeader} from '#/view/com/util/ViewHeader'
 import {NoFollowingFeed} from '#/screens/Feeds/NoFollowingFeed'
 import {NoSavedFeedsOfAnyType} from '#/screens/Feeds/NoSavedFeedsOfAnyType'
 import {atoms as a, useTheme} from '#/alf'
 import {Divider} from '#/components/Divider'
 import * as FeedCard from '#/components/FeedCard'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {IconCircle} from '#/components/IconCircle'
 import {ChevronRight_Stroke2_Corner0_Rounded as ChevronRight} from '#/components/icons/Chevron'
 import {FilterTimeline_Stroke2_Corner0_Rounded as FilterTimeline} from '#/components/icons/FilterTimeline'
@@ -481,11 +481,12 @@ export function FeedsScreen(_props: Props) {
             <FeedsAboutHeader />
             <View style={{paddingHorizontal: 12, paddingBottom: 4}}>
               <SearchInput
-                query={query}
-                onChangeQuery={onChangeQuery}
-                onPressCancelSearch={onPressCancelSearch}
-                onSubmitQuery={onSubmitQuery}
-                setIsInputFocused={onChangeSearchFocus}
+                value={query}
+                onChangeText={onChangeQuery}
+                onClearText={onPressCancelSearch}
+                onSubmitEditing={onSubmitQuery}
+                onFocus={() => onChangeSearchFocus(true)}
+                onBlur={() => onChangeSearchFocus(false)}
               />
             </View>
           </>