diff options
Diffstat (limited to 'src/view/screens/Search/Search.tsx')
-rw-r--r-- | src/view/screens/Search/Search.tsx | 95 |
1 files changed, 11 insertions, 84 deletions
diff --git a/src/view/screens/Search/Search.tsx b/src/view/screens/Search/Search.tsx index 77ef448ed..4a6c87f10 100644 --- a/src/view/screens/Search/Search.tsx +++ b/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, |