refactor

software-mansion-labs · Dec 11, 2023 · 295d1cc · 295d1cc
1 parent f5e5090
commit 295d1cc
Show file tree

Hide file tree

Showing 12 changed files with 39 additions and 24 deletions.
diff --git a/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js b/src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js
@@ -96,6 +96,9 @@ const propTypes = {
 
     /** Whether we should navigate to report page when the route have a topMostReport  */
     shouldNavigateToTopMostReport: PropTypes.bool,
+
+    /** Whether we should show the back button only on mobile */
+    shouldUseCentralPaneView: PropTypes.bool,
 };
 
 export default propTypes;
diff --git a/src/components/HeaderWithBackButton/index.js b/src/components/HeaderWithBackButton/index.js
@@ -42,7 +42,7 @@ function HeaderWithBackButton({
     shouldShowPinButton = false,
     shouldShowThreeDotsButton = false,
     shouldDisableThreeDotsButton = false,
-    shouldShowBackButtonOnlyOnMobile = false,
+    shouldUseCentralPaneView = false,
     stepCounter = null,
     subtitle = '',
     title = '',
@@ -65,16 +65,25 @@ function HeaderWithBackButton({
     const {isKeyboardShown} = useKeyboardState();
     const waitForNavigate = useWaitForNavigation();
     const {isSmallScreenWidth} = useWindowDimensions();
-
-    const shouldFinalShowBackButton = shouldShowBackButton && (!shouldShowBackButtonOnlyOnMobile || isSmallScreenWidth);
+    const shouldFinalShowBackButton = shouldShowBackButton && (!shouldUseCentralPaneView || isSmallScreenWidth);
     return (
         <View
             // Hover on some part of close icons will not work on Electron if dragArea is true
             // https://github.com/Expensify/App/issues/29598
             dataSet={{dragArea: false}}
             style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2]}
         >
-            <View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
+            <View
+                style={[
+                    styles.dFlex,
+                    styles.flexRow,
+                    styles.alignItemsCenter,
+                    styles.flexGrow1,
+                    styles.justifyContentBetween,
+                    styles.overflowHidden,
+                    !shouldFinalShowBackButton && styles.pl5,
+                ]}
+            >
                 {shouldFinalShowBackButton && (
                     <Tooltip text={translate('common.back')}>
                         <PressableWithoutFeedback

diff --git a/src/components/IllustratedHeaderPageLayout.js b/src/components/IllustratedHeaderPageLayout.js
@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import useWindowDimensions from '@hooks/useWindowDimensions';
 import useTheme from '@styles/themes/useTheme';
 import useThemeStyles from '@styles/useThemeStyles';
-import useWindowDimensions from '@hooks/useWindowDimensions';
 import CONST from '@src/CONST';
 import HeaderPageLayout from './HeaderPageLayout';
 import headerWithBackButtonPropTypes from './HeaderWithBackButton/headerWithBackButtonPropTypes';
@@ -25,25 +25,20 @@ const propTypes = {
 
     /** Overlay content to display on top of animation */
     overlayContent: PropTypes.func,
-
-    /** When a screen is in the central pane, we have to use max height, to make it look good. */
-    // TODO: Merge this prop with shouldShowBackButtonOnlyOnMobile from HeaderWithBackButton. Can name it like isCentralPaneScreen
-    shouldUseMaxHeight: PropTypes.bool,
 };
 
 const defaultProps = {
     backgroundColor: undefined,
     footer: null,
     overlayContent: null,
-    shouldUseMaxHeight: false,
 };
 
 function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    const shouldUseMaxHeight = propsToPassToHeader.shouldUseMaxHeight && !isSmallScreenWidth;
+    const shouldUseMaxHeight = propsToPassToHeader.shouldUseCentralPaneView && !isSmallScreenWidth;
 
     return (
         <HeaderPageLayout
@@ -62,7 +57,7 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
                 </>
             }
             // TODO: move to variables
-            headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldUseMaxHeight && {height: CONST.CENTRAL_PANE_ANIMATION_HEIGHT}]}
+            headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldUseMaxHeight && styles.centralPaneAnimation]}
             footer={footer}
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...propsToPassToHeader}

diff --git a/src/components/QRShare/index.js b/src/components/QRShare/index.js
@@ -10,6 +10,7 @@ import withThemeStyles, {withThemeStylesPropTypes} from '@components/withThemeSt
 import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions';
 import compose from '@libs/compose';
 import variables from '@styles/variables';
+import CONST from '@src/CONST';
 import {qrShareDefaultProps, qrSharePropTypes} from './propTypes';
 
 const propTypes = {
@@ -35,9 +36,15 @@ class QRShare extends Component {
     onLayout(event) {
         const containerWidth = event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2 || 0;
 
+        if (this.props.isSmallScreenWidth) {
+            this.setState({
+                qrCodeSize: Math.max(1, containerWidth),
+            });
+            return;
+        }
+
         this.setState({
-            // TODO: Check on mobile devices
-            qrCodeSize: Math.max(1, Math.min(containerWidth, 200)),
+            qrCodeSize: Math.max(1, Math.min(containerWidth, CONST.CENTRAL_PANE_ANIMATION_HEIGHT)),
         });
     }
 

diff --git a/src/pages/ShareCodePage.js b/src/pages/ShareCodePage.js
@@ -82,7 +82,7 @@ class ShareCodePage extends React.Component {
                 <HeaderWithBackButton
                     title={this.props.translate('common.shareCode')}
                     onBackButtonPress={() => Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(this.props.report.reportID) : ROUTES.SETTINGS_HOME)}
-                    shouldShowBackButtonOnlyOnMobile
+                    shouldUseCentralPaneView
                 />
 
                 <ScrollView style={[this.props.themeStyles.flex1, this.props.themeStyles.mt3]}>
@@ -95,7 +95,6 @@ class ShareCodePage extends React.Component {
                             logo={isReport ? expensifyLogo : UserUtils.getAvatarUrl(this.props.currentUserPersonalDetails.avatar, this.props.currentUserPersonalDetails.accountID)}
                             logoRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_SIZE_RATIO : CONST.QR.DEFAULT_LOGO_SIZE_RATIO}
                             logoMarginRatio={isReport ? CONST.QR.EXPENSIFY_LOGO_MARGIN_RATIO : CONST.QR.DEFAULT_LOGO_MARGIN_RATIO}
-                            shareCodeContainer={[{height: 100}]}
                         />
                     </View>
 

diff --git a/src/pages/settings/AboutPage/AboutPage.js b/src/pages/settings/AboutPage/AboutPage.js
@@ -104,7 +104,7 @@ function AboutPage(props) {
                     <HeaderWithBackButton
                         title={props.translate('initialSettingsPage.about')}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_HOME)}
-                        shouldShowBackButtonOnlyOnMobile
+                        shouldUseCentralPaneView
                     />
                     <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween, safeAreaPaddingBottomStyle]}>
                         <View style={[styles.flex1]}>

diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js
@@ -48,8 +48,7 @@ function PreferencesPage(props) {
             // onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS)}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.PREFERENCES].backgroundColor}
             illustration={LottieAnimations.PreferencesDJ}
-            shouldUseMaxHeight
-            shouldShowBackButtonOnlyOnMobile
+            shouldUseCentralPaneView
         >
             <View style={styles.mb6}>
                 <Text

diff --git a/src/pages/settings/Profile/ProfilePage.js b/src/pages/settings/Profile/ProfilePage.js
@@ -113,7 +113,7 @@ function ProfilePage(props) {
             <HeaderWithBackButton
                 title={props.translate('common.profile')}
                 onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_HOME)}
-                shouldShowBackButtonOnlyOnMobile
+                shouldUseCentralPaneView
             />
             <ScrollView>
                 <AvatarWithImagePicker

diff --git a/src/pages/settings/Security/SecuritySettingsPage.js b/src/pages/settings/Security/SecuritySettingsPage.js
@@ -70,8 +70,7 @@ function SecuritySettingsPage(props) {
             shouldShowBackButton
             illustration={LottieAnimations.Safe}
             backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor}
-            shouldShowBackButtonOnlyOnMobile
-            shouldUseMaxHeight
+            shouldUseCentralPaneView
         >
             <ScrollView contentContainerStyle={[styles.flexGrow1, styles.flexColumn, styles.justifyContentBetween]}>
                 <View style={[styles.flex1]}>

diff --git a/src/pages/settings/Wallet/WalletPage/WalletPage.js b/src/pages/settings/Wallet/WalletPage/WalletPage.js
@@ -325,7 +325,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
                     <HeaderWithBackButton
                         title={translate('common.wallet')}
                         onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_HOME)}
-                        shouldShowBackButtonOnlyOnMobile
+                        shouldUseCentralPaneView
                     />
                     <View style={[styles.flex1, styles.mb4]}>
                         <ScrollView>

diff --git a/src/pages/workspace/WorkspacesListPage.js b/src/pages/workspace/WorkspacesListPage.js
@@ -187,7 +187,7 @@ function WorkspacesListPage({policies, allPolicyMembers, reimbursementAccount, u
             illustration={LottieAnimations.WorkspacePlanet}
             onBackButtonPress={() => Navigation.goBack(ROUTES.SETTINGS_HOME)}
             title={translate('common.workspaces')}
-            shouldShowBackButtonOnlyOnMobile
+            shouldUseCentralPaneView
             footer={
                 <Button
                     accessibilityLabel={translate('workspace.new.newWorkspace')}

diff --git a/src/styles/styles.ts b/src/styles/styles.ts
@@ -2448,6 +2448,10 @@ const styles = (theme: ThemeColors) =>
             ...spacing.pt0,
         },
 
+        centralPaneAnimation: {
+            height: CONST.CENTRAL_PANE_ANIMATION_HEIGHT,
+        },
+
         sectionTitle: {
             ...spacing.pt2,
             ...spacing.pr3,