diff --git a/src/pages/ErrorPage/UpdateRequiredView.tsx b/src/pages/ErrorPage/UpdateRequiredView.tsx index 2a73215d2293f..494ff48998871 100644 --- a/src/pages/ErrorPage/UpdateRequiredView.tsx +++ b/src/pages/ErrorPage/UpdateRequiredView.tsx @@ -7,10 +7,10 @@ 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'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as AppUpdate from '@libs/actions/AppUpdate'; function UpdateRequiredView() { @@ -18,19 +18,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.tsx b/src/pages/NewChatPage.tsx index 72393e89ae1a3..4aeae7846f978 100755 --- a/src/pages/NewChatPage.tsx +++ b/src/pages/NewChatPage.tsx @@ -9,9 +9,9 @@ import ScreenWrapper from '@components/ScreenWrapper'; import useAutoFocusInput from '@hooks/useAutoFocusInput'; import useLocalize from '@hooks/useLocalize'; 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 DeviceCapabilities from '@libs/DeviceCapabilities'; import doInteractionTask from '@libs/DoInteractionTask'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -55,7 +55,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, isSearchingF 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; @@ -276,7 +276,7 @@ function NewChatPage({betas, isGroupChat, personalDetails, reports, isSearchingF autoFocus={false} /> - {isSmallScreenWidth && } + {shouldUseNarrowLayout && } )} diff --git a/src/pages/home/HeaderView.js b/src/pages/home/HeaderView.js index faa70bb0633a2..de57444b24076 100644 --- a/src/pages/home/HeaderView.js +++ b/src/pages/home/HeaderView.js @@ -20,6 +20,7 @@ import Text from '@components/Text'; import ThreeDotsMenu from '@components/ThreeDotsMenu'; import Tooltip from '@components/Tooltip'; 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'; @@ -89,7 +90,8 @@ const defaultProps = { function HeaderView(props) { const [isDeleteTaskConfirmModalVisible, setIsDeleteTaskConfirmModalVisible] = React.useState(false); - const {isSmallScreenWidth, windowWidth} = useWindowDimensions(); + const {windowWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); const {translate} = useLocalize(); const theme = useTheme(); const styles = useThemeStyles(); @@ -223,7 +225,7 @@ function HeaderView(props) { const defaultSubscriptSize = ReportUtils.isExpenseRequest(props.report) ? CONST.AVATAR_SIZE.SMALL_NORMAL : CONST.AVATAR_SIZE.DEFAULT; const icons = ReportUtils.getIcons(reportHeaderData, props.personalDetails); const brickRoadIndicator = ReportUtils.hasReportNameError(props.report) ? CONST.BRICK_ROAD_INDICATOR_STATUS.ERROR : ''; - const shouldShowBorderBottom = !isTaskReport || !isSmallScreenWidth; + const shouldShowBorderBottom = !isTaskReport || !shouldUseNarrowLayout; const shouldDisableDetailPage = ReportUtils.shouldDisableDetailPage(props.report); const isLoading = !props.report || !props.report.reportID || !title; @@ -233,13 +235,13 @@ function HeaderView(props) { style={[shouldShowBorderBottom && styles.borderBottom]} dataSet={{dragArea: true}} > - - + + {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 7fba188dcedde..f3f046dc6cb3b 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(); @@ -521,7 +521,7 @@ function ReportScreen({ shouldShow={shouldShowNotFoundPage} subtitleKey="notFound.noAccess" shouldShowCloseButton={false} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} onBackButtonPress={Navigation.goBack} shouldShowLink={false} > @@ -532,7 +532,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 52b62c2d15b34..9a8c1d597023a 100755 --- a/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx +++ b/src/pages/home/report/ContextMenu/BaseReportActionContextMenu.tsx @@ -12,8 +12,8 @@ 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'; import * as Session from '@userActions/Session'; import CONST from '@src/CONST'; @@ -111,10 +111,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 12e31495af2bf..16e3e8f79c0fc 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 4bbf3d3932130..85af3e54658d4 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'; @@ -111,7 +112,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; @@ -185,7 +187,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 [], ); @@ -484,10 +486,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 95578c10e816a..f89622889e7c2 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 2c9a4cbd21e85..5e566320426a1 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'; @@ -77,7 +77,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) { @@ -347,7 +347,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; @@ -359,7 +359,7 @@ function ReportActionItemMessageEdit( deleteDraft(); } }, - [deleteDraft, isKeyboardShown, isSmallScreenWidth, publishDraft], + [deleteDraft, isKeyboardShown, shouldUseNarrowLayout, publishDraft], ); /** @@ -419,7 +419,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 d00e681ed3138..e918f3121a583 100644 --- a/src/pages/home/report/ReportActionItemParentAction.tsx +++ b/src/pages/home/report/ReportActionItemParentAction.tsx @@ -3,9 +3,9 @@ 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'; import Navigation from '@libs/Navigation/Navigation'; import onyxSubscribe from '@libs/onyxSubscribe'; import * as ReportUtils from '@libs/ReportUtils'; @@ -36,7 +36,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 +71,9 @@ function ReportActionItemParentAction({report, index = 0, shouldHideThreadDivide return ( <> - + - + {allAncestors.map((ancestor) => ( tags // we render it as text, not as html. @@ -79,7 +79,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 a9e284329421b..b889b1982f6e3 100644 --- a/src/pages/home/sidebar/AllSettingsScreen.tsx +++ b/src/pages/home/sidebar/AllSettingsScreen.tsx @@ -7,9 +7,9 @@ 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'; import Navigation from '@libs/Navigation/Navigation'; import shouldShowSubscriptionsMenu from '@libs/shouldShowSubscriptionsMenu'; import {hasGlobalWorkspaceSettingsRBR} from '@libs/WorkspacesSettingsUtils'; @@ -31,7 +31,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 +47,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 @@ -90,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 ( { App.confirmReadyToOpenApp(); @@ -113,13 +113,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; @@ -151,7 +155,7 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority contentContainerStyles={contentContainerStyles} 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 3346b044ceca1..a251207f394df 100644 --- a/src/pages/settings/AboutPage/AboutPage.tsx +++ b/src/pages/settings/AboutPage/AboutPage.tsx @@ -13,9 +13,9 @@ import Section from '@components/Section'; import Text from '@components/Text'; import TextLink from '@components/TextLink'; 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'; import * as Environment from '@libs/Environment/Environment'; import Navigation from '@libs/Navigation/Navigation'; import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu'; @@ -52,7 +52,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[] = [ @@ -138,12 +138,12 @@ function AboutPage() { > Navigation.goBack(ROUTES.SETTINGS)} icon={Illustrations.PalmTree} /> - +
Navigation.goBack()} /> - +
Navigation.goBack()} - shouldShowBackButton={props.isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} icon={Illustrations.Profile} /> - +
{ const baseMenuItems = [ @@ -55,12 +55,12 @@ function SecuritySettingsPage() { > Navigation.goBack()} icon={Illustrations.LockClosed} /> - +
{translate('twoFactorAuth.codesLoseAccess')} - + {account.isLoading ? ( diff --git a/src/pages/settings/Wallet/WalletEmptyState.tsx b/src/pages/settings/Wallet/WalletEmptyState.tsx index ec63a4fafc261..ca067662b7f67 100644 --- a/src/pages/settings/Wallet/WalletEmptyState.tsx +++ b/src/pages/settings/Wallet/WalletEmptyState.tsx @@ -5,9 +5,9 @@ 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'; import Navigation from '@libs/Navigation/Navigation'; import ROUTES from '@src/ROUTES'; import SCREENS from '@src/SCREENS'; @@ -36,16 +36,16 @@ function WalletEmptyState({onAddPaymentMethod}: WalletEmptyStateProps) { 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()} icon={Illustrations.MoneyIntoWallet} - shouldShowBackButton={isSmallScreenWidth} + shouldShowBackButton={shouldUseNarrowLayout} /> - + ); @@ -493,8 +495,8 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi shouldShowEmptyListMessage={false} shouldEnableScroll={false} onPress={paymentMethodPressed} - style={[styles.mt5, [isSmallScreenWidth ? styles.mhn5 : styles.mhn8]]} - listItemStyle={isSmallScreenWidth ? styles.ph5 : styles.ph8} + style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]} + listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8} actionPaymentMethodType={shouldShowDefaultDeleteMenu ? paymentMethod.selectedPaymentMethodType : ''} activePaymentMethodID={shouldShowDefaultDeleteMenu ? getSelectedPaymentMethodID() : ''} buttonRef={addPaymentMethodAnchorRef} @@ -517,8 +519,8 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi buttonRef={addPaymentMethodAnchorRef} onListContentSizeChange={shouldShowAddPaymentMenu || shouldShowDefaultDeleteMenu ? setMenuPosition : () => {}} shouldEnableScroll={false} - style={[styles.mt5, [isSmallScreenWidth ? styles.mhn5 : styles.mhn8]]} - listItemStyle={isSmallScreenWidth ? styles.ph5 : styles.ph8} + style={[styles.mt5, [shouldUseNarrowLayout ? styles.mhn5 : styles.mhn8]]} + listItemStyle={shouldUseNarrowLayout ? styles.ph5 : styles.ph8} />
@@ -534,7 +536,7 @@ function WalletPage({bankAccountList = {}, cardList = {}, fundList = {}, isLoadi anchorRef={paymentMethodButtonRef as RefObject} > {!showConfirmDeleteModal && ( - + {isPopoverBottomMount && ( )} setShowConfirmDeleteModal(true)} - wrapperStyle={[styles.pv3, styles.ph5, !isSmallScreenWidth ? styles.sidebarPopover : {}]} + wrapperStyle={[styles.pv3, styles.ph5, !shouldUseNarrowLayout ? styles.sidebarPopover : {}]} /> )} diff --git a/src/pages/signin/ChooseSSOOrMagicCode.tsx b/src/pages/signin/ChooseSSOOrMagicCode.tsx index 7a39df332611e..c8e4435cd017c 100644 --- a/src/pages/signin/ChooseSSOOrMagicCode.tsx +++ b/src/pages/signin/ChooseSSOOrMagicCode.tsx @@ -8,8 +8,8 @@ import Text from '@components/Text'; import useKeyboardState from '@hooks/useKeyboardState'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; -import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as Session from '@userActions/Session'; @@ -39,7 +39,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos const {isKeyboardShown} = useKeyboardState(); const {translate} = useLocalize(); const {isOffline} = useNetwork(); - const {isSmallScreenWidth} = useWindowDimensions(); + const {shouldUseNarrowLayout} = useResponsiveLayout(); // This view doesn't have a field for user input, so dismiss the device keyboard if shown useEffect(() => { @@ -52,7 +52,7 @@ function ChooseSSOOrMagicCode({credentials, account, setIsUsingMagicCode}: Choos return ( <> - {translate('samlSignIn.welcomeSAMLEnabled')} + {translate('samlSignIn.welcomeSAMLEnabled')}