Skip to content

Commit 2563afa

Browse files
kosmydelkosmydel
committed
Merge branch '@kosmydel/ideal-nav' into ideal-nav-merge
2 parents 6eb6398 + fcd5f61 commit 2563afa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+688
-296
lines changed

‎patches/@react-navigation+stack+6.3.16+002+dontDetachScreen.patch

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ index 7558eb3..b7bb75e 100644
4343
}) : STATE_TRANSITIONING_OR_BELOW_TOP;
4444
}
4545
+
46-
+ const isHomeScreenAndNotOnTop = route.name === 'BottomTabNavigator' && isScreenActive !== STATE_ON_TOP;
46+
+ const isHomeScreenAndNotOnTop = (route.name === 'BottomTabNavigator' || route.name === 'SettingsHome') && isScreenActive !== STATE_ON_TOP;
4747
+
4848
const {
4949
headerShown = true,

‎src/CONST.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -961,6 +961,7 @@ const CONST = {
961961
3: 100,
962962
},
963963
},
964+
CENTRAL_PANE_ANIMATION_HEIGHT: 200,
964965
LHN_SKELETON_VIEW_ITEM_HEIGHT: 64,
965966
EXPENSIFY_PARTNER_NAME: 'expensify.com',
966967
EMAIL: {

‎src/ROUTES.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,8 @@ const ROUTES = {
5959
},
6060

6161
SETTINGS: 'settings',
62+
SETTINGS_HOME: 'settings_new',
63+
SETTINGS_NEW_PROFILE: 'settings_new/profile',
6264
SETTINGS_PROFILE: 'settings/profile',
6365
SETTINGS_SHARE_CODE: 'settings/shareCode',
6466
SETTINGS_DISPLAY_NAME: 'settings/profile/display-name',

‎src/SCREENS.ts

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,8 @@ const SCREENS = {
1818
TRANSITION_BETWEEN_APPS: 'TransitionBetweenApps',
1919
VALIDATE_LOGIN: 'ValidateLogin',
2020
UNLINK_LOGIN: 'UnlinkLogin',
21+
SETTINGS_HOME: 'SettingsHome',
22+
SETTINGS_CENTRAL_PANE: 'SettingsCentralPane',
2123
SETTINGS: {
2224
ROOT: 'Settings_Root',
2325
SHARE_CODE: 'Settings_Share_Code',

‎src/components/AvatarWithImagePicker.js

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,9 @@ const propTypes = {
9494
horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
9595
vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
9696
}),
97+
98+
/** Style applied to the avatar */
99+
avatarStyle: stylePropTypes.isRequired,
97100
};
98101

99102
const defaultProps = {
@@ -141,6 +144,7 @@ function AvatarWithImagePicker({
141144
anchorAlignment,
142145
onImageSelected,
143146
editorMaskImage,
147+
avatarStyle,
144148
}) {
145149
const theme = useTheme();
146150
const styles = useThemeStyles();
@@ -287,7 +291,7 @@ function AvatarWithImagePicker({
287291

288292
return (
289293
<View style={StyleSheet.flatten([styles.alignItemsCenter, style])}>
290-
<View style={[styles.pRelative, styles.avatarLarge]}>
294+
<View style={[styles.pRelative, avatarStyle]}>
291295
<OfflineWithFeedback
292296
pendingAction={pendingAction}
293297
errors={errors}
@@ -305,8 +309,8 @@ function AvatarWithImagePicker({
305309
<View>
306310
{source ? (
307311
<Avatar
308-
containerStyles={styles.avatarLarge}
309-
imageStyles={[styles.avatarLarge, styles.alignSelfCenter]}
312+
containerStyles={avatarStyle}
313+
imageStyles={[avatarStyle, styles.alignSelfCenter]}
310314
source={source}
311315
fallbackIcon={fallbackIcon}
312316
size={size}

‎src/components/HeaderWithBackButton/headerWithBackButtonPropTypes.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -96,6 +96,9 @@ const propTypes = {
9696

9797
/** Whether we should navigate to report page when the route have a topMostReport */
9898
shouldNavigateToTopMostReport: PropTypes.bool,
99+
100+
/** Whether we should show the back button only on mobile */
101+
shouldUseCentralPaneView: PropTypes.bool,
99102
};
100103

101104
export default propTypes;

‎src/components/HeaderWithBackButton/index.js

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import useKeyboardState from '@hooks/useKeyboardState';
1212
import useLocalize from '@hooks/useLocalize';
1313
import useThrottledButtonState from '@hooks/useThrottledButtonState';
1414
import useWaitForNavigation from '@hooks/useWaitForNavigation';
15+
import useWindowDimensions from '@hooks/useWindowDimensions';
1516
import getButtonState from '@libs/getButtonState';
1617
import Navigation from '@libs/Navigation/Navigation';
1718
import useStyleUtils from '@styles/useStyleUtils';
@@ -40,6 +41,7 @@ function HeaderWithBackButton({
4041
shouldShowPinButton = false,
4142
shouldShowThreeDotsButton = false,
4243
shouldDisableThreeDotsButton = false,
44+
shouldUseCentralPaneView = false,
4345
stepCounter = null,
4446
subtitle = '',
4547
title = '',
@@ -61,15 +63,27 @@ function HeaderWithBackButton({
6163
const {translate} = useLocalize();
6264
const {isKeyboardShown} = useKeyboardState();
6365
const waitForNavigate = useWaitForNavigation();
66+
const {isSmallScreenWidth} = useWindowDimensions();
67+
const shouldFinalShowBackButton = shouldShowBackButton && (!shouldUseCentralPaneView || isSmallScreenWidth);
6468
return (
6569
<View
6670
// Hover on some part of close icons will not work on Electron if dragArea is true
6771
// https://github.com/Expensify/App/issues/29598
6872
dataSet={{dragArea: false}}
6973
style={[styles.headerBar, shouldShowBorderBottom && styles.borderBottom, shouldShowBackButton && styles.pl2]}
7074
>
71-
<View style={[styles.dFlex, styles.flexRow, styles.alignItemsCenter, styles.flexGrow1, styles.justifyContentBetween, styles.overflowHidden]}>
72-
{shouldShowBackButton && (
75+
<View
76+
style={[
77+
styles.dFlex,
78+
styles.flexRow,
79+
styles.alignItemsCenter,
80+
styles.flexGrow1,
81+
styles.justifyContentBetween,
82+
styles.overflowHidden,
83+
!shouldFinalShowBackButton && styles.pl5,
84+
]}
85+
>
86+
{shouldFinalShowBackButton && (
7387
<Tooltip text={translate('common.back')}>
7488
<PressableWithoutFeedback
7589
onPress={() => {

‎src/components/IllustratedHeaderPageLayout.js

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import PropTypes from 'prop-types';
22
import React from 'react';
3+
import useWindowDimensions from '@hooks/useWindowDimensions';
34
import useTheme from '@styles/themes/useTheme';
45
import useThemeStyles from '@styles/useThemeStyles';
56
import HeaderPageLayout from './HeaderPageLayout';
@@ -34,6 +35,10 @@ const defaultProps = {
3435
function IllustratedHeaderPageLayout({backgroundColor, children, illustration, footer, overlayContent, ...propsToPassToHeader}) {
3536
const theme = useTheme();
3637
const styles = useThemeStyles();
38+
const {isSmallScreenWidth} = useWindowDimensions();
39+
40+
const shouldUseMaxHeight = propsToPassToHeader.shouldUseCentralPaneView && !isSmallScreenWidth;
41+
3742
return (
3843
<HeaderPageLayout
3944
backgroundColor={backgroundColor || theme.appBG}
@@ -43,14 +48,15 @@ function IllustratedHeaderPageLayout({backgroundColor, children, illustration, f
4348
<Lottie
4449
source={illustration}
4550
style={styles.w100}
46-
webStyle={styles.w100}
51+
webStyle={shouldUseMaxHeight ? styles.h100 : styles.w100}
4752
autoPlay
4853
loop
4954
/>
5055
{overlayContent && overlayContent()}
5156
</>
5257
}
53-
headerContainerStyles={[styles.justifyContentCenter, styles.w100]}
58+
// TODO: move to variables
59+
headerContainerStyles={[styles.justifyContentCenter, styles.w100, shouldUseMaxHeight && styles.centralPaneAnimation]}
5460
footer={footer}
5561
// eslint-disable-next-line react/jsx-props-no-spreading
5662
{...propsToPassToHeader}

‎src/components/QRShare/index.js

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,17 @@ import _ from 'underscore';
44
import ExpensifyWordmark from '@assets/images/expensify-wordmark.svg';
55
import QRCode from '@components/QRCode';
66
import Text from '@components/Text';
7+
import useWindowDimensions from '@hooks/useWindowDimensions';
78
import useTheme from '@styles/themes/useTheme';
89
import useThemeStyles from '@styles/useThemeStyles';
910
import variables from '@styles/variables';
11+
import CONST from '@src/CONST';
1012
import {qrShareDefaultProps, qrSharePropTypes} from './propTypes';
1113

1214
function QRShare({innerRef, url, title, subtitle, logo, logoRatio, logoMarginRatio}) {
1315
const styles = useThemeStyles();
1416
const theme = useTheme();
17+
const {isSmallScreenWidth} = useWindowDimensions();
1518

1619
const [qrCodeSize, setQrCodeSize] = useState(1);
1720
const svgRef = useRef(null);
@@ -26,7 +29,11 @@ function QRShare({innerRef, url, title, subtitle, logo, logoRatio, logoMarginRat
2629

2730
const onLayout = (event) => {
2831
const containerWidth = event.nativeEvent.layout.width - variables.qrShareHorizontalPadding * 2 || 0;
29-
setQrCodeSize(Math.max(1, containerWidth));
32+
if (isSmallScreenWidth) {
33+
setQrCodeSize(Math.max(1, containerWidth));
34+
return;
35+
}
36+
setQrCodeSize(Math.max(1, Math.min(containerWidth, CONST.CENTRAL_PANE_ANIMATION_HEIGHT)));
3037
};
3138

3239
return (

‎src/languages/en.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -758,6 +758,9 @@ export default {
758758
phrase4: 'Privacy',
759759
},
760760
help: 'Help',
761+
accountSettings: 'Account Settings',
762+
account: 'Account',
763+
general: 'General',
761764
},
762765
closeAccountPage: {
763766
closeAccount: 'Close account',

‎src/languages/es.ts

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -753,6 +753,9 @@ export default {
753753
phrase4: 'Privacidad',
754754
},
755755
help: 'Ayuda',
756+
accountSettings: 'Configuración de la cuenta',
757+
account: 'Cuenta',
758+
general: 'General',
756759
},
757760
closeAccountPage: {
758761
closeAccount: 'Cerrar cuenta',

‎src/libs/Navigation/AppNavigator/AuthScreens.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,11 +5,11 @@ import useWindowDimensions from '@hooks/useWindowDimensions';
55
import KeyboardShortcut from '@libs/KeyboardShortcut';
66
import getCurrentUrl from '@libs/Navigation/currentUrl';
77
import Navigation from '@libs/Navigation/Navigation';
8+
import {AuthScreensParamList} from '@libs/Navigation/types';
89
import NetworkConnection from '@libs/NetworkConnection';
910
import * as Pusher from '@libs/Pusher/pusher';
1011
import PusherConnectionManager from '@libs/PusherConnectionManager';
1112
import * as SessionUtils from '@libs/SessionUtils';
12-
import type {AuthScreensParamList} from '@navigation/types';
1313
import DemoSetupPage from '@pages/DemoSetupPage';
1414
import NotFoundPage from '@pages/ErrorPage/NotFoundPage';
1515
import DesktopSignInRedirectPage from '@pages/signin/DesktopSignInRedirectPage';
@@ -37,6 +37,7 @@ import defaultScreenOptions from './defaultScreenOptions';
3737
import getRootNavigatorScreenOptions from './getRootNavigatorScreenOptions';
3838
import BottomTabNavigator from './Navigators/BottomTabNavigator';
3939
import CentralPaneNavigator from './Navigators/CentralPaneNavigator';
40+
import FullScreenNavigator from './Navigators/FullScreenNavigator';
4041
import RightModalNavigator from './Navigators/RightModalNavigator';
4142

4243
type AuthScreensProps = {
@@ -318,6 +319,11 @@ function AuthScreens({lastUpdateIDAppliedToClient, session, lastOpenedPublicRoom
318319
component={RightModalNavigator}
319320
listeners={modalScreenListeners}
320321
/>
322+
<RootStack.Screen
323+
name={NAVIGATORS.FULL_SCREEN_NAVIGATOR}
324+
options={screenOptions.fullScreen}
325+
component={FullScreenNavigator}
326+
/>
321327
<RootStack.Screen
322328
name={SCREENS.DESKTOP_SIGN_IN_REDIRECT}
323329
options={screenOptions.fullScreen}

‎src/libs/Navigation/AppNavigator/ModalStackNavigators.tsx

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,7 @@ import type {
2828
TeachersUniteNavigatorParamList,
2929
WalletStatementNavigatorParamList,
3030
} from '@navigation/types';
31+
import {ThemeStyles} from '@styles/styles';
3132
import useThemeStyles from '@styles/useThemeStyles';
3233
import SCREENS from '@src/SCREENS';
3334
import type {Screen} from '@src/SCREENS';
@@ -39,7 +40,7 @@ type Screens = Partial<Record<Screen, () => React.ComponentType>>;
3940
*
4041
* @param screens key/value pairs where the key is the name of the screen and the value is a functon that returns the lazy-loaded component
4142
*/
42-
function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens): React.ComponentType {
43+
function createModalStackNavigator<TStackParams extends ParamListBase>(screens: Screens, getScreenOptions?: (styles: ThemeStyles) => StackNavigationOptions): React.ComponentType {
4344
const ModalStackNavigator = createStackNavigator<TStackParams>();
4445

4546
function ModalStack() {
@@ -55,7 +56,7 @@ function createModalStackNavigator<TStackParams extends ParamListBase>(screens:
5556
);
5657

5758
return (
58-
<ModalStackNavigator.Navigator screenOptions={defaultSubRouteOptions}>
59+
<ModalStackNavigator.Navigator screenOptions={getScreenOptions?.(styles) ?? defaultSubRouteOptions}>
5960
{Object.keys(screens as Required<Screens>).map((name) => (
6061
<ModalStackNavigator.Screen
6162
key={name}
@@ -177,6 +178,20 @@ const NewTeachersUniteNavigator = createModalStackNavigator<TeachersUniteNavigat
177178
[SCREENS.I_AM_A_TEACHER]: () => require('../../../pages/TeachersUnite/ImTeacherPage').default as React.ComponentType,
178179
});
179180

181+
// should it be merged with SettingsModalStackNavigator?
182+
const AccountSettingsModalStackNavigator = createModalStackNavigator(
183+
{
184+
[SCREENS.SETTINGS.WORKSPACES]: () => require('../../../pages/workspace/WorkspacesListPage').default as React.ComponentType,
185+
[SCREENS.SETTINGS.PREFERENCES.ROOT]: () => require('../../../pages/settings/Preferences/PreferencesPage').default as React.ComponentType,
186+
[SCREENS.SETTINGS.SECURITY]: () => require('../../../pages/settings/Security/SecuritySettingsPage').default as React.ComponentType,
187+
[SCREENS.SETTINGS.PROFILE.ROOT]: () => require('../../../pages/settings/Profile/ProfilePage').default as React.ComponentType,
188+
[SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../pages/ShareCodePage').default as React.ComponentType,
189+
[SCREENS.SETTINGS.WALLET.ROOT]: () => require('../../../pages/settings/Wallet/WalletPage').default as React.ComponentType,
190+
[SCREENS.SETTINGS.ABOUT]: () => require('../../../pages/settings/AboutPage/AboutPage').default as React.ComponentType,
191+
},
192+
(styles) => ({cardStyle: styles.navigationScreenCardStyle, headerShown: false}),
193+
);
194+
180195
const SettingsModalStackNavigator = createModalStackNavigator<SettingsNavigatorParamList>({
181196
[SCREENS.SETTINGS.ROOT]: () => require('../../../pages/settings/InitialSettingsPage').default as React.ComponentType,
182197
[SCREENS.SETTINGS.SHARE_CODE]: () => require('../../../pages/ShareCodePage').default as React.ComponentType,
@@ -282,6 +297,7 @@ export {
282297
SearchModalStackNavigator,
283298
NewChatModalStackNavigator,
284299
NewTaskModalStackNavigator,
300+
AccountSettingsModalStackNavigator,
285301
SettingsModalStackNavigator,
286302
EnablePaymentsStackNavigator,
287303
AddPersonalBankAccountModalStackNavigator,

‎src/libs/Navigation/AppNavigator/Navigators/FullScreenNavigator.tsx

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
import React from 'react';
2+
import {View} from 'react-native';
3+
import useWindowDimensions from '@hooks/useWindowDimensions';
4+
import createCustomFullScreenNavigator from '@libs/Navigation/AppNavigator/createCustomFullScreenNavigator';
5+
import getRootNavigatorScreenOptions from '@libs/Navigation/AppNavigator/getRootNavigatorScreenOptions';
6+
import * as ModalStackNavigators from '@libs/Navigation/AppNavigator/ModalStackNavigators';
7+
import useThemeStyles from '@styles/useThemeStyles';
8+
import SCREENS from '@src/SCREENS';
9+
10+
const loadPage = () => require('../../../../pages/settings/InitialSettingsPage').default as React.ComponentType;
11+
12+
const RootStack = createCustomFullScreenNavigator();
13+
14+
function FullScreenNavigator() {
15+
const styles = useThemeStyles();
16+
const {isSmallScreenWidth} = useWindowDimensions();
17+
const screenOptions = getRootNavigatorScreenOptions(isSmallScreenWidth, styles);
18+
19+
return (
20+
<View style={styles.rootNavigatorContainerStyles(isSmallScreenWidth)}>
21+
<RootStack.Navigator isSmallScreenWidth={isSmallScreenWidth}>
22+
<RootStack.Screen
23+
name={SCREENS.SETTINGS_HOME}
24+
options={screenOptions.homeScreen}
25+
getComponent={loadPage}
26+
/>
27+
<RootStack.Screen
28+
name={SCREENS.SETTINGS_CENTRAL_PANE}
29+
options={screenOptions.centralPaneNavigator}
30+
component={ModalStackNavigators.AccountSettingsModalStackNavigator}
31+
/>
32+
</RootStack.Navigator>
33+
</View>
34+
);
35+
}
36+
37+
FullScreenNavigator.displayName = 'FullScreenNavigator';
38+
39+
export default FullScreenNavigator;

0 commit comments

Comments
 (0)