Adjustments

This commit is contained in:
Dan Abramov
2024-04-27 01:03:33 +01:00
parent 6975f79df0
commit 30eadaab5f
+8 -14
View File
@@ -494,7 +494,6 @@ export function SearchScreen(
true, true,
) )
const [inputIsFocused, setInputIsFocused] = React.useState(false)
const [showAutocomplete, setShowAutocomplete] = React.useState(false) const [showAutocomplete, setShowAutocomplete] = React.useState(false)
const [searchHistory, setSearchHistory] = React.useState<string[]>([]) const [searchHistory, setSearchHistory] = React.useState<string[]>([])
@@ -533,9 +532,9 @@ export function SearchScreen(
const onPressCancelSearch = React.useCallback(() => { const onPressCancelSearch = React.useCallback(() => {
scrollToTopWeb() scrollToTopWeb()
if (inputIsFocused) { if (showAutocomplete) {
textInput.current?.blur() textInput.current?.blur()
setInputIsFocused(false) setShowAutocomplete(false)
setSearchText(queryParam) setSearchText(queryParam)
} else { } else {
// If we just `setParams` and set `q` to an empty string, the URL still displays `q=`, which isn't pretty. // If we just `setParams` and set `q` to an empty string, the URL still displays `q=`, which isn't pretty.
@@ -548,15 +547,11 @@ export function SearchScreen(
navigation.setParams({q: ''}) navigation.setParams({q: ''})
} }
} }
}, [inputIsFocused, navigation, queryParam]) }, [showAutocomplete, navigation, queryParam])
const onChangeText = React.useCallback(async (text: string) => { const onChangeText = React.useCallback(async (text: string) => {
scrollToTopWeb() scrollToTopWeb()
setSearchText(text) setSearchText(text)
if (text.length > 0) {
setShowAutocomplete(true)
}
}, []) }, [])
const updateSearchHistory = React.useCallback( const updateSearchHistory = React.useCallback(
@@ -591,7 +586,7 @@ export function SearchScreen(
navigation.push('Search', {q: searchText}) navigation.push('Search', {q: searchText})
} else { } else {
textInput.current?.blur() textInput.current?.blur()
setInputIsFocused(false) setShowAutocomplete(false)
navigation.setParams({q: searchText}) navigation.setParams({q: searchText})
} }
}, [navigation, searchText, updateSearchHistory]) }, [navigation, searchText, updateSearchHistory])
@@ -673,8 +668,7 @@ export function SearchScreen(
value={searchText} value={searchText}
style={[pal.text, styles.headerSearchInput]} style={[pal.text, styles.headerSearchInput]}
keyboardAppearance={theme.colorScheme} keyboardAppearance={theme.colorScheme}
onFocus={() => setInputIsFocused(true)} onFocus={() => setShowAutocomplete(true)}
onBlur={() => setInputIsFocused(false)}
onChangeText={onChangeText} onChangeText={onChangeText}
onSubmitEditing={onSubmit} onSubmitEditing={onSubmit}
autoFocus={false} autoFocus={false}
@@ -685,7 +679,7 @@ export function SearchScreen(
autoComplete="off" autoComplete="off"
autoCapitalize="none" autoCapitalize="none"
/> />
{inputIsFocused ? ( {showAutocomplete ? (
<Pressable <Pressable
testID="searchTextInputClearBtn" testID="searchTextInputClearBtn"
onPress={onPressClearQuery} onPress={onPressClearQuery}
@@ -702,7 +696,7 @@ export function SearchScreen(
) : undefined} ) : undefined}
</View> </View>
{(queryParam || inputIsFocused) && ( {(queryParam || showAutocomplete) && (
<View style={styles.headerCancelBtn}> <View style={styles.headerCancelBtn}>
<Pressable <Pressable
onPress={onPressCancelSearch} onPress={onPressCancelSearch}
@@ -758,7 +752,7 @@ export function SearchScreen(
</ScrollView> </ScrollView>
)} )}
</> </>
) : !queryParam && inputIsFocused ? ( ) : !queryParam && showAutocomplete ? (
<CenteredView <CenteredView
sideBorders={isTabletOrDesktop} sideBorders={isTabletOrDesktop}
// @ts-ignore web only -prf // @ts-ignore web only -prf