zio
/
bsky-app
2
0
Fork 0
Code Pull Requests Packages Releases Activity

Remove layout animation from search (#3751)

zio/stable
dan 2024-04-29 16:11:59 +01:00 committed by GitHub
parent 388c4f79cf
commit 3c2d73909b
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 19 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
src/view/screens/Search/Search.tsx
View File

@ -7,13 +7,6 @@ import {
TextInput, TextInput,
View, View,
} from 'react-native' } from 'react-native'
import Animated, {
FadeIn,
FadeOut,
LinearTransition,
useAnimatedStyle,
withSpring,
} from 'react-native-reanimated'
import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api' import {AppBskyActorDefs, AppBskyFeedDefs, moderateProfile} from '@atproto/api'
import { import {
FontAwesomeIcon, FontAwesomeIcon,
@ -63,7 +56,6 @@ import {
} from '#/view/shell/desktop/Search' } from '#/view/shell/desktop/Search'
import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder' import {ProfileCardFeedLoadingPlaceholder} from 'view/com/util/LoadingPlaceholder'
import {atoms as a} from '#/alf' import {atoms as a} from '#/alf'
const AnimatedPressable = Animated.createAnimatedComponent(Pressable)
function Loader() { function Loader() {
const pal = usePalette('default') const pal = usePalette('default')
@ -624,14 +616,6 @@ export function SearchScreen(
) )
} }
const showClearButton = showAutocomplete && searchText.length > 0
const clearButtonStyle = useAnimatedStyle(() => ({
opacity: withSpring(showClearButton ? 1 : 0, {
overshootClamping: true,
duration: 50,
}),
}))
return ( return (
<View style={isWeb ? null : {flex: 1}}> <View style={isWeb ? null : {flex: 1}}>
<CenteredView <CenteredView
@ -659,13 +643,12 @@ export function SearchScreen(
</Pressable> </Pressable>
)} )}
<AnimatedPressable <Pressable
// This only exists only for extra hitslop so don't expose it to the a11y tree. // This only exists only for extra hitslop so don't expose it to the a11y tree.
accessible={false} accessible={false}
focusable={false} focusable={false}
// @ts-ignore web-only // @ts-ignore web-only
tabIndex={-1} tabIndex={-1}
layout={isNative ? LinearTransition.duration(200) : undefined}
style={[ style={[
{backgroundColor: pal.colors.backgroundLight}, {backgroundColor: pal.colors.backgroundLight},
styles.headerSearchContainer, styles.headerSearchContainer,
@ -718,36 +701,32 @@ export function SearchScreen(
autoComplete="off" autoComplete="off"
autoCapitalize="none" autoCapitalize="none"
/> />
<AnimatedPressable {showAutocomplete && searchText.length > 0 && (
layout={isNative ? LinearTransition.duration(200) : undefined} <Pressable
disabled={!showClearButton} testID="searchTextInputClearBtn"
style={clearButtonStyle} onPress={onPressClearQuery}
testID="searchTextInputClearBtn" accessibilityRole="button"
onPress={onPressClearQuery} accessibilityLabel={_(msg`Clear search query`)}
accessibilityRole="button" accessibilityHint=""
accessibilityLabel={_(msg`Clear search query`)} hitSlop={HITSLOP_10}>
accessibilityHint="" <FontAwesomeIcon
hitSlop={HITSLOP_10}> icon="xmark"
<FontAwesomeIcon size={16}
icon="xmark" style={pal.textLight as FontAwesomeIconStyle}
size={16} />
style={pal.textLight as FontAwesomeIconStyle} </Pressable>
/> )}
</AnimatedPressable> </Pressable>
</AnimatedPressable>
{showAutocomplete && ( {showAutocomplete && (
<View style={[styles.headerCancelBtn]}> <View style={[styles.headerCancelBtn]}>
<AnimatedPressable <Pressable
entering={isNative ? FadeIn.duration(300) : undefined}
exiting={isNative ? FadeOut.duration(50) : undefined}
key="cancel"
onPress={onPressCancelSearch} onPress={onPressCancelSearch}
accessibilityRole="button" accessibilityRole="button"
hitSlop={HITSLOP_10}> hitSlop={HITSLOP_10}>
<Text style={pal.text}> <Text style={pal.text}>
<Trans>Cancel</Trans> <Trans>Cancel</Trans>
</Text> </Text>
</AnimatedPressable> </Pressable>
</View> </View>
)} )}
</CenteredView> </CenteredView>