ALF text input for generic search input (#5511)

* alf text input for generic search input

* clearer ref naming

* Adjust props and definition

* Migrate props

* Migrate props

* Migrate props

* Replace on search screen

* rm old props

---------

Co-authored-by: Eric Bailey <git@esb.lol>

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>
           </>

src/view/screens/Search/Search.tsx

@@ -62,12 +62,10 @@ import {makeSearchQuery, parseSearchQuery} from '#/screens/Search/utils'
 import {atoms as a, useBreakpoints, useTheme as useThemeNew, web} from '#/alf'
 import {Button, ButtonIcon, ButtonText} from '#/components/Button'
 import * as FeedCard from '#/components/FeedCard'
-import * as TextField from '#/components/forms/TextField'
+import {SearchInput} from '#/components/forms/SearchInput'
 import {ChevronBottom_Stroke2_Corner0_Rounded as ChevronDown} from '#/components/icons/Chevron'
-import {MagnifyingGlass2_Stroke2_Corner0_Rounded as MagnifyingGlass} from '#/components/icons/MagnifyingGlass2'
 import {Menu_Stroke2_Corner0_Rounded as Menu} from '#/components/icons/Menu'
 import {SettingsGear2_Stroke2_Corner0_Rounded as Gear} from '#/components/icons/SettingsGear2'
-import {TimesLarge_Stroke2_Corner0_Rounded as X} from '#/components/icons/Times'
 
 function Loader() {
   const pal = usePalette('default')
@@ -864,15 +862,16 @@ export function SearchScreen(
               <ButtonIcon icon={Menu} size="lg" />
             </Button>
           )}
-          <SearchInputBox
-            textInput={textInput}
-            searchText={searchText}
-            showAutocomplete={showAutocomplete}
-            onFocus={onSearchInputFocus}
-            onChangeText={onChangeText}
-            onSubmit={onSubmit}
-            onPressClearQuery={onPressClearQuery}
-          />
+          <View style={[a.flex_1]}>
+            <SearchInput
+              ref={textInput}
+              value={searchText}
+              onFocus={onSearchInputFocus}
+              onChangeText={onChangeText}
+              onClearText={onPressClearQuery}
+              onSubmitEditing={onSubmit}
+            />
+          </View>
           {showFiltersButton && (
             <Button
               onPress={() => setShowFilters(!showFilters)}
@@ -961,78 +960,6 @@ export function SearchScreen(
   )
 }
 
-let SearchInputBox = ({
-  textInput,
-  searchText,
-  showAutocomplete,
-  onFocus,
-  onChangeText,
-  onSubmit,
-  onPressClearQuery,
-}: {
-  textInput: React.RefObject<TextInput>
-  searchText: string
-  showAutocomplete: boolean
-  onFocus: () => void
-  onChangeText: (text: string) => void
-  onSubmit: () => void
-  onPressClearQuery: () => void
-}): React.ReactNode => {
-  const {_} = useLingui()
-  const t = useThemeNew()
-
-  return (
-    <View style={[a.flex_1]}>
-      <TextField.Root>
-        <TextField.Icon icon={MagnifyingGlass} />
-        <TextField.Input
-          inputRef={textInput}
-          label={_(msg`Search`)}
-          value={searchText}
-          placeholder={_(msg`Search`)}
-          returnKeyType="search"
-          onChangeText={onChangeText}
-          onSubmitEditing={onSubmit}
-          onFocus={onFocus}
-          keyboardAppearance={t.scheme}
-          selectTextOnFocus={isNative}
-          autoFocus={false}
-          accessibilityRole="search"
-          autoCorrect={false}
-          autoComplete="off"
-          autoCapitalize="none"
-        />
-      </TextField.Root>
-
-      {showAutocomplete && searchText.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={onPressClearQuery}
-            label={_(msg`Clear search query`)}
-            hitSlop={HITSLOP_10}
-            size="tiny"
-            shape="round"
-            variant="ghost"
-            color="secondary">
-            <ButtonIcon icon={X} size="sm" />
-          </Button>
-        </View>
-      )}
-    </View>
-  )
-}
-SearchInputBox = React.memo(SearchInputBox)
-
 let AutocompleteResults = ({
   isAutocompleteFetching,
   autocompleteData,