Adjustments
This commit is contained in:
@@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user