Skip to content

Fix/46488 fix modal centering #46860

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
mountiny merged 5 commits into from
Aug 12, 2024
Merged

Fix/46488 fix modal centering #46860

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2ec946b
fix: fix modal centering
koko57 Aug 1, 2024
490dfd5
fix: resolve conflicts
koko57 Aug 6, 2024
3591892
Merge branch 'main' into fix/46488-fix-modal-centering
koko57 Aug 8, 2024
454a736
fix: create platform specific hooks
koko57 Aug 8, 2024
114d61b
fix: rename file
koko57 Aug 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 1 addition & 3 deletions src/components/EmptyStateComponent/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,6 @@ function EmptyStateComponent({
subtitle,
headerStyles,
headerContentStyles,
emptyStateForegroundStyles,
minModalHeight = 400,
}: EmptyStateComponentProps) {
const styles = useThemeStyles();
Expand Down Expand Up @@ -85,8 +84,7 @@ function EmptyStateComponent({
shouldAnimate={false}
/>
</View>

<View style={[styles.emptyStateForeground, emptyStateForegroundStyles]}>
<View style={styles.emptyStateForeground}>
<View style={styles.emptyStateContent}>
<View style={[styles.emptyStateHeader(headerMediaType === CONST.EMPTY_STATE_MEDIA.ILLUSTRATION), headerStyles]}>{HeaderComponent}</View>
<View style={styles.p8}>
Expand Down
1 change: 0 additions & 1 deletion src/components/EmptyStateComponent/types.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ type SharedProps<T> = {
headerStyles?: StyleProp<ViewStyle>;
headerMediaType: T;
headerContentStyles?: StyleProp<ViewStyle & ImageStyle>;
emptyStateForegroundStyles?: StyleProp<ViewStyle>;
minModalHeight?: number;
};

Expand Down
5 changes: 5 additions & 0 deletions src/hooks/useEmptyViewHeaderHeight/const.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
const HEADER_HEIGHT = 80;
const BUTTON_HEIGHT = 40;
const BUTTON_MARGIN = 12;

export {HEADER_HEIGHT, BUTTON_HEIGHT, BUTTON_MARGIN};
10 changes: 10 additions & 0 deletions src/hooks/useEmptyViewHeaderHeight/index.ios.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
Comment thread
mountiny marked this conversation as resolved.
}

export default useEmptyViewHeaderHeight;
7 changes: 7 additions & 0 deletions src/hooks/useEmptyViewHeaderHeight/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
10 changes: 3 additions & 7 deletions src/pages/workspace/expensifyCard/EmptyCardView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,26 +5,23 @@ 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 useThemeStyles from '@hooks/useThemeStyles';
import useWindowDimensions from '@hooks/useWindowDimensions';
import colors from '@styles/theme/colors';
import CONST from '@src/CONST';

const HEADER_HEIGHT = 80;
const BUTTON_HEIGHT = 40;
const BUTTON_MARGIN = 12;

function EmptyCardView() {
const {translate} = useLocalize();
const styles = useThemeStyles();
const {windowHeight, isSmallScreenWidth} = useWindowDimensions();

const headerHeight = isSmallScreenWidth ? HEADER_HEIGHT + BUTTON_HEIGHT + BUTTON_MARGIN : HEADER_HEIGHT;
const headerHeight = useEmptyViewHeaderHeight(isSmallScreenWidth);

return (
<ScrollView>
<View style={[{height: windowHeight - headerHeight}, styles.mt5]}>
<View style={[{height: windowHeight - headerHeight}, styles.pt5]}>
<EmptyStateComponent
SkeletonComponent={CardRowSkeleton}
headerMediaType={CONST.EMPTY_STATE_MEDIA.ILLUSTRATION}
Expand All @@ -38,7 +35,6 @@ function EmptyCardView() {
]}
title={translate('workspace.expensifyCard.issueAndManageCards')}
subtitle={translate('workspace.expensifyCard.getStartedIssuing')}
emptyStateForegroundStyles={isSmallScreenWidth && {justifyContent: 'flex-start'}}
minModalHeight={500}
/>
</View>
Expand Down