From 2ec946bd0befac24e812c7431e3587df5f65be41 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 1 Aug 2024 20:02:57 +0200 Subject: [PATCH 1/3] fix: fix modal centering --- src/components/EmptyStateComponent/index.tsx | 15 ++------------- src/components/EmptyStateComponent/types.ts | 1 - .../workspace/expensifyCard/EmptyCardView.tsx | 10 +++++++--- 3 files changed, 9 insertions(+), 17 deletions(-) diff --git a/src/components/EmptyStateComponent/index.tsx b/src/components/EmptyStateComponent/index.tsx index 56f8fa5e3d83..1bf7929c9441 100644 --- a/src/components/EmptyStateComponent/index.tsx +++ b/src/components/EmptyStateComponent/index.tsx @@ -14,18 +14,7 @@ import type {EmptyStateComponentProps, VideoLoadedEventType} from './types'; const VIDEO_ASPECT_RATIO = 400 / 225; -function EmptyStateComponent({ - SkeletonComponent, - headerMediaType, - headerMedia, - buttonText, - buttonAction, - title, - subtitle, - headerStyles, - headerContentStyles, - emptyStateForegroundStyles, -}: EmptyStateComponentProps) { +function EmptyStateComponent({SkeletonComponent, headerMediaType, headerMedia, buttonText, buttonAction, title, subtitle, headerStyles, headerContentStyles}: EmptyStateComponentProps) { const styles = useThemeStyles(); const {isSmallScreenWidth} = useWindowDimensions(); const [videoAspectRatio, setVideoAspectRatio] = useState(VIDEO_ASPECT_RATIO); @@ -86,7 +75,7 @@ function EmptyStateComponent({ shouldAnimate={false} /> - + {HeaderComponent} diff --git a/src/components/EmptyStateComponent/types.ts b/src/components/EmptyStateComponent/types.ts index 258e8a610e16..326b25542f42 100644 --- a/src/components/EmptyStateComponent/types.ts +++ b/src/components/EmptyStateComponent/types.ts @@ -19,7 +19,6 @@ type SharedProps = { headerStyles?: StyleProp; headerMediaType: T; headerContentStyles?: StyleProp; - emptyStateForegroundStyles?: StyleProp; }; type MediaType = SharedProps & { diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx index a7d2b9949703..6c557cbad1b2 100644 --- a/src/pages/workspace/expensifyCard/EmptyCardView.tsx +++ b/src/pages/workspace/expensifyCard/EmptyCardView.tsx @@ -6,8 +6,10 @@ import ScrollView from '@components/ScrollView'; import CardRowSkeleton from '@components/Skeletons/CardRowSkeleton'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; +import getPlatform from '@libs/getPlatform'; import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; @@ -15,16 +17,19 @@ const HEADER_HEIGHT = 80; const BUTTON_HEIGHT = 40; const BUTTON_MARGIN = 12; +const isIOSNative = getPlatform() === CONST.PLATFORM.IOS; + function EmptyCardView() { const {translate} = useLocalize(); const styles = useThemeStyles(); const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); - const headerHeight = isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT; + const safeAreaInsets = useSafeAreaInsets(); + const headerHeight = isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN + (isIOSNative ? safeAreaInsets.top : 0) : HEADER_HEIGHT; return ( - + {translate('workspace.expensifyCard.disclaimer')} From 454a736b3a3b2f5b6d9fde701d4367c6ea7a3cfc Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 8 Aug 2024 12:42:45 +0200 Subject: [PATCH 2/3] fix: create platform specific hooks --- src/hooks/useEmptyViewHeaderHeight/CONST.ts | 5 +++++ src/hooks/useEmptyViewHeaderHeight/index.ios.ts | 10 ++++++++++ src/hooks/useEmptyViewHeaderHeight/index.ts | 7 +++++++ src/pages/workspace/expensifyCard/EmptyCardView.tsx | 12 ++---------- 4 files changed, 24 insertions(+), 10 deletions(-) create mode 100644 src/hooks/useEmptyViewHeaderHeight/CONST.ts create mode 100644 src/hooks/useEmptyViewHeaderHeight/index.ios.ts create mode 100644 src/hooks/useEmptyViewHeaderHeight/index.ts diff --git a/src/hooks/useEmptyViewHeaderHeight/CONST.ts b/src/hooks/useEmptyViewHeaderHeight/CONST.ts new file mode 100644 index 000000000000..83327ad36c8b --- /dev/null +++ b/src/hooks/useEmptyViewHeaderHeight/CONST.ts @@ -0,0 +1,5 @@ +const HEADER_HEIGHT = 80; +const BUTTON_HEIGHT = 40; +const BUTTON_MARGIN = 12; + +export {HEADER_HEIGHT, BUTTON_HEIGHT, BUTTON_MARGIN}; diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ios.ts b/src/hooks/useEmptyViewHeaderHeight/index.ios.ts new file mode 100644 index 000000000000..9aa387663c24 --- /dev/null +++ b/src/hooks/useEmptyViewHeaderHeight/index.ios.ts @@ -0,0 +1,10 @@ +import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; +import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './CONST'; + +function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number { + const safeAreaInsets = useSafeAreaInsets(); + + return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN + safeAreaInsets.top : HEADER_HEIGHT; +} + +export default useEmptyViewHeaderHeight; diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ts b/src/hooks/useEmptyViewHeaderHeight/index.ts new file mode 100644 index 000000000000..f98823e4a5bf --- /dev/null +++ b/src/hooks/useEmptyViewHeaderHeight/index.ts @@ -0,0 +1,7 @@ +import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './CONST'; + +function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number { + return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT; +} + +export default useEmptyViewHeaderHeight; diff --git a/src/pages/workspace/expensifyCard/EmptyCardView.tsx b/src/pages/workspace/expensifyCard/EmptyCardView.tsx index 0672d5c0c51e..f83095444036 100644 --- a/src/pages/workspace/expensifyCard/EmptyCardView.tsx +++ b/src/pages/workspace/expensifyCard/EmptyCardView.tsx @@ -5,27 +5,19 @@ import * as Illustrations from '@components/Icon/Illustrations'; import ScrollView from '@components/ScrollView'; import CardRowSkeleton from '@components/Skeletons/CardRowSkeleton'; import Text from '@components/Text'; +import useEmptyViewHeaderHeight from '@hooks/useEmptyViewHeaderHeight'; import useLocalize from '@hooks/useLocalize'; -import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; -import getPlatform from '@libs/getPlatform'; import colors from '@styles/theme/colors'; import CONST from '@src/CONST'; -const HEADER_HEIGHT = 80; -const BUTTON_HEIGHT = 40; -const BUTTON_MARGIN = 12; - -const isIOSNative = getPlatform() === CONST.PLATFORM.IOS; - function EmptyCardView() { const {translate} = useLocalize(); const styles = useThemeStyles(); const {windowHeight, isSmallScreenWidth} = useWindowDimensions(); - const safeAreaInsets = useSafeAreaInsets(); - const headerHeight = isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN + (isIOSNative ? safeAreaInsets.top : 0) : HEADER_HEIGHT; + const headerHeight = useEmptyViewHeaderHeight(isSmallScreenWidth); return ( From 114d61ba0b62a7be5d02449886df89a16ece03ab Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Fri, 9 Aug 2024 16:31:10 +0200 Subject: [PATCH 3/3] fix: rename file --- src/hooks/useEmptyViewHeaderHeight/{CONST.ts => const.ts} | 0 src/hooks/useEmptyViewHeaderHeight/index.ios.ts | 2 +- src/hooks/useEmptyViewHeaderHeight/index.ts | 2 +- 3 files changed, 2 insertions(+), 2 deletions(-) rename src/hooks/useEmptyViewHeaderHeight/{CONST.ts => const.ts} (100%) diff --git a/src/hooks/useEmptyViewHeaderHeight/CONST.ts b/src/hooks/useEmptyViewHeaderHeight/const.ts similarity index 100% rename from src/hooks/useEmptyViewHeaderHeight/CONST.ts rename to src/hooks/useEmptyViewHeaderHeight/const.ts diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ios.ts b/src/hooks/useEmptyViewHeaderHeight/index.ios.ts index 9aa387663c24..d59e105574bf 100644 --- a/src/hooks/useEmptyViewHeaderHeight/index.ios.ts +++ b/src/hooks/useEmptyViewHeaderHeight/index.ios.ts @@ -1,5 +1,5 @@ import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; -import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './CONST'; +import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './const'; function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number { const safeAreaInsets = useSafeAreaInsets(); diff --git a/src/hooks/useEmptyViewHeaderHeight/index.ts b/src/hooks/useEmptyViewHeaderHeight/index.ts index f98823e4a5bf..d241d95b236f 100644 --- a/src/hooks/useEmptyViewHeaderHeight/index.ts +++ b/src/hooks/useEmptyViewHeaderHeight/index.ts @@ -1,4 +1,4 @@ -import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './CONST'; +import {BUTTON_HEIGHT, BUTTON_MARGIN, HEADER_HEIGHT} from './const'; function useEmptyViewHeaderHeight(isSmallScreenWidth: boolean): number { return isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT;