diff --git a/suite-native/atoms/src/Sheet/BottomSheetFlashList.tsx b/suite-native/atoms/src/Sheet/BottomSheetFlashList.tsx index 0b22a38dd41c..7927d85ccad1 100644 --- 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 = { isVisible: boolean; - isCloseDisplayed?: boolean; onClose: (isVisible: boolean) => void; title?: ReactNode; subtitle?: ReactNode; estimatedListHeight?: number; - stickyListHeaderComponent?: ReactNode; + handleComponent?: BottomSheetProps['handleComponent']; stickyListFooterComponent?: ReactNode; } & FlashListProps; @@ -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 }) => ( {children} ); export const BottomSheetFlashList = ({ isVisible, - isCloseDisplayed = true, onClose, title, subtitle, estimatedListHeight = 0, - stickyListHeaderComponent, - stickyListFooterComponent, + handleComponent, ...flashListProps }: BottomSheetFlashListProps) => { const { applyStyle } = useNativeStyles(); @@ -122,6 +108,7 @@ export const BottomSheetFlashList = ({ handleIndicatorStyle={applyStyle(handleStyle)} // @ts-expect-error wrong type, doesn't expect children containerComponent={WindowOverlay} + handleComponent={handleComponent} > ({ insetBottom, })} /> - {stickyListHeaderComponent ? ( - {stickyListHeaderComponent} - ) : null} - {stickyListFooterComponent ? ( - {stickyListFooterComponent} - ) : null} ); }; diff --git a/suite-native/atoms/src/Sheet/BottomSheetGrabber.tsx b/suite-native/atoms/src/Sheet/BottomSheetGrabber.tsx new file mode 100644 index 000000000000..f6ae314e7091 --- /dev/null +++ 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 ( + + + + ); +}; diff --git a/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx b/suite-native/atoms/src/Sheet/BottomSheetHeader.tsx index 519e26cd7a3c..d68e19eb6cd5 100644 --- 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 ( - - - - ); -}; - export const BottomSheetHeader = ({ title, subtitle, diff --git a/suite-native/atoms/src/index.ts b/suite-native/atoms/src/index.ts index 12eeedbdfd04..02eaf8b7e479 100644 --- 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';