From 91979f93b583aedd92aae8aa97c3d909a642d95a Mon Sep 17 00:00:00 2001 From: Heri Setiawan Date: Wed, 8 Nov 2023 19:54:07 +0700 Subject: [PATCH] Remove Global Nav and Sub Nav --- src/App.js | 2 - src/CONST.ts | 9 --- src/GLOBAL_NAVIGATION_MAPPING.ts | 9 --- src/ROUTES.ts | 13 ---- src/SCREENS.ts | 13 ---- src/components/EnvironmentBadge.js | 2 +- src/components/FloatingActionButton.js | 3 - src/components/LHNOptionsList/OptionRowLHN.js | 8 +-- src/languages/en.ts | 3 - src/languages/es.ts | 3 - src/libs/Navigation/Navigation.js | 5 -- src/libs/Navigation/NavigationRoot.js | 7 +- .../getTopMostCentralPaneRouteName.js | 32 ---------- src/libs/Navigation/linkTo.js | 10 +-- .../GlobalNavigationMenuItem.js | 64 ------------------- .../home/sidebar/GlobalNavigation/index.js | 51 --------------- src/pages/home/sidebar/SidebarLinks.js | 21 ++++-- src/pages/home/sidebar/SidebarLinksData.js | 2 +- .../home/sidebar/SidebarNavigationContext.js | 50 --------------- .../SidebarScreen/BaseSidebarScreen.js | 25 ++++---- src/pages/home/sidebar/SidebarScreen/index.js | 2 + .../sidebar/SidebarScreen/index.native.js | 2 + .../sidebar/SidebarScreen/sidebarPropTypes.js | 7 ++ .../sidebar/SubNavigation/SubNavigation.js | 38 ----------- src/styles/styles.ts | 30 +-------- src/styles/themes/default.ts | 2 +- src/styles/themes/light.ts | 2 +- src/styles/utilities/spacing.ts | 4 -- src/styles/variables.ts | 3 +- tests/utils/LHNTestUtils.js | 2 +- 30 files changed, 55 insertions(+), 369 deletions(-) delete mode 100644 src/GLOBAL_NAVIGATION_MAPPING.ts delete mode 100644 src/libs/Navigation/getTopMostCentralPaneRouteName.js delete mode 100644 src/pages/home/sidebar/GlobalNavigation/GlobalNavigationMenuItem.js delete mode 100644 src/pages/home/sidebar/GlobalNavigation/index.js create mode 100644 src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js delete mode 100644 src/pages/home/sidebar/SubNavigation/SubNavigation.js diff --git a/src/App.js b/src/App.js index bff766c1235f..698dfe4437b2 100644 --- a/src/App.js +++ b/src/App.js @@ -24,7 +24,6 @@ import OnyxUpdateManager from './libs/actions/OnyxUpdateManager'; import * as Session from './libs/actions/Session'; import * as Environment from './libs/Environment/Environment'; import {ReportAttachmentsProvider} from './pages/home/report/ReportAttachmentsContext'; -import {SidebarNavigationContextProvider} from './pages/home/sidebar/SidebarNavigationContext'; import ThemeProvider from './styles/themes/ThemeProvider'; import ThemeStylesProvider from './styles/ThemeStylesProvider'; @@ -65,7 +64,6 @@ function App() { EnvironmentProvider, ThemeProvider, ThemeStylesProvider, - SidebarNavigationContextProvider, ]} > diff --git a/src/CONST.ts b/src/CONST.ts index 8cb2bb6c8893..ce9329d909ae 100755 --- a/src/CONST.ts +++ b/src/CONST.ts @@ -2782,12 +2782,10 @@ const CONST = { DEFAULT_COORDINATE: [-122.4021, 37.7911], STYLE_URL: 'mapbox://styles/expensify/cllcoiqds00cs01r80kp34tmq', }, - ONYX_UPDATE_TYPES: { HTTPS: 'https', PUSHER: 'pusher', }, - EVENTS: { SCROLLING: 'scrolling', }, @@ -2806,13 +2804,6 @@ const CONST = { FOOTER: 'footer', }, - GLOBAL_NAVIGATION_OPTION: { - HOME: 'home', - CHATS: 'chats', - SPEND: 'spend', - WORKSPACES: 'workspaces', - }, - MISSING_TRANSLATION: 'MISSING TRANSLATION', SEARCH_MAX_LENGTH: 500, diff --git a/src/GLOBAL_NAVIGATION_MAPPING.ts b/src/GLOBAL_NAVIGATION_MAPPING.ts deleted file mode 100644 index f879c508ff31..000000000000 --- a/src/GLOBAL_NAVIGATION_MAPPING.ts +++ /dev/null @@ -1,9 +0,0 @@ -import CONST from './CONST'; -import SCREENS from './SCREENS'; - -export default { - [CONST.GLOBAL_NAVIGATION_OPTION.HOME]: [SCREENS.HOME_OLDDOT], - [CONST.GLOBAL_NAVIGATION_OPTION.CHATS]: [SCREENS.REPORT], - [CONST.GLOBAL_NAVIGATION_OPTION.SPEND]: [SCREENS.EXPENSES_OLDDOT, SCREENS.REPORTS_OLDDOT, SCREENS.INSIGHTS_OLDDOT], - [CONST.GLOBAL_NAVIGATION_OPTION.WORKSPACES]: [SCREENS.INDIVIDUAL_WORKSPACES_OLDDOT, SCREENS.GROUPS_WORKSPACES_OLDDOT, SCREENS.CARDS_AND_DOMAINS_OLDDOT], -} as const; diff --git a/src/ROUTES.ts b/src/ROUTES.ts index 864e8934ad88..ed9cc6ae987c 100644 --- a/src/ROUTES.ts +++ b/src/ROUTES.ts @@ -363,17 +363,4 @@ export default { SAASTR: 'saastr', SBE: 'sbe', MONEY2020: 'money2020', - - // Iframe screens from olddot - HOME_OLDDOT: 'home', - - // Spend tab - EXPENSES_OLDDOT: 'expenses', - REPORTS_OLDDOT: 'reports', - INSIGHTS_OLDDOT: 'insights', - - // Workspaces tab - INDIVIDUALS_OLDDOT: 'individual_workspaces', - GROUPS_OLDDOT: 'group_workspaces', - CARDS_AND_DOMAINS_OLDDOT: 'cards-and-domains', } as const; diff --git a/src/SCREENS.ts b/src/SCREENS.ts index 8ef787edec2e..f7de8cfab4b6 100644 --- a/src/SCREENS.ts +++ b/src/SCREENS.ts @@ -27,17 +27,4 @@ export default { SIGN_IN_WITH_GOOGLE_DESKTOP: 'GoogleSignInDesktop', DESKTOP_SIGN_IN_REDIRECT: 'DesktopSignInRedirect', SAML_SIGN_IN: 'SAMLSignIn', - - // Iframe screens from olddot - HOME_OLDDOT: 'Home_OLDDOT', - - // Spend tab - EXPENSES_OLDDOT: 'Expenses_OLDDOT', - REPORTS_OLDDOT: 'Reports_OLDDOT', - INSIGHTS_OLDDOT: 'Insights_OLDDOT', - - // Workspaces tab - INDIVIDUAL_WORKSPACES_OLDDOT: 'IndividualWorkspaces_OLDDOT', - GROUPS_WORKSPACES_OLDDOT: 'GroupWorkspaces_OLDDOT', - CARDS_AND_DOMAINS_OLDDOT: 'CardsAndDomains_OLDDOT', } as const; diff --git a/src/components/EnvironmentBadge.js b/src/components/EnvironmentBadge.js index a9236fc50abe..674eaa5c2840 100644 --- a/src/components/EnvironmentBadge.js +++ b/src/components/EnvironmentBadge.js @@ -28,7 +28,7 @@ function EnvironmentBadge() { success={environment === CONST.ENVIRONMENT.STAGING || environment === CONST.ENVIRONMENT.ADHOC} error={environment !== CONST.ENVIRONMENT.STAGING && environment !== CONST.ENVIRONMENT.ADHOC} text={text} - badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge, styles.ml1]} + badgeStyles={[styles.alignSelfEnd, styles.headerEnvBadge]} textStyles={[styles.headerEnvBadgeText]} environment={environment} /> diff --git a/src/components/FloatingActionButton.js b/src/components/FloatingActionButton.js index d8a5a0256e62..c0e01cab2954 100644 --- a/src/components/FloatingActionButton.js +++ b/src/components/FloatingActionButton.js @@ -4,7 +4,6 @@ import {Animated, Easing, View} from 'react-native'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; import themeColors from '@styles/themes/default'; -import variables from '@styles/variables'; import Icon from './Icon'; import * as Expensicons from './Icon/Expensicons'; import PressableWithFeedback from './Pressable/PressableWithFeedback'; @@ -101,8 +100,6 @@ class FloatingActionButton extends PureComponent { style={[styles.floatingActionButton, StyleUtils.getAnimatedFABStyle(rotate, backgroundColor)]} > diff --git a/src/components/LHNOptionsList/OptionRowLHN.js b/src/components/LHNOptionsList/OptionRowLHN.js index 685b8763781d..eb5a7eb7a685 100644 --- a/src/components/LHNOptionsList/OptionRowLHN.js +++ b/src/components/LHNOptionsList/OptionRowLHN.js @@ -58,7 +58,7 @@ const propTypes = { }; const defaultProps = { - hoverStyle: styles.sidebarLinkHoverLHN, + hoverStyle: styles.sidebarLinkHover, viewMode: 'default', onSelectRow: () => {}, style: null, @@ -112,7 +112,7 @@ function OptionRowLHN(props) { : [styles.chatLinkRowPressable, styles.flexGrow1, styles.optionItemAvatarNameWrapper, styles.optionRow, styles.justifyContentCenter], ); const hoveredBackgroundColor = props.hoverStyle && props.hoverStyle.backgroundColor ? props.hoverStyle.backgroundColor : themeColors.sidebar; - const focusedBackgroundColor = styles.sidebarLinkActiveLHN.backgroundColor; + const focusedBackgroundColor = styles.sidebarLinkActive.backgroundColor; const hasBrickError = optionItem.brickRoadIndicator === CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR; const defaultSubscriptSize = optionItem.isExpenseRequest ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; @@ -199,8 +199,8 @@ function OptionRowLHN(props) { styles.flexRow, styles.alignItemsCenter, styles.justifyContentBetween, - styles.sidebarLinkLHN, - styles.sidebarLinkInnerLHN, + styles.sidebarLink, + styles.sidebarLinkInner, StyleUtils.getBackgroundColorStyle(themeColors.sidebar), props.isFocused ? styles.sidebarLinkActive : null, (hovered || isContextMenuActive) && !props.isFocused ? props.hoverStyle : null, diff --git a/src/languages/en.ts b/src/languages/en.ts index d99b3c7d04d1..819382ee66b9 100755 --- a/src/languages/en.ts +++ b/src/languages/en.ts @@ -1907,7 +1907,4 @@ export default { guaranteed: 'Guaranteed eReceipt', transactionDate: 'Transaction date', }, - globalNavigationOptions: { - chats: 'Chats', - }, } satisfies TranslationBase; diff --git a/src/languages/es.ts b/src/languages/es.ts index dea7760a35ce..198d5d36b121 100644 --- a/src/languages/es.ts +++ b/src/languages/es.ts @@ -2391,7 +2391,4 @@ export default { guaranteed: 'eRecibo garantizado', transactionDate: 'Fecha de transacción', }, - globalNavigationOptions: { - chats: 'Chats', // "Chats" is the accepted term colloqially in Spanish, this is not a bug!! - }, } satisfies EnglishTranslation; diff --git a/src/libs/Navigation/Navigation.js b/src/libs/Navigation/Navigation.js index de6c4a64237b..7564955020fa 100644 --- a/src/libs/Navigation/Navigation.js +++ b/src/libs/Navigation/Navigation.js @@ -8,7 +8,6 @@ import NAVIGATORS from '@src/NAVIGATORS'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; import getStateFromPath from './getStateFromPath'; -import originalGetTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName'; import originalGetTopmostReportActionId from './getTopmostReportActionID'; import originalGetTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; @@ -47,9 +46,6 @@ function canNavigate(methodName, params = {}) { // Re-exporting the getTopmostReportId here to fill in default value for state. The getTopmostReportId isn't defined in this file to avoid cyclic dependencies. const getTopmostReportId = (state = navigationRef.getState()) => originalGetTopmostReportId(state); -// Re-exporting the getTopMostCentralPaneRouteName here to fill in default value for state. The getTopMostCentralPaneRouteName isn't defined in this file to avoid cyclic dependencies. -const getTopMostCentralPaneRouteName = (state = navigationRef.getState()) => originalGetTopMostCentralPaneRouteName(state); - // Re-exporting the getTopmostReportActionID here to fill in default value for state. The getTopmostReportActionID isn't defined in this file to avoid cyclic dependencies. const getTopmostReportActionId = (state = navigationRef.getState()) => originalGetTopmostReportActionId(state); @@ -284,7 +280,6 @@ export default { setIsNavigationReady, getTopmostReportId, getRouteNameFromStateEvent, - getTopMostCentralPaneRouteName, getTopmostReportActionId, }; diff --git a/src/libs/Navigation/NavigationRoot.js b/src/libs/Navigation/NavigationRoot.js index 3478f7b8ed8d..2373066cf4bd 100644 --- a/src/libs/Navigation/NavigationRoot.js +++ b/src/libs/Navigation/NavigationRoot.js @@ -1,13 +1,12 @@ import {DefaultTheme, getPathFromState, NavigationContainer} from '@react-navigation/native'; import PropTypes from 'prop-types'; -import React, {useContext, useEffect, useRef} from 'react'; +import React, {useEffect, useRef} from 'react'; import {Easing, interpolateColor, runOnJS, useAnimatedReaction, useSharedValue, withDelay, withTiming} from 'react-native-reanimated'; import useCurrentReportID from '@hooks/useCurrentReportID'; import useFlipper from '@hooks/useFlipper'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Log from '@libs/Log'; import StatusBar from '@libs/StatusBar'; -import {SidebarNavigationContext} from '@pages/home/sidebar/SidebarNavigationContext'; import themeColors from '@styles/themes/default'; import AppNavigator from './AppNavigator'; import linkingConfig from './linkingConfig'; @@ -54,7 +53,6 @@ function parseAndLogRoute(state) { function NavigationRoot(props) { useFlipper(navigationRef); const firstRenderRef = useRef(true); - const globalNavigation = useContext(SidebarNavigationContext); const {updateCurrentReportID} = useCurrentReportID(); const {isSmallScreenWidth} = useWindowDimensions(); @@ -130,9 +128,6 @@ function NavigationRoot(props) { }, 0); parseAndLogRoute(state); animateStatusBarBackgroundColor(); - - // Update the global navigation to show the correct selected menu items. - globalNavigation.updateFromNavigationState(state); }; return ( diff --git a/src/libs/Navigation/getTopMostCentralPaneRouteName.js b/src/libs/Navigation/getTopMostCentralPaneRouteName.js deleted file mode 100644 index f833575a397a..000000000000 --- a/src/libs/Navigation/getTopMostCentralPaneRouteName.js +++ /dev/null @@ -1,32 +0,0 @@ -import lodashFindLast from 'lodash/findLast'; - -/** - * Find the name of top most central pane route. - * - * @param {Object} state - The react-navigation state - * @returns {String | undefined} - It's possible that there is no central pane in the state. - */ -function getTopMostCentralPaneRouteName(state) { - if (!state) { - return undefined; - } - const topmostCentralPane = lodashFindLast(state.routes, (route) => route.name === 'CentralPaneNavigator'); - - if (!topmostCentralPane) { - return undefined; - } - - if (topmostCentralPane.state && topmostCentralPane.state.routes) { - // State may don't have index in some cases. But in this case there will be only one route in state. - return topmostCentralPane.state.routes[topmostCentralPane.state.index || 0].name; - } - - if (topmostCentralPane.params) { - // State may don't have inner state in some cases (e.g generating actions from path). But in this case there will be params available. - return topmostCentralPane.params.screen; - } - - return undefined; -} - -export default getTopMostCentralPaneRouteName; diff --git a/src/libs/Navigation/linkTo.js b/src/libs/Navigation/linkTo.js index e77d787ab4f8..286074914cf7 100644 --- a/src/libs/Navigation/linkTo.js +++ b/src/libs/Navigation/linkTo.js @@ -3,7 +3,6 @@ import _ from 'lodash'; import CONST from '@src/CONST'; import NAVIGATORS from '@src/NAVIGATORS'; import getStateFromPath from './getStateFromPath'; -import getTopMostCentralPaneRouteName from './getTopMostCentralPaneRouteName'; import getTopmostReportId from './getTopmostReportId'; import linkingConfig from './linkingConfig'; @@ -62,15 +61,12 @@ export default function linkTo(navigation, path, type) { // If action type is different than NAVIGATE we can't change it to the PUSH safely if (action.type === CONST.NAVIGATION.ACTION_TYPE.NAVIGATE) { - // Make sure that we are pushing a screen that is not currently on top of the stack. - const shouldPushIfCentralPane = - action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && - (getTopMostCentralPaneRouteName(root.getState()) !== getTopMostCentralPaneRouteName(state) || getTopmostReportId(root.getState()) !== getTopmostReportId(state)); - // In case if type is 'FORCED_UP' we replace current screen with the provided. This means the current screen no longer exists in the stack if (type === CONST.NAVIGATION.TYPE.FORCED_UP) { action.type = CONST.NAVIGATION.ACTION_TYPE.REPLACE; - } else if (shouldPushIfCentralPane) { + + // If this action is navigating to the report screen and the top most navigator is different from the one we want to navigate - PUSH the new screen to the top of the stack + } else if (action.payload.name === NAVIGATORS.CENTRAL_PANE_NAVIGATOR && getTopmostReportId(root.getState()) !== getTopmostReportId(state)) { action.type = CONST.NAVIGATION.ACTION_TYPE.PUSH; // If the type is UP, we deeplinked into one of the RHP flows and we want to replace the current screen with the previous one in the flow diff --git a/src/pages/home/sidebar/GlobalNavigation/GlobalNavigationMenuItem.js b/src/pages/home/sidebar/GlobalNavigation/GlobalNavigationMenuItem.js deleted file mode 100644 index 5c28681a6cfa..000000000000 --- a/src/pages/home/sidebar/GlobalNavigation/GlobalNavigationMenuItem.js +++ /dev/null @@ -1,64 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import {View} from 'react-native'; -import Icon from '@components/Icon'; -import PressableWithFeedback from '@components/Pressable/PressableWithFeedback'; -import Text from '@components/Text'; -import styles from '@styles/styles'; -import * as StyleUtils from '@styles/StyleUtils'; -import variables from '@styles/variables'; -import CONST from '@src/CONST'; - -const propTypes = { - /** Icon to display */ - icon: PropTypes.elementType, - - /** Text to display for the item */ - title: PropTypes.string, - - /** Function to fire when component is pressed */ - onPress: PropTypes.func, - - /** Whether item is focused or active */ - isFocused: PropTypes.bool, -}; - -const defaultProps = { - icon: undefined, - isFocused: false, - onPress: () => {}, - title: '', -}; - -const GlobalNavigationMenuItem = React.forwardRef(({icon, title, isFocused, onPress}, ref) => ( - !isFocused && onPress()} - style={styles.globalNavigationItemContainer} - ref={ref} - role={CONST.ACCESSIBILITY_ROLE.MENUITEM} - accessibilityLabel={title} - > - {({pressed}) => ( - - - - - - {title} - - - - )} - -)); - -GlobalNavigationMenuItem.propTypes = propTypes; -GlobalNavigationMenuItem.defaultProps = defaultProps; -GlobalNavigationMenuItem.displayName = 'GlobalNavigationMenuItem'; - -export default GlobalNavigationMenuItem; diff --git a/src/pages/home/sidebar/GlobalNavigation/index.js b/src/pages/home/sidebar/GlobalNavigation/index.js deleted file mode 100644 index 569ebf6fd0a8..000000000000 --- a/src/pages/home/sidebar/GlobalNavigation/index.js +++ /dev/null @@ -1,51 +0,0 @@ -import React, {useContext, useMemo} from 'react'; -import {View} from 'react-native'; -import _ from 'underscore'; -import * as Expensicons from '@components/Icon/Expensicons'; -import useLocalize from '@hooks/useLocalize'; -import Navigation from '@libs/Navigation/Navigation'; -import {SidebarNavigationContext} from '@pages/home/sidebar/SidebarNavigationContext'; -import SignInOrAvatarWithOptionalStatus from '@pages/home/sidebar/SignInOrAvatarWithOptionalStatus'; -import styles from '@styles/styles'; -import CONST from '@src/CONST'; -import ROUTES from '@src/ROUTES'; -import GlobalNavigationMenuItem from './GlobalNavigationMenuItem'; - -function GlobalNavigation() { - const sidebarNavigation = useContext(SidebarNavigationContext); - const {translate} = useLocalize(); - const items = useMemo( - () => [ - { - icon: Expensicons.ChatBubble, - text: translate('globalNavigationOptions.chats'), - value: CONST.GLOBAL_NAVIGATION_OPTION.CHATS, - onSelected: () => { - Navigation.navigate(ROUTES.REPORT); - }, - }, - ], - [translate], - ); - - return ( - - - - {_.map(items, (item) => ( - item.onSelected(item.value)} - isFocused={sidebarNavigation.selectedGlobalNavigationOption === item.value} - /> - ))} - - - ); -} - -GlobalNavigation.displayName = 'GlobalNavigation'; - -export default GlobalNavigation; diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 1f5a07194732..ad981a190a70 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -3,13 +3,13 @@ import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useRef} from 'react'; import {InteractionManager, View} from 'react-native'; import _ from 'underscore'; +import LogoComponent from '@assets/images/expensify-wordmark.svg'; import Header from '@components/Header'; import Icon from '@components/Icon'; import * as Expensicons from '@components/Icon/Expensicons'; import LHNOptionsList from '@components/LHNOptionsList/LHNOptionsList'; import OptionsListSkeletonView from '@components/OptionsListSkeletonView'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; -import Text from '@components/Text'; import Tooltip from '@components/Tooltip'; import useLocalize from '@hooks/useLocalize'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -21,13 +21,19 @@ import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportA import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes'; import styles from '@styles/styles'; import * as StyleUtils from '@styles/StyleUtils'; +import defaultTheme from '@styles/themes/default'; +import variables from '@styles/variables'; import * as App from '@userActions/App'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import SignInOrAvatarWithOptionalStatus from './SignInOrAvatarWithOptionalStatus'; const basePropTypes = { + /** Toggles the navigation menu open and closed */ + onLinkClick: PropTypes.func.isRequired, + /** Safe area insets required for mobile devices margins */ insets: safeAreaInsetPropTypes.isRequired, }; @@ -143,12 +149,18 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority return (
{translate('globalNavigationOptions.chats')}} - role={CONST.ACCESSIBILITY_ROLE.TEXT} + title={ + + } + accessibilityRole={CONST.ACCESSIBILITY_ROLE.TEXT} shouldShowEnvironmentBadge /> @@ -161,6 +173,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority + ); diff --git a/src/pages/home/sidebar/SidebarNavigationContext.js b/src/pages/home/sidebar/SidebarNavigationContext.js index d39c24178f8d..e69de29bb2d1 100644 --- a/src/pages/home/sidebar/SidebarNavigationContext.js +++ b/src/pages/home/sidebar/SidebarNavigationContext.js @@ -1,50 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useCallback, useMemo, useState} from 'react'; -import _ from 'underscore'; -import Navigation from '@libs/Navigation/Navigation'; -import CONST from '@src/CONST'; -import GLOBAL_NAVIGATION_MAPPING from '@src/GLOBAL_NAVIGATION_MAPPING'; - -const propTypes = { - /** Children to wrap. The part of app that should have acces to this context */ - children: PropTypes.node.isRequired, -}; - -const SidebarNavigationContext = React.createContext({ - selectedGlobalNavigationOption: undefined, - selectedSubNavigationOption: undefined, - updateFromNavigationState: () => {}, -}); - -const mapSubNavigationOptionToGlobalNavigationOption = (SubNavigationOption) => - _.findKey(GLOBAL_NAVIGATION_MAPPING, (globalNavigationOptions) => globalNavigationOptions.includes(SubNavigationOption)); - -function SidebarNavigationContextProvider({children}) { - const [selectedGlobalNavigationOption, setSelectedGlobalNavigationOption] = useState(CONST.GLOBAL_NAVIGATION_OPTION.CHATS); - const [selectedSubNavigationOption, setSelectedSubNavigationOption] = useState(); - - const updateFromNavigationState = useCallback((navigationState) => { - const topmostCentralPaneRouteName = Navigation.getTopMostCentralPaneRouteName(navigationState); - if (!topmostCentralPaneRouteName) { - return; - } - - setSelectedSubNavigationOption(topmostCentralPaneRouteName); - setSelectedGlobalNavigationOption(mapSubNavigationOptionToGlobalNavigationOption(topmostCentralPaneRouteName)); - }, []); - - const contextValue = useMemo( - () => ({ - selectedGlobalNavigationOption, - selectedSubNavigationOption, - updateFromNavigationState, - }), - [selectedGlobalNavigationOption, selectedSubNavigationOption, updateFromNavigationState], - ); - - return {children}; -} - -SidebarNavigationContextProvider.propTypes = propTypes; - -export {SidebarNavigationContextProvider, SidebarNavigationContext}; diff --git a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js index cd8bff2e5945..0d2930220bcd 100644 --- a/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js +++ b/src/pages/home/sidebar/SidebarScreen/BaseSidebarScreen.js @@ -1,19 +1,13 @@ -import PropTypes from 'prop-types'; -import React from 'react'; +import React, {useEffect} from 'react'; import {View} from 'react-native'; import ScreenWrapper from '@components/ScreenWrapper'; import * as Browser from '@libs/Browser'; import Performance from '@libs/Performance'; -import GlobalNavigation from '@pages/home/sidebar/GlobalNavigation'; -import SubNavigation from '@pages/home/sidebar/SubNavigation/SubNavigation'; +import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData'; import styles from '@styles/styles'; import Timing from '@userActions/Timing'; import CONST from '@src/CONST'; - -const propTypes = { - /** Children to wrap (floating button). */ - children: PropTypes.node.isRequired, -}; +import sidebarPropTypes from './sidebarPropTypes'; /** * Function called when a pinned chat is selected. @@ -24,6 +18,11 @@ const startTimer = () => { }; function BaseSidebarScreen(props) { + useEffect(() => { + Performance.markStart(CONST.TIMING.SIDEBAR_LOADED); + Timing.start(CONST.TIMING.SIDEBAR_LOADED, true); + }, []); + return ( {({insets}) => ( <> - - - + {props.children} @@ -47,7 +46,7 @@ function BaseSidebarScreen(props) { ); } -BaseSidebarScreen.propTypes = propTypes; +BaseSidebarScreen.propTypes = sidebarPropTypes; BaseSidebarScreen.displayName = 'BaseSidebarScreen'; export default BaseSidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 6f2fa1f9944a..0b4c520c78a2 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -3,6 +3,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; import BaseSidebarScreen from './BaseSidebarScreen'; import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover'; +import sidebarPropTypes from './sidebarPropTypes'; function SidebarScreen(props) { const popoverModal = useRef(null); @@ -48,6 +49,7 @@ function SidebarScreen(props) { ); } +SidebarScreen.propTypes = sidebarPropTypes; SidebarScreen.displayName = 'SidebarScreen'; export default SidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/index.native.js b/src/pages/home/sidebar/SidebarScreen/index.native.js index bb4d08d33ea7..36724c02d278 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.native.js +++ b/src/pages/home/sidebar/SidebarScreen/index.native.js @@ -3,6 +3,7 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; import BaseSidebarScreen from './BaseSidebarScreen'; import FloatingActionButtonAndPopover from './FloatingActionButtonAndPopover'; +import sidebarPropTypes from './sidebarPropTypes'; function SidebarScreen(props) { const {isSmallScreenWidth} = useWindowDimensions(); @@ -18,6 +19,7 @@ function SidebarScreen(props) { ); } +SidebarScreen.propTypes = sidebarPropTypes; SidebarScreen.displayName = 'SidebarScreen'; export default SidebarScreen; diff --git a/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js new file mode 100644 index 000000000000..61a9194bb1e5 --- /dev/null +++ b/src/pages/home/sidebar/SidebarScreen/sidebarPropTypes.js @@ -0,0 +1,7 @@ +import PropTypes from 'prop-types'; + +const sidebarPropTypes = { + /** Callback when onLayout of sidebar is called */ + onLayout: PropTypes.func, +}; +export default sidebarPropTypes; diff --git a/src/pages/home/sidebar/SubNavigation/SubNavigation.js b/src/pages/home/sidebar/SubNavigation/SubNavigation.js deleted file mode 100644 index ceb1d40dca50..000000000000 --- a/src/pages/home/sidebar/SubNavigation/SubNavigation.js +++ /dev/null @@ -1,38 +0,0 @@ -import PropTypes from 'prop-types'; -import React, {useEffect} from 'react'; -import {View} from 'react-native'; -import Performance from '@libs/Performance'; -import SidebarLinksData from '@pages/home/sidebar/SidebarLinksData'; -import safeAreaInsetPropTypes from '@pages/safeAreaInsetPropTypes'; -import styles from '@styles/styles'; -import Timing from '@userActions/Timing'; -import CONST from '@src/CONST'; - -const propTypes = { - /** Function called when a pinned chat is selected. */ - onLinkClick: PropTypes.func.isRequired, - - /** Insets for SidebarLInksData */ - insets: safeAreaInsetPropTypes.isRequired, -}; - -function SubNavigation({onLinkClick, insets}) { - useEffect(() => { - Performance.markStart(CONST.TIMING.SIDEBAR_LOADED); - Timing.start(CONST.TIMING.SIDEBAR_LOADED, true); - }, []); - - return ( - - - - ); -} - -SubNavigation.propTypes = propTypes; -SubNavigation.displayName = 'SubNavigation'; - -export default SubNavigation; diff --git a/src/styles/styles.ts b/src/styles/styles.ts index cdfb049e2dce..286416436ca0 100644 --- a/src/styles/styles.ts +++ b/src/styles/styles.ts @@ -1352,7 +1352,7 @@ const styles = (theme: ThemeColors) => floatingActionButtonContainer: { position: 'absolute', - left: 16, + right: 20, // The bottom of the floating action button should align with the bottom of the compose box. // The value should be equal to the height + marginBottom + marginTop of chatItemComposeSecondaryRow @@ -3917,34 +3917,6 @@ const styles = (theme: ThemeColors) => marginBottom: 16, }, - globalNavigation: { - width: variables.globalNavigationWidth, - backgroundColor: theme.highlightBG, - }, - - globalNavigationMenuContainer: { - marginTop: 13, - }, - - globalAndSubNavigationContainer: { - backgroundColor: theme.highlightBG, - }, - - globalNavigationSelectionIndicator: (isFocused: boolean) => ({ - width: 4, - height: 52, - borderTopRightRadius: variables.componentBorderRadiusRounded, - borderBottomRightRadius: variables.componentBorderRadiusRounded, - backgroundColor: isFocused ? theme.iconMenu : theme.transparent, - }), - - globalNavigationMenuItem: (isFocused: boolean) => (isFocused ? {color: theme.text, fontWeight: fontWeightBold, fontFamily: fontFamily.EXP_NEUE_BOLD} : {color: theme.icon}), - - globalNavigationItemContainer: { - width: variables.globalNavigationWidth, - height: variables.globalNavigationWidth, - }, - walletCard: { borderRadius: variables.componentBorderRadiusLarge, position: 'relative', diff --git a/src/styles/themes/default.ts b/src/styles/themes/default.ts index dd92b1ce71d9..db54da7f35ac 100644 --- a/src/styles/themes/default.ts +++ b/src/styles/themes/default.ts @@ -43,7 +43,7 @@ const darkTheme = { hoverComponentBG: colors.darkHighlightBackground, activeComponentBG: colors.darkBorders, signInSidebar: colors.green800, - sidebar: colors.darkAppBackground, + sidebar: colors.darkHighlightBackground, sidebarHover: colors.darkAppBackground, heading: colors.darkPrimaryText, textLight: colors.darkPrimaryText, diff --git a/src/styles/themes/light.ts b/src/styles/themes/light.ts index 97fe2322945a..d2655689d90c 100644 --- a/src/styles/themes/light.ts +++ b/src/styles/themes/light.ts @@ -43,7 +43,7 @@ const lightTheme = { hoverComponentBG: colors.lightHighlightBackground, activeComponentBG: colors.lightBorders, signInSidebar: colors.green800, - sidebar: colors.lightAppBackground, + sidebar: colors.lightHighlightBackground, sidebarHover: colors.lightBorders, heading: colors.lightPrimaryText, textLight: colors.white, diff --git a/src/styles/utilities/spacing.ts b/src/styles/utilities/spacing.ts index f88692bcc85b..7d568847ab65 100644 --- a/src/styles/utilities/spacing.ts +++ b/src/styles/utilities/spacing.ts @@ -477,10 +477,6 @@ export default { paddingTop: 20, }, - pt6: { - paddingTop: 24, - }, - pt8: { paddingTop: 32, }, diff --git a/src/styles/variables.ts b/src/styles/variables.ts index 7bad3b1b0fb7..18800f5748d9 100644 --- a/src/styles/variables.ts +++ b/src/styles/variables.ts @@ -83,8 +83,7 @@ export default { mobileResponsiveWidthBreakpoint: 800, tabletResponsiveWidthBreakpoint: 1024, safeInsertPercentage: 0.7, - globalNavigationWidth: 72, - sideBarWidth: 303 + 72, + sideBarWidth: 375, pdfPageMaxWidth: 992, tooltipzIndex: 10050, gutterWidth: 12, diff --git a/tests/utils/LHNTestUtils.js b/tests/utils/LHNTestUtils.js index 72d7d64f1283..546853b8893b 100644 --- a/tests/utils/LHNTestUtils.js +++ b/tests/utils/LHNTestUtils.js @@ -306,6 +306,7 @@ function MockedSidebarLinks({currentReportID}) { return ( {}} insets={{ top: 0, left: 0, @@ -314,7 +315,6 @@ function MockedSidebarLinks({currentReportID}) { }} isSmallScreenWidth={false} currentReportID={currentReportID} - onLinkClick={() => {}} /> );