From d22bb12a93549218949e87aae751316175a2bd36 Mon Sep 17 00:00:00 2001 From: rayane-djouah <77965000+rayane-djouah@users.noreply.github.com> Date: Sat, 10 Feb 2024 15:00:15 +0100 Subject: [PATCH 1/3] replace usages of isSmallScreenWidt from useWindowDimensions with shouldUseNarrowLayout from useResponsiveLayout in pages folder --- src/pages/ErrorPage/UpdateRequiredView.tsx | 9 +++++---- src/pages/NewChatPage.js | 7 ++++--- src/pages/ShareCodePage.tsx | 7 ++++--- src/pages/home/HeaderView.js | 18 ++++++++++-------- src/pages/home/ReportScreen.js | 8 ++++---- .../report/AnimatedEmptyStateBackground.tsx | 8 +++++--- .../BaseReportActionContextMenu.tsx | 5 +++-- .../ComposerWithSuggestions.js | 12 ++++++------ .../ReportActionCompose/ReportActionCompose.js | 10 ++++++---- .../home/report/ReportActionItemCreated.tsx | 12 +++++++----- .../report/ReportActionItemMessageEdit.tsx | 10 +++++----- .../report/ReportActionItemParentAction.tsx | 7 ++++--- .../report/comment/TextCommentFragment.tsx | 5 +++-- src/pages/home/sidebar/AllSettingsScreen.tsx | 7 ++++--- src/pages/home/sidebar/SidebarLinks.js | 18 +++++++++++------- src/pages/home/sidebar/SidebarScreen/index.js | 6 +++--- .../request/step/IOURequestStepScan/index.js | 10 +++++----- src/pages/settings/AboutPage/AboutPage.tsx | 5 +++-- .../settings/Preferences/PreferencesPage.js | 5 +++-- src/pages/settings/Profile/ProfilePage.js | 7 ++++--- .../settings/Security/SecuritySettingsPage.tsx | 5 +++-- .../Security/TwoFactorAuth/Steps/CodesStep.js | 6 ++++-- src/pages/settings/Wallet/WalletEmptyState.js | 7 ++++--- .../settings/Wallet/WalletPage/WalletPage.js | 12 +++++++----- src/pages/signin/ChooseSSOOrMagicCode.js | 8 ++++---- src/pages/signin/LoginForm/BaseLoginForm.js | 3 ++- src/pages/signin/SignInPageLayout/Footer.js | 10 +++++----- src/pages/workspace/WorkspaceMembersPage.js | 5 +++-- src/pages/workspace/WorkspaceNewRoomPage.js | 8 ++++---- .../workspace/WorkspacePageWithSections.tsx | 5 +++-- src/pages/workspace/WorkspacesListPage.tsx | 17 +++++++++-------- .../workspace/bills/WorkspaceBillsPage.tsx | 5 +++-- src/pages/workspace/card/WorkspaceCardPage.js | 5 +++-- .../invoices/WorkspaceInvoicesPage.tsx | 5 +++-- .../reimburse/WorkspaceReimburseView.js | 5 +++-- .../workspace/travel/WorkspaceTravelPage.js | 5 +++-- 36 files changed, 162 insertions(+), 125 deletions(-) diff --git a/src/pages/ErrorPage/UpdateRequiredView.tsx b/src/pages/ErrorPage/UpdateRequiredView.tsx index 2a73215d2293f..b12e7f5095513 100644 --- a/src/pages/ErrorPage/UpdateRequiredView.tsx +++ b/src/pages/ErrorPage/UpdateRequiredView.tsx @@ -7,6 +7,7 @@ import Lottie from '@components/Lottie'; import LottieAnimations from '@components/LottieAnimations'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; @@ -18,19 +19,19 @@ function UpdateRequiredView() { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); return (
- + diff --git a/src/pages/NewChatPage.js b/src/pages/NewChatPage.js index 71f8797f1a347..d136c880f1f6e 100755 --- a/src/pages/NewChatPage.js +++ b/src/pages/NewChatPage.js @@ -11,9 +11,10 @@ import withLocalize, {withLocalizePropTypes} from '@components/withLocalize'; import withWindowDimensions, {windowDimensionsPropTypes} from '@components/withWindowDimensions'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useNetwork from '@hooks/useNetwork'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useSearchTermAndSearch from '@hooks/useSearchTermAndSearch'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; +import * as Browser from '@libs/Browser'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import doInteractionTask from '@libs/DoInteractionTask'; @@ -65,7 +66,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i const [filteredUserToInvite, setFilteredUserToInvite] = useState(); const [selectedOptions, setSelectedOptions] = useState([]); const {isOffline} = useNetwork(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); const maxParticipantsReached = selectedOptions.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; @@ -280,7 +281,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, translate, i autoFocus={false} /> - {isSmallScreenWidth && } + {shouldUseNarrowLayout && } )} diff --git a/src/pages/ShareCodePage.tsx b/src/pages/ShareCodePage.tsx index 9ed8bf3d76a12..2957303116189 100644 --- a/src/pages/ShareCodePage.tsx +++ b/src/pages/ShareCodePage.tsx @@ -15,6 +15,7 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Clipboard from '@libs/Clipboard'; @@ -42,7 +43,7 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP const {translate} = useLocalize(); const {environmentURL} = useEnvironment(); const qrCodeRef = useRef(null); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const isReport = !!report?.reportID; @@ -79,11 +80,11 @@ function ShareCodePage({report, session, currentUserPersonalDetails}: ShareCodeP Navigation.goBack(isReport ? ROUTES.REPORT_WITH_ID_DETAILS.getRoute(report.reportID) : ROUTES.SETTINGS)} - shouldShowBackButton={isReport || isSmallScreenWidth} + shouldShowBackButton={isReport || shouldUseNarrowLayout} icon={Illustrations.QrCode} /> - + - - + + {isLoading ? ( ) : ( <> - {isSmallScreenWidth && ( + {shouldUseNarrowLayout && ( - {isTaskReport && !isSmallScreenWidth && ReportUtils.isOpenTaskReport(props.report) && } - {canJoin && !isSmallScreenWidth && joinButton} + {isTaskReport && !shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(props.report) && } + {canJoin && !shouldUseNarrowLayout && joinButton} {shouldShowThreeDotsButton && ( - {!isLoading && canJoin && isSmallScreenWidth && {joinButton}} + {!isLoading && canJoin && shouldUseNarrowLayout && {joinButton}} ); } diff --git a/src/pages/home/ReportScreen.js b/src/pages/home/ReportScreen.js index bfe27910c9433..92c1aa832a1c0 100644 --- a/src/pages/home/ReportScreen.js +++ b/src/pages/home/ReportScreen.js @@ -19,8 +19,8 @@ import withViewportOffsetTop from '@components/withViewportOffsetTop'; import useAppFocusEvent from '@hooks/useAppFocusEvent'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import Timing from '@libs/actions/Timing'; import compose from '@libs/compose'; import Navigation from '@libs/Navigation/Navigation'; @@ -157,7 +157,7 @@ function ReportScreen({ }) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const firstRenderRef = useRef(true); const flatListRef = useRef(); @@ -516,7 +516,7 @@ function ReportScreen({ shouldShow={shouldShowNotFoundPage} subtitleKey="notFound.noAccess" shouldShowCloseButton={false} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} onBackButtonPress={Navigation.goBack} shouldShowLink={false} > @@ -527,7 +527,7 @@ function ReportScreen({ needsOffscreenAlphaCompositing > {headerView} - {ReportUtils.isTaskReport(report) && isSmallScreenWidth && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( + {ReportUtils.isTaskReport(report) && shouldUseNarrowLayout && ReportUtils.isOpenTaskReport(report, parentReportAction) && ( diff --git a/src/pages/home/report/AnimatedEmptyStateBackground.tsx b/src/pages/home/report/AnimatedEmptyStateBackground.tsx index c2ae6ddeb54cf..8b3aabfcbf783 100644 --- a/src/pages/home/report/AnimatedEmptyStateBackground.tsx +++ b/src/pages/home/report/AnimatedEmptyStateBackground.tsx @@ -1,5 +1,6 @@ import React from 'react'; import Animated, {clamp, SensorType, useAnimatedSensor, useAnimatedStyle, useReducedMotion, useSharedValue, withSpring} from 'react-native-reanimated'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeIllustrations from '@hooks/useThemeIllustrations'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -10,7 +11,8 @@ const IMAGE_OFFSET_Y = 75; function AnimatedEmptyStateBackground() { const StyleUtils = useStyleUtils(); - const {windowWidth, isSmallScreenWidth} = useWindowDimensions(); + const {windowWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const illustrations = useThemeIllustrations(); const IMAGE_OFFSET_X = windowWidth / 2; @@ -25,7 +27,7 @@ function AnimatedEmptyStateBackground() { // Apply data to create style object const animatedStyles = useAnimatedStyle(() => { - if (!isSmallScreenWidth || isReducedMotionEnabled) { + if (!shouldUseNarrowLayout || isReducedMotionEnabled) { return {}; } /* @@ -44,7 +46,7 @@ function AnimatedEmptyStateBackground() { return ( maxBackgroundWidth ? 'repeat' : 'cover'} /> ); diff --git a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx index 213d94f51f810..0b8625b70ddfb 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -12,6 +12,7 @@ import useArrowKeyFocusManager from '@hooks/useArrowKeyFocusManager'; import useKeyboardShortcut from '@hooks/useKeyboardShortcut'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ReportUtils from '@libs/ReportUtils'; @@ -111,10 +112,10 @@ function BaseReportActionContextMenu({ }: BaseReportActionContextMenuProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const menuItemRefs = useRef({}); const [shouldKeepOpen, setShouldKeepOpen] = useState(false); - const wrapperStyle = StyleUtils.getReportActionContextMenuStyles(isMini, isSmallScreenWidth); + const wrapperStyle = StyleUtils.getReportActionContextMenuStyles(isMini, shouldUseNarrowLayout); const {isOffline} = useNetwork(); const reportAction: OnyxEntry = useMemo(() => { diff --git a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js index 20f290d187646..e2aa0cf7d209d 100644 --- a/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js +++ b/src/pages/home/report/ReportActionCompose/ComposerWithSuggestions/ComposerWithSuggestions.js @@ -8,10 +8,10 @@ import Composer from '@components/Composer'; import withKeyboardState from '@components/withKeyboardState'; import useLocalize from '@hooks/useLocalize'; import usePrevious from '@hooks/usePrevious'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; import compose from '@libs/compose'; @@ -127,8 +127,8 @@ function ComposerWithSuggestions({ const commentRef = useRef(value); const lastTextRef = useRef(value); - const {isSmallScreenWidth} = useWindowDimensions(); - const maxComposerLines = isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; + const {shouldUseNarrowLayout} = useResponsiveLayout(); + const maxComposerLines = shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES; const parentReportAction = lodashGet(parentReportActions, [parentReportActionID]); const shouldAutoFocus = !modal.isVisible && (shouldFocusInputOnScreenFocus || (isEmptyChat && !ReportActionsUtils.isTransactionThread(parentReportAction))) && shouldShowComposeInput; @@ -149,7 +149,7 @@ function ComposerWithSuggestions({ const hasEnoughSpaceForLargeSuggestion = SuggestionUtils.hasEnoughSpaceForLargeSuggestionMenu(listHeight, composerHeight, suggestions.length); - const isAutoSuggestionPickerLarge = !isSmallScreenWidth || (isSmallScreenWidth && hasEnoughSpaceForLargeSuggestion); + const isAutoSuggestionPickerLarge = !shouldUseNarrowLayout || (shouldUseNarrowLayout && hasEnoughSpaceForLargeSuggestion); /** * Update frequently used emojis list. We debounce this method in the constructor so that UpdateFrequentlyUsedEmojis @@ -370,7 +370,7 @@ function ComposerWithSuggestions({ const triggerHotkeyActions = useCallback( (e) => { - if (!e || ComposerUtils.canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown)) { + if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) { return; } @@ -393,7 +393,7 @@ function ComposerWithSuggestions({ } } }, - [isSmallScreenWidth, isKeyboardShown, suggestionsRef, includeChronos, handleSendMessage, lastReportAction, reportID], + [shouldUseNarrowLayout, isKeyboardShown, suggestionsRef, includeChronos, handleSendMessage, lastReportAction, reportID], ); const onChangeText = useCallback( diff --git a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js index cc07716209a2a..a735d6c2368ba 100644 --- a/src/pages/home/report/ReportActionCompose/ReportActionCompose.js +++ b/src/pages/home/report/ReportActionCompose/ReportActionCompose.js @@ -16,6 +16,7 @@ import withCurrentUserPersonalDetails, {withCurrentUserPersonalDetailsDefaultPro import useDebounce from '@hooks/useDebounce'; import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLength'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import canFocusInputOnScreenFocus from '@libs/canFocusInputOnScreenFocus'; @@ -110,7 +111,8 @@ function ReportActionCompose({ }) { const styles = useThemeStyles(); const {translate} = useLocalize(); - const {isMediumScreenWidth, isSmallScreenWidth} = useWindowDimensions(); + const {isMediumScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const animatedRef = useAnimatedRef(); const actionButtonRef = useRef(null); const personalDetails = usePersonalDetails() || CONST.EMPTY_OBJECT; @@ -184,7 +186,7 @@ function ReportActionCompose({ // If we are on a small width device then don't show last 3 items from conciergePlaceholderOptions const conciergePlaceholderRandomIndex = useMemo( - () => _.random(translate('reportActionCompose.conciergePlaceholderOptions').length - (isSmallScreenWidth ? 4 : 1)), + () => _.random(translate('reportActionCompose.conciergePlaceholderOptions').length - (shouldUseNarrowLayout ? 4 : 1)), // eslint-disable-next-line react-hooks/exhaustive-deps [], ); @@ -476,10 +478,10 @@ function ReportActionCompose({ styles.flexRow, styles.justifyContentBetween, styles.alignItemsCenter, - (!isSmallScreenWidth || (isSmallScreenWidth && !network.isOffline)) && styles.chatItemComposeSecondaryRow, + (!shouldUseNarrowLayout || (shouldUseNarrowLayout && !network.isOffline)) && styles.chatItemComposeSecondaryRow, ]} > - {!isSmallScreenWidth && } + {!shouldUseNarrowLayout && } {hasExceededMaxCommentLength && } diff --git a/src/pages/home/report/ReportActionItemCreated.tsx b/src/pages/home/report/ReportActionItemCreated.tsx index afe97b2b95c1d..d751a7ba730e3 100644 --- a/src/pages/home/report/ReportActionItemCreated.tsx +++ b/src/pages/home/report/ReportActionItemCreated.tsx @@ -7,6 +7,7 @@ import OfflineWithFeedback from '@components/OfflineWithFeedback'; import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback'; import ReportWelcomeText from '@components/ReportWelcomeText'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -42,7 +43,8 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { const StyleUtils = useStyleUtils(); const {translate} = useLocalize(); - const {isSmallScreenWidth, isLargeScreenWidth} = useWindowDimensions(); + const {isLargeScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); if (!ReportUtils.isChatReport(props.report)) { return null; @@ -59,11 +61,11 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { onClose={() => navigateToConciergeChatAndDeleteReport(props.report?.reportID ?? props.reportID)} needsOffscreenAlphaCompositing > - + ReportUtils.navigateToDetailsPage(props.report)} @@ -76,8 +78,8 @@ function ReportActionItemCreated(props: ReportActionItemCreatedProps) { icons={icons} size={isLargeScreenWidth || (icons && icons.length < 3) ? CONST.AVATAR_SIZE.LARGE : CONST.AVATAR_SIZE.MEDIUM} shouldStackHorizontally - shouldDisplayAvatarsInRows={isSmallScreenWidth} - maxAvatarsInRow={isSmallScreenWidth ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN} + shouldDisplayAvatarsInRows={shouldUseNarrowLayout} + maxAvatarsInRow={shouldUseNarrowLayout ? CONST.AVATAR_ROW_SIZE.DEFAULT : CONST.AVATAR_ROW_SIZE.LARGE_SCREEN} /> diff --git a/src/pages/home/report/ReportActionItemMessageEdit.tsx b/src/pages/home/report/ReportActionItemMessageEdit.tsx index e97aa0338f902..6f9d18dafe8f8 100644 --- a/src/pages/home/report/ReportActionItemMessageEdit.tsx +++ b/src/pages/home/report/ReportActionItemMessageEdit.tsx @@ -17,10 +17,10 @@ import useHandleExceedMaxCommentLength from '@hooks/useHandleExceedMaxCommentLen import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useReportScrollManager from '@hooks/useReportScrollManager'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as Browser from '@libs/Browser'; import * as ComposerUtils from '@libs/ComposerUtils'; import * as EmojiUtils from '@libs/EmojiUtils'; @@ -75,7 +75,7 @@ function ReportActionItemMessageEdit( const reportScrollManager = useReportScrollManager(); const {translate, preferredLocale} = useLocalize(); const {isKeyboardShown} = useKeyboardState(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const getInitialDraft = () => { if (draftMessage === action?.message?.[0].html) { @@ -349,7 +349,7 @@ function ReportActionItemMessageEdit( */ const triggerSaveOrCancel = useCallback( (e: NativeSyntheticEvent | KeyboardEvent) => { - if (!e || ComposerUtils.canSkipTriggerHotkeys(isSmallScreenWidth, isKeyboardShown)) { + if (!e || ComposerUtils.canSkipTriggerHotkeys(shouldUseNarrowLayout, isKeyboardShown)) { return; } const keyEvent = e as KeyboardEvent; @@ -361,7 +361,7 @@ function ReportActionItemMessageEdit( deleteDraft(); } }, - [deleteDraft, isKeyboardShown, isSmallScreenWidth, publishDraft], + [deleteDraft, isKeyboardShown, shouldUseNarrowLayout, publishDraft], ); /** @@ -421,7 +421,7 @@ function ReportActionItemMessageEdit( onChangeText={updateDraft} // Debounced saveDraftComment onKeyPress={triggerSaveOrCancel} value={draft} - maxLines={isSmallScreenWidth ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has + maxLines={shouldUseNarrowLayout ? CONST.COMPOSER.MAX_LINES_SMALL_SCREEN : CONST.COMPOSER.MAX_LINES} // This is the same that slack has style={[styles.textInputCompose, styles.flex1, styles.bgTransparent]} onFocus={() => { setIsFocused(true); diff --git a/src/pages/home/report/ReportActionItemParentAction.tsx b/src/pages/home/report/ReportActionItemParentAction.tsx index 15a844ab5a729..b3664de438fbb 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -3,6 +3,7 @@ import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import type {OnyxEntry} from 'react-native-onyx'; import OfflineWithFeedback from '@components/OfflineWithFeedback'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useStyleUtils from '@hooks/useStyleUtils'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -36,7 +37,7 @@ type ReportActionItemParentActionProps = ReportActionItemParentActionOnyxProps & function ReportActionItemParentAction({report, index = 0, shouldHideThreadDividerLine = false}: ReportActionItemParentActionProps) { const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const ancestorIDs = useRef(ReportUtils.getAllAncestorReportActionIDs(report)); const [allAncestors, setAllAncestors] = useState([]); @@ -71,9 +72,9 @@ function ReportActionItemParentAction({report, index = 0, shouldHideThreadDivide return ( <> - + - + {allAncestors.map((ancestor) => ( tags // we render it as text, not as html. @@ -79,7 +80,7 @@ function TextCommentFragment({fragment, styleAsDeleted, source, style, displayAs styles.ltr, style, styleAsDeleted ? styles.offlineFeedback.deleted : undefined, - !DeviceCapabilities.canUseTouchScreen() || !isSmallScreenWidth ? styles.userSelectText : styles.userSelectNone, + !DeviceCapabilities.canUseTouchScreen() || !shouldUseNarrowLayout ? styles.userSelectText : styles.userSelectNone, ]} > {convertToLTR(message)} diff --git a/src/pages/home/sidebar/AllSettingsScreen.tsx b/src/pages/home/sidebar/AllSettingsScreen.tsx index 3f6d0ab6a3189..c3d74950b37b2 100644 --- a/src/pages/home/sidebar/AllSettingsScreen.tsx +++ b/src/pages/home/sidebar/AllSettingsScreen.tsx @@ -7,6 +7,7 @@ import * as Expensicons from '@components/Icon/Expensicons'; import MenuItemList from '@components/MenuItemList'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -31,7 +32,7 @@ function AllSettingsScreen({policies, policyMembers}: AllSettingsScreenProps) { const styles = useThemeStyles(); const waitForNavigate = useWaitForNavigation(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); /** * Retuns a list of menu items data for All workspaces settings @@ -47,7 +48,7 @@ function AllSettingsScreen({policies, policyMembers}: AllSettingsScreenProps) { Navigation.navigate(ROUTES.SETTINGS_WORKSPACES); })(); }, - focused: !isSmallScreenWidth, + focused: !shouldUseNarrowLayout, brickRoadIndicator: hasGlobalWorkspaceSettingsRBR(policies, policyMembers) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : undefined, }, ...(shouldShowSubscriptionsMenu @@ -89,7 +90,7 @@ function AllSettingsScreen({policies, policyMembers}: AllSettingsScreenProps) { hoverAndPressStyle: styles.hoveredComponentBG, brickRoadIndicator: item.brickRoadIndicator, })); - }, [isSmallScreenWidth, styles.hoveredComponentBG, styles.sectionMenuItem, translate, waitForNavigate, policies, policyMembers]); + }, [shouldUseNarrowLayout, styles.hoveredComponentBG, styles.sectionMenuItem, translate, waitForNavigate, policies, policyMembers]); return ( { - if (!isSmallScreenWidth) { + if (!shouldUseNarrowLayout) { return; } App.confirmReadyToOpenApp(); - }, [isSmallScreenWidth]); + }, [shouldUseNarrowLayout]); useEffect(() => { SidebarUtils.setIsSidebarLoadedReady(); @@ -118,13 +118,17 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority // or when continuously clicking different LHNs, only apply to small screen // since getTopmostReportId always returns on other devices const reportActionID = Navigation.getTopmostReportActionId(); - if (isCreateMenuOpen || (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || (isSmallScreenWidth && isActiveReport(option.reportID) && !reportActionID)) { + if ( + isCreateMenuOpen || + (option.reportID === Navigation.getTopmostReportId() && !reportActionID) || + (shouldUseNarrowLayout && isActiveReport(option.reportID) && !reportActionID) + ) { return; } Navigation.navigate(ROUTES.REPORT_WITH_ID.getRoute(option.reportID)); onLinkClick(); }, - [isCreateMenuOpen, isSmallScreenWidth, isActiveReport, onLinkClick], + [isCreateMenuOpen, shouldUseNarrowLayout, isActiveReport, onLinkClick], ); const viewMode = priorityMode === CONST.PRIORITY_MODE.GSD ? CONST.OPTION_MODE.COMPACT : CONST.OPTION_MODE.DEFAULT; @@ -148,7 +152,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority contentContainerStyles={StyleSheet.flatten([styles.sidebarListContainer, {paddingBottom: StyleUtils.getSafeAreaMargins(insets).marginBottom}])} data={optionListItems} onSelectRow={showReportPage} - shouldDisableFocusOptions={isSmallScreenWidth} + shouldDisableFocusOptions={shouldUseNarrowLayout} optionMode={viewMode} onFirstItemRendered={App.setSidebarLoaded} /> diff --git a/src/pages/home/sidebar/SidebarScreen/index.js b/src/pages/home/sidebar/SidebarScreen/index.js index 7086e8a8561a6..1ada016e6855a 100755 --- a/src/pages/home/sidebar/SidebarScreen/index.js +++ b/src/pages/home/sidebar/SidebarScreen/index.js @@ -1,14 +1,14 @@ import React from 'react'; -import useWindowDimensions from '@hooks/useWindowDimensions'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import FreezeWrapper from '@libs/Navigation/FreezeWrapper'; import BaseSidebarScreen from './BaseSidebarScreen'; import sidebarPropTypes from './sidebarPropTypes'; function SidebarScreen(props) { - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); return ( - + {translate('receipt.upload')} - {isSmallScreenWidth ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')} + {shouldUseNarrowLayout ? translate('receipt.chooseReceipt') : translate('receipt.dragReceiptBeforeEmail')} - {isSmallScreenWidth ? null : translate('receipt.dragReceiptAfterEmail')} + {shouldUseNarrowLayout ? null : translate('receipt.dragReceiptAfterEmail')} @@ -323,7 +323,7 @@ function IOURequestStepScan({ shouldShowWrapper={Boolean(backTo)} testID={IOURequestStepScan.displayName} > - + {!isDraggingOver && (Browser.isMobile() ? mobileCameraView() : desktopUploadView())} { diff --git a/src/pages/settings/AboutPage/AboutPage.tsx b/src/pages/settings/AboutPage/AboutPage.tsx index a78d248d1d4c0..0d0235858d15e 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -11,6 +11,7 @@ import MenuItemList from '@components/MenuItemList'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWaitForNavigation from '@hooks/useWaitForNavigation'; @@ -52,7 +53,7 @@ function AboutPage() { const styles = useThemeStyles(); const popoverAnchor = useRef(null); const waitForNavigate = useWaitForNavigation(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const menuItems = useMemo(() => { const baseMenuItems: MenuItem[] = [ @@ -128,7 +129,7 @@ function AboutPage() { Navigation.goBack(ROUTES.SETTINGS)} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} illustration={LottieAnimations.Coin} backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.ABOUT].backgroundColor} overlayContent={overlayContent} diff --git a/src/pages/settings/Preferences/PreferencesPage.js b/src/pages/settings/Preferences/PreferencesPage.js index 6ea7e1eb5280f..991db07642ce8 100755 --- a/src/pages/settings/Preferences/PreferencesPage.js +++ b/src/pages/settings/Preferences/PreferencesPage.js @@ -12,6 +12,7 @@ import TestToolMenu from '@components/TestToolMenu'; import Text from '@components/Text'; import useEnvironment from '@hooks/useEnvironment'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -47,14 +48,14 @@ function PreferencesPage(props) { const styles = useThemeStyles(); const {isProduction} = useEnvironment(); const {translate, preferredLocale} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); return ( Navigation.goBack(ROUTES.SETTINGS)} - shouldShowBackButton={props.isSmallScreenWidth} + shouldShowBackButton={props.shouldUseNarrowLayout} icon={Illustrations.Profile} /> - +
{ const baseMenuItems = [ @@ -50,7 +51,7 @@ function SecuritySettingsPage() { Navigation.goBack(ROUTES.SETTINGS)} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} illustration={LottieAnimations.Safe} backgroundColor={theme.PAGE_THEMES[SCREENS.SETTINGS.SECURITY].backgroundColor} shouldShowOfflineIndicatorInWideScreen diff --git a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js index 420d976dcd263..ed69dcedfd2d5 100644 --- a/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js +++ b/src/pages/settings/Security/TwoFactorAuth/Steps/CodesStep.js @@ -11,6 +11,7 @@ import PressableWithDelayToggle from '@components/Pressable/PressableWithDelayTo import Section from '@components/Section'; import Text from '@components/Text'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -28,7 +29,8 @@ function CodesStep({account = defaultAccount, backTo}) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const {isExtraSmallScreenWidth, isSmallScreenWidth} = useWindowDimensions(); + const {isExtraSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const [error, setError] = useState(''); const {setStep} = useTwoFactorAuthContext(); @@ -62,7 +64,7 @@ function CodesStep({account = defaultAccount, backTo}) { {translate('twoFactorAuth.codesLoseAccess')} - + {account.isLoading ? ( diff --git a/src/pages/settings/Wallet/WalletEmptyState.js b/src/pages/settings/Wallet/WalletEmptyState.js index c76d8a7e21fdc..5391cc7ff991b 100644 --- a/src/pages/settings/Wallet/WalletEmptyState.js +++ b/src/pages/settings/Wallet/WalletEmptyState.js @@ -5,6 +5,7 @@ import HeaderPageLayout from '@components/HeaderPageLayout'; import * as Illustrations from '@components/Icon/Illustrations'; import LottieAnimations from '@components/LottieAnimations'; import useLocalize from '@hooks/useLocalize'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; @@ -36,16 +37,16 @@ function WalletEmptyState({onAddPaymentMethod}) { const theme = useTheme(); const styles = useThemeStyles(); const {translate} = useLocalize(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); return ( Navigation.goBack(ROUTES.SETTINGS)} title={translate('common.wallet')} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} shouldShowOfflineIndicatorInWideScreen - style={isSmallScreenWidth ? styles.workspaceSectionMobile : styles.workspaceSection} + style={shouldUseNarrowLayout ? styles.workspaceSectionMobile : styles.workspaceSection} testID={WalletEmptyState.displayName} > Navigation.goBack(ROUTES.SETTINGS)} icon={Illustrations.MoneyIntoWallet} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} /> - + {!showConfirmDeleteModal && ( - + {isPopoverBottomMount && ( { @@ -71,7 +71,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}) { return ( <> - {translate('samlSignIn.welcomeSAMLEnabled')} + {translate('samlSignIn.welcomeSAMLEnabled')}