fixup! feat(suite-native): Mobile Trade: Token picker modal visual stub

trezor · Feb 6, 2025 · 3c67c3f · 3c67c3f
1 parent aba62ff
commit 3c67c3f
Show file tree

Hide file tree

Showing 3 changed files with 58 additions and 29 deletions.
diff --git a/suite-native/module-trading/src/components/general/SearchInputWithCancel.tsx b/suite-native/module-trading/src/components/general/SearchInputWithCancel.tsx
@@ -1,18 +1,29 @@
 import { useRef, useState } from 'react';
 import { TextInput } from 'react-native';
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
 
-import { Box, HStack, SearchInput, SearchInputProps, TextButton } from '@suite-native/atoms';
+import { HStack, SearchInput, SearchInputProps, TextButton } from '@suite-native/atoms';
 import { Translation, useTranslate } from '@suite-native/intl';
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
 export type SearchInputWithCancelProps = Omit<SearchInputProps, 'placeholder' | 'elevation'>;
 
 const noOp = () => {};
 
+const inputWrapperStyle = prepareNativeStyle(_ => ({
+    flex: 1,
+}));
+
+const buttonWrapperStyle = prepareNativeStyle(({ spacings }) => ({
+    height: spacings.sp24,
+}));
+
 export const SearchInputWithCancel = ({
     onFocus = noOp,
     onBlur = noOp,
     ...props
 }: SearchInputWithCancelProps) => {
+    const { applyStyle } = useNativeStyles();
     const { translate } = useTranslate();
     const [isInputActive, setIsInputActive] = useState(false);
     const inputRef = useRef<TextInput>(null);
@@ -24,7 +35,7 @@ export const SearchInputWithCancel = ({
 
     return (
         <HStack alignItems="center">
-            <Box flex={1}>
+            <Animated.View layout={LinearTransition} style={applyStyle(inputWrapperStyle)}>
                 <SearchInput
                     ref={inputRef}
                     placeholder={translate('moduleTrading.defaultSearchLabel')}
@@ -38,12 +49,20 @@ export const SearchInputWithCancel = ({
                     }}
                     {...props}
                 />
-            </Box>
-            {isInputActive && (
-                <TextButton onPress={handleCancel}>
-                    <Translation id="generic.buttons.cancel" />
-                </TextButton>
-            )}
+            </Animated.View>
+            <Animated.View layout={LinearTransition} style={applyStyle(buttonWrapperStyle)}>
+                {isInputActive && (
+                    <Animated.View
+                        layout={LinearTransition}
+                        entering={FadeIn.delay(100)}
+                        exiting={FadeOut}
+                    >
+                        <TextButton onPress={handleCancel}>
+                            <Translation id="generic.buttons.cancel" />
+                        </TextButton>
+                    </Animated.View>
+                )}
+            </Animated.View>
         </HStack>
     );
 };
diff --git a/.../module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsFilterTabs.tsx b/.../module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsFilterTabs.tsx
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import Animated, { FadeIn } from 'react-native-reanimated';
+import Animated, { FadeIn, FadeOut } from 'react-native-reanimated';
 
 import { Button } from '@suite-native/atoms';
 
@@ -56,6 +56,7 @@ export const TradeableAssetsFilterTabs = ({
     return (
         <Animated.FlatList
             entering={FadeIn.duration(animationDuration)}
+            exiting={FadeOut.duration(animationDuration)}
             horizontal
             showsHorizontalScrollIndicator={false}
             data={mockTabNames}

diff --git a/...module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx b/...module-trading/src/components/general/TradeableAssetsSheet/TradeableAssetsSheetHeader.tsx
@@ -1,5 +1,5 @@
 import { useMemo, useState } from 'react';
-import Animated, { FadeIn } from 'react-native-reanimated';
+import Animated, { FadeIn, FadeOut, LinearTransition } from 'react-native-reanimated';
 
 import { LinearGradient } from 'expo-linear-gradient';
 
@@ -11,8 +11,8 @@ import { useNativeStyles } from '@trezor/styles';
 import { TradeableAssetsFilterTabs } from './TradeableAssetsFilterTabs';
 import { SearchInputWithCancel } from '../SearchInputWithCancel';
 
-export const SHEET_HEADER_HEIGHT = 110 as const;
-const FOCUS_ANIMATION_DURATION = 500 as const;
+export const SHEET_HEADER_HEIGHT = 140 as const;
+const FOCUS_ANIMATION_DURATION = 300 as const;
 
 const GRADIENT_START = { x: 0.5, y: 0.9 } as const;
 const GRADIENT_END = { x: 0.5, y: 1 } as const;
@@ -34,23 +34,32 @@ export const TradeableAssetsSheetHeader = () => {
     return (
         <LinearGradient colors={gradientColors} start={GRADIENT_START} end={GRADIENT_END}>
             <VStack spacing="sp16" padding="sp16">
-                {!isFilterActive && (
-                    <Animated.View entering={FadeIn.duration(FOCUS_ANIMATION_DURATION)}>
-                        <Text variant="highlight" textAlign="center">
-                            <Translation id="moduleTrading.tradeableAssetsSheet.title" />
-                        </Text>
-                    </Animated.View>
-                )}
-                <SearchInputWithCancel
-                    onChange={setFilterValue}
-                    onFocus={() => setIsFilterActive(true)}
-                    onBlur={() => setIsFilterActive(false)}
-                    value={filterValue}
-                />
-                <TradeableAssetsFilterTabs
-                    visible={isFilterActive}
-                    animationDuration={FOCUS_ANIMATION_DURATION}
-                />
+                <Animated.View layout={LinearTransition.duration(FOCUS_ANIMATION_DURATION)}>
+                    {!isFilterActive && (
+                        <Animated.View
+                            entering={FadeIn.duration(FOCUS_ANIMATION_DURATION)}
+                            exiting={FadeOut.duration(FOCUS_ANIMATION_DURATION)}
+                        >
+                            <Text variant="highlight" textAlign="center">
+                                <Translation id="moduleTrading.tradeableAssetsSheet.title" />
+                            </Text>
+                        </Animated.View>
+                    )}
+                </Animated.View>
+                <Animated.View layout={LinearTransition.duration(FOCUS_ANIMATION_DURATION)}>
+                    <SearchInputWithCancel
+                        onChange={setFilterValue}
+                        onFocus={() => setIsFilterActive(true)}
+                        onBlur={() => setIsFilterActive(false)}
+                        value={filterValue}
+                    />
+                </Animated.View>
+                <Animated.View layout={LinearTransition.duration(FOCUS_ANIMATION_DURATION)}>
+                    <TradeableAssetsFilterTabs
+                        visible={isFilterActive}
+                        animationDuration={FOCUS_ANIMATION_DURATION}
+                    />
+                </Animated.View>
             </VStack>
         </LinearGradient>
     );