From 16eccc019497ed7d5058f77aef3f330cfdaf541c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20M=C3=B3rawski?= Date: Mon, 8 Apr 2024 19:40:47 +0200 Subject: [PATCH] merge fixes --- src/components/ScreenWrapper.tsx | 28 +++++++++++-------- src/hooks/useScreenWrapperTransitionStatus.ts | 17 +++++++++++ src/pages/SearchPage/SearchPageFooter.tsx | 8 +++--- src/pages/SearchPage/index.tsx | 10 +++---- ...yForRefactorRequestParticipantsSelector.js | 13 ++++----- .../MoneyRequestParticipantsPage.js | 11 +++----- .../MoneyRequestParticipantsSelector.js | 10 +++++-- src/pages/workspace/WorkspaceInvitePage.tsx | 5 ++-- 8 files changed, 63 insertions(+), 39 deletions(-) create mode 100644 src/hooks/useScreenWrapperTransitionStatus.ts diff --git a/src/components/ScreenWrapper.tsx b/src/components/ScreenWrapper.tsx index b78e274371ca..46fa4e21f2f5 100644 --- a/src/components/ScreenWrapper.tsx +++ b/src/components/ScreenWrapper.tsx @@ -1,7 +1,7 @@ import {useNavigation} from '@react-navigation/native'; import type {StackNavigationProp} from '@react-navigation/stack'; import type {ForwardedRef, ReactNode} from 'react'; -import React, {forwardRef, useEffect, useRef, useState} from 'react'; +import React, {createContext, forwardRef, useEffect, useMemo, useRef, useState} from 'react'; import type {DimensionValue, StyleProp, ViewStyle} from 'react-native'; import {Keyboard, PanResponder, View} from 'react-native'; import {PickerAvoidingView} from 'react-native-picker-select'; @@ -99,6 +99,8 @@ type ScreenWrapperProps = { shouldShowOfflineIndicatorInWideScreen?: boolean; }; +const ScreenWrapperStatusContext = createContext({didScreenTransitionEnd: false}); + function ScreenWrapper( { shouldEnableMaxHeight = false, @@ -201,6 +203,7 @@ function ScreenWrapper( }, []); const isAvoidingViewportScroll = useTackInputFocus(shouldEnableMaxHeight && shouldAvoidScrollOnVirtualViewport && Browser.isMobileSafari()); + const contextValue = useMemo(() => ({didScreenTransitionEnd}), [didScreenTransitionEnd]); return ( @@ -251,16 +254,18 @@ function ScreenWrapper( {isDevelopment && } - { - // If props.children is a function, call it to provide the insets to the children. - typeof children === 'function' - ? children({ - insets, - safeAreaPaddingBottomStyle, - didScreenTransitionEnd, - }) - : children - } + + { + // If props.children is a function, call it to provide the insets to the children. + typeof children === 'function' + ? children({ + insets, + safeAreaPaddingBottomStyle, + didScreenTransitionEnd, + }) + : children + } + {isSmallScreenWidth && shouldShowOfflineIndicator && } {!isSmallScreenWidth && shouldShowOfflineIndicatorInWideScreen && ( - - + ); } diff --git a/src/pages/SearchPage/index.tsx b/src/pages/SearchPage/index.tsx index 5066a676c260..a0812042f013 100644 --- a/src/pages/SearchPage/index.tsx +++ b/src/pages/SearchPage/index.tsx @@ -1,7 +1,6 @@ import type {StackScreenProps} from '@react-navigation/stack'; import React, {useEffect, useMemo, useState} from 'react'; -import {View} from 'react-native'; -import type {OnyxCollection, OnyxEntry} from 'react-native-onyx'; +import type {OnyxEntry} from 'react-native-onyx'; import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import {useOptionsList} from '@components/OptionListContextProvider'; @@ -12,6 +11,7 @@ import useDebouncedState from '@hooks/useDebouncedState'; import useDismissedReferralBanners from '@hooks/useDismissedReferralBanners'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; +import useThemeStyles from '@hooks/useThemeStyles'; import type {MaybePhraseKey} from '@libs/Localize'; import Navigation from '@libs/Navigation/Navigation'; import type {RootStackParamList} from '@libs/Navigation/types'; @@ -78,7 +78,7 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps) userToInvite, headerMessage, } = useMemo(() => { - if (!areOptionsInitialized) { + if (!areOptionsInitialized || !isScreenTransitionEnd) { return { recentReports: [], personalDetails: [], @@ -89,7 +89,7 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps) const optionList = OptionsListUtils.getSearchOptions(options, debouncedSearchValue.trim(), betas ?? []); const header = OptionsListUtils.getHeaderMessage(optionList.recentReports.length + optionList.personalDetails.length !== 0, Boolean(optionList.userToInvite), debouncedSearchValue); return {...optionList, headerMessage: header}; - }, [areOptionsInitialized, options, debouncedSearchValue, betas]); + }, [areOptionsInitialized, options, debouncedSearchValue, betas, isScreenTransitionEnd]); const sections = useMemo((): SearchPageSectionList => { const newSections: SearchPageSectionList = []; @@ -160,7 +160,7 @@ function SearchPage({betas, isSearchingForReports, navigation}: SearchPageProps) headerMessageStyle={headerMessage === translate('common.noResultsFound') ? [themeStyles.ph4, themeStyles.pb5] : undefined} onLayout={setPerformanceTimersEnd} onSelectRow={selectReport} - showLoadingPlaceholder={!areOptionsInitialized} + showLoadingPlaceholder={!areOptionsInitialized || !isScreenTransitionEnd} footerContent={!isDismissed && SerachPageFooterInstance} isLoadingNewOptions={isSearchingForReports ?? undefined} /> diff --git a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js index 16606d5f3f51..fff1f5f6cda7 100644 --- a/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js +++ b/src/pages/iou/request/MoneyTemporaryForRefactorRequestParticipantsSelector.js @@ -17,6 +17,7 @@ import useDismissedReferralBanners from '@hooks/useDismissedReferralBanners'; import useLocalize from '@hooks/useLocalize'; import useNetwork from '@hooks/useNetwork'; import usePermissions from '@hooks/usePermissions'; +import useScreenWrapperTranstionStatus from '@hooks/useScreenWrapperTransitionStatus'; import useThemeStyles from '@hooks/useThemeStyles'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as OptionsListUtils from '@libs/OptionsListUtils'; @@ -50,18 +51,14 @@ const propTypes = { /** The request type, ie. manual, scan, distance */ iouRequestType: PropTypes.oneOf(_.values(CONST.IOU.REQUEST_TYPE)).isRequired, - - /** Whether the parent screen transition has ended */ - didScreenTransitionEnd: PropTypes.bool, }; const defaultProps = { participants: [], betas: [], - didScreenTransitionEnd: false, }; -function MoneyTemporaryForRefactorRequestParticipantsSelector({betas, participants, onFinish, onParticipantsAdded, iouType, iouRequestType, didScreenTransitionEnd}) { +function MoneyTemporaryForRefactorRequestParticipantsSelector({betas, participants, onFinish, onParticipantsAdded, iouType, iouRequestType}) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); @@ -70,6 +67,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({betas, participan const personalDetails = usePersonalDetails(); const {isDismissed} = useDismissedReferralBanners({referralContentType}); const {canUseP2PDistanceRequests} = usePermissions(); + const {didScreenTransitionEnd} = useScreenWrapperTranstionStatus(); const {options, areOptionsInitialized} = useOptionsList({ shouldInitialize: didScreenTransitionEnd, }); @@ -89,7 +87,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({betas, participan */ const [sections, newChatOptions] = useMemo(() => { const newSections = []; - if (!areOptionsInitialized) { + if (!areOptionsInitialized || !didScreenTransitionEnd) { return [newSections, {}]; } const chatOptions = OptionsListUtils.getFilteredOptions( @@ -168,6 +166,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({betas, participan maxParticipantsReached, personalDetails, translate, + didScreenTransitionEnd, ]); /** @@ -352,7 +351,7 @@ function MoneyTemporaryForRefactorRequestParticipantsSelector({betas, participan onSelectRow={addSingleParticipant} footerContent={footerContent} headerMessage={headerMessage} - showLoadingPlaceholder={!areOptionsInitialized} + showLoadingPlaceholder={!areOptionsInitialized || !didScreenTransitionEnd} rightHandSideComponent={itemRightSideComponent} /> ); diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js index b5d11faac6c4..88d03727d6ca 100644 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsPage.js @@ -3,14 +3,12 @@ import lodashGet from 'lodash/get'; import lodashSize from 'lodash/size'; import PropTypes from 'prop-types'; import React, {useCallback, useEffect, useMemo, useRef} from 'react'; -import {View} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import ScreenWrapper from '@components/ScreenWrapper'; import transactionPropTypes from '@components/transactionPropTypes'; import useInitialValue from '@hooks/useInitialValue'; import useLocalize from '@hooks/useLocalize'; -import useThemeStyles from '@hooks/useThemeStyles'; import compose from '@libs/compose'; import * as DeviceCapabilities from '@libs/DeviceCapabilities'; import * as MoneyRequestUtils from '@libs/MoneyRequestUtils'; @@ -53,7 +51,6 @@ const defaultProps = { }; function MoneyRequestParticipantsPage({iou, selectedTab, route, transaction}) { - const styles = useThemeStyles(); const {translate} = useLocalize(); const prevMoneyRequestId = useRef(iou.id); const iouType = useInitialValue(() => lodashGet(route, 'params.iouType', '')); @@ -128,8 +125,8 @@ function MoneyRequestParticipantsPage({iou, selectedTab, route, transaction}) { shouldEnableMaxHeight={DeviceCapabilities.canUseTouchScreen()} testID={MoneyRequestParticipantsPage.displayName} > - {({safeAreaPaddingBottomStyle}) => ( - + {({didScreenTransitionEnd}) => ( + <> navigateToConfirmationStep(iouType)} navigateToSplit={() => navigateToConfirmationStep(CONST.IOU.TYPE.SPLIT)} - safeAreaPaddingBottomStyle={safeAreaPaddingBottomStyle} iouType={iouType} isDistanceRequest={isDistanceRequest} isScanRequest={isScanRequest} + didScreenTransitionEnd={didScreenTransitionEnd} /> - + )} ); diff --git a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js index 6bf56081316d..1b999d502f7c 100755 --- a/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js +++ b/src/pages/iou/steps/MoneyRequstParticipantsPage/MoneyRequestParticipantsSelector.js @@ -54,15 +54,19 @@ const propTypes = { /** Whether the money request is a distance request or not */ isDistanceRequest: PropTypes.bool, + + /** Whether the screen transition has ended */ + didScreenTransitionEnd: PropTypes.bool, }; const defaultProps = { participants: [], betas: [], isDistanceRequest: false, + didScreenTransitionEnd: false, }; -function MoneyRequestParticipantsSelector({betas, participants, navigateToRequest, navigateToSplit, onAddParticipants, iouType, isDistanceRequest}) { +function MoneyRequestParticipantsSelector({betas, participants, navigateToRequest, navigateToSplit, onAddParticipants, iouType, isDistanceRequest, didScreenTransitionEnd}) { const {translate} = useLocalize(); const styles = useThemeStyles(); const [searchTerm, debouncedSearchTerm, setSearchTerm] = useDebouncedState(''); @@ -70,7 +74,7 @@ function MoneyRequestParticipantsSelector({betas, participants, navigateToReques const {isOffline} = useNetwork(); const personalDetails = usePersonalDetails(); const {canUseP2PDistanceRequests} = usePermissions(); - const {options, areOptionsInitialized} = useOptionsList(); + const {options, areOptionsInitialized} = useOptionsList({shouldInitialize: didScreenTransitionEnd}); const maxParticipantsReached = participants.length === CONST.REPORT.MAXIMUM_PARTICIPANTS; const setSearchTermAndSearchInServer = useSearchTermAndSearch(setSearchTerm, maxParticipantsReached); @@ -344,7 +348,7 @@ function MoneyRequestParticipantsSelector({betas, participants, navigateToReques onSelectRow={addSingleParticipant} footerContent={footerContent} headerMessage={headerMessage} - showLoadingPlaceholder={!areOptionsInitialized} + showLoadingPlaceholder={!areOptionsInitialized && !didScreenTransitionEnd} rightHandSideComponent={itemRightSideComponent} /> ); diff --git a/src/pages/workspace/WorkspaceInvitePage.tsx b/src/pages/workspace/WorkspaceInvitePage.tsx index 02c2555d6dcd..4a85e01d973a 100644 --- a/src/pages/workspace/WorkspaceInvitePage.tsx +++ b/src/pages/workspace/WorkspaceInvitePage.tsx @@ -63,7 +63,6 @@ function WorkspaceInvitePage({ invitedEmailsToAccountIDsDraft, policy, isLoadingReportData = true, - didScreenTransitionEnd, }: WorkspaceInvitePageProps) { const styles = useThemeStyles(); const {translate} = useLocalize(); @@ -71,6 +70,7 @@ function WorkspaceInvitePage({ const [selectedOptions, setSelectedOptions] = useState([]); const [personalDetails, setPersonalDetails] = useState([]); const [usersToInvite, setUsersToInvite] = useState([]); + const [didScreenTransitionEnd, setDidScreenTransitionEnd] = useState(false); const openWorkspaceInvitePage = () => { const policyMemberEmailsToAccountIDs = PolicyUtils.getMemberAccountIDsForWorkspace(policyMembers, personalDetailsProp); Policy.openWorkspaceInvitePage(route.params.policyID, Object.keys(policyMemberEmailsToAccountIDs)); @@ -290,6 +290,7 @@ function WorkspaceInvitePage({ shouldUseCachedViewportHeight testID={WorkspaceInvitePage.displayName} includeSafeAreaPaddingBottom={false} + onEntryTransitionEnd={() => setDidScreenTransitionEnd(true)} >