fixup! feat(suite-native): Introduce sticky header and footer to Bott…

…omSheetFlashList
trezor · Feb 6, 2025 · 52aae26 · 52aae26
1 parent 3c67c3f
commit 52aae26
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 41 deletions.
diff --git a/suite-native/atoms/src/Sheet/BottomSheetFlashList.tsx b/suite-native/atoms/src/Sheet/BottomSheetFlashList.tsx
@@ -5,22 +5,20 @@ import { useSafeAreaInsets } from 'react-native-safe-area-context';
 import {
     BottomSheetBackdrop,
     BottomSheetModal,
+    BottomSheetProps,
     BottomSheetFlashList as FlashList,
 } from '@gorhom/bottom-sheet';
 import { FlashListProps } from '@shopify/flash-list';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
-import { Box } from '../Box';
-
 export type BottomSheetFlashListProps<TItem> = {
     isVisible: boolean;
-    isCloseDisplayed?: boolean;
     onClose: (isVisible: boolean) => void;
     title?: ReactNode;
     subtitle?: ReactNode;
     estimatedListHeight?: number;
-    stickyListHeaderComponent?: ReactNode;
+    handleComponent?: BottomSheetProps['handleComponent'];
     stickyListFooterComponent?: ReactNode;
 } & FlashListProps<TItem>;
 
@@ -44,29 +42,17 @@ const handleStyle = prepareNativeStyle(utils => ({
     backgroundColor: utils.colors.borderDashed,
 }));
 
-const stickyListHeaderStyle = prepareNativeStyle(_ => ({
-    ...StyleSheet.absoluteFillObject,
-    bottom: undefined,
-}));
-
-const stickyListFooterStyle = prepareNativeStyle(_ => ({
-    ...StyleSheet.absoluteFillObject,
-    top: undefined,
-}));
-
 const WindowOverlay = ({ children }: { children: ReactNode }) => (
     <View style={StyleSheet.absoluteFill}>{children}</View>
 );
 
 export const BottomSheetFlashList = <TItem,>({
     isVisible,
-    isCloseDisplayed = true,
     onClose,
     title,
     subtitle,
     estimatedListHeight = 0,
-    stickyListHeaderComponent,
-    stickyListFooterComponent,
+    handleComponent,
     ...flashListProps
 }: BottomSheetFlashListProps<TItem>) => {
     const { applyStyle } = useNativeStyles();
@@ -122,19 +108,14 @@ export const BottomSheetFlashList = <TItem,>({
             handleIndicatorStyle={applyStyle(handleStyle)}
             // @ts-expect-error wrong type, doesn't expect children
             containerComponent={WindowOverlay}
+            handleComponent={handleComponent}
         >
             <FlashList
                 {...flashListProps}
                 contentContainerStyle={applyStyle(sheetContentContainerStyle, {
                     insetBottom,
                 })}
             />
-            {stickyListHeaderComponent ? (
-                <Box style={applyStyle(stickyListHeaderStyle)}>{stickyListHeaderComponent}</Box>
-            ) : null}
-            {stickyListFooterComponent ? (
-                <Box style={applyStyle(stickyListFooterStyle)}>{stickyListFooterComponent}</Box>
-            ) : null}
         </BottomSheetModal>
     );
 };
diff --git a/suite-native/atoms/src/Sheet/BottomSheetGrabber.tsx b/suite-native/atoms/src/Sheet/BottomSheetGrabber.tsx
@@ -0,0 +1,20 @@
+import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
+
+import { Box } from '../Box';
+
+const bottomSheetGrabberStyle = prepareNativeStyle(utils => ({
+    width: 32,
+    height: 4,
+    borderRadius: utils.borders.radii.round,
+    backgroundColor: utils.colors.borderDashed,
+}));
+
+export const BottomSheetGrabber = () => {
+    const { applyStyle } = useNativeStyles();
+
+    return (
+        <Box flex={1} alignItems="center">
+            <Box style={applyStyle(bottomSheetGrabberStyle)} />
+        </Box>
+    );
+};
diff --git a/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx b/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx
@@ -3,9 +3,10 @@ import { View } from 'react-native';
 
 import { prepareNativeStyle, useNativeStyles } from '@trezor/styles';
 
-import { Box } from '../Box';
 import { IconButton } from '../Button/IconButton';
 import { Text } from '../Text';
+import { BottomSheetGrabber } from './BottomSheetGrabber';
+import { Box } from '../Box';
 
 type BottomSheetHeaderProps = {
     title: ReactNode;
@@ -45,23 +46,6 @@ const titlesContainer = prepareNativeStyle<{ isCloseDisplayed: boolean }>(
     }),
 );
 
-const bottomSheetGrabberStyle = prepareNativeStyle(utils => ({
-    width: 32,
-    height: 4,
-    borderRadius: utils.borders.radii.round,
-    backgroundColor: utils.colors.borderDashed,
-}));
-
-const BottomSheetGrabber = () => {
-    const { applyStyle } = useNativeStyles();
-
-    return (
-        <Box flex={1} alignItems="center">
-            <Box style={applyStyle(bottomSheetGrabberStyle)} />
-        </Box>
-    );
-};
-
 export const BottomSheetHeader = ({
     title,
     subtitle,

diff --git a/suite-native/atoms/src/index.ts b/suite-native/atoms/src/index.ts
@@ -19,6 +19,7 @@ export * from './BottomSheetListItem';
 export * from './OrderedListIcon';
 export * from './Sheet/BottomSheet';
 export * from './Sheet/BottomSheetFlashList';
+export * from './Sheet/BottomSheetGrabber';
 export * from './Sheet/useBottomSheetAnimation';
 export * from './Button/Button';
 export * from './Button/IconButton';