diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index c64fae126c759..916b8f52a4a57 100755 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -165,6 +165,7 @@ function ConfirmModal({ shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} restoreFocusType={restoreFocusType} shouldHandleNavigationBack={shouldHandleNavigationBack} + shouldUseNewModal > id !== currentUserAccountID); removeFromGroupChat(report.reportID, accountIDsToRemove); setSearchValue(''); - setSelectedMembers([]); setRemoveMembersConfirmModalVisible(false); InteractionManager.runAfterInteractions(() => { + setSelectedMembers([]); clearUserSearchPhrase(); }); }; diff --git a/src/pages/RoomMembersPage.tsx b/src/pages/RoomMembersPage.tsx index 9e7c0e3362e30..5a5e48633fcb5 100644 --- a/src/pages/RoomMembersPage.tsx +++ b/src/pages/RoomMembersPage.tsx @@ -132,9 +132,9 @@ function RoomMembersPage({report, policies}: RoomMembersPageProps) { removeFromRoom(report.reportID, selectedMembers); } setSearchValue(''); - setSelectedMembers([]); setRemoveMembersConfirmModalVisible(false); InteractionManager.runAfterInteractions(() => { + setSelectedMembers([]); clearUserSearchPhrase(); }); }; diff --git a/src/pages/workspace/WorkspaceMembersPage.tsx b/src/pages/workspace/WorkspaceMembersPage.tsx index d97b3a037934e..92be8c2bcf602 100644 --- a/src/pages/workspace/WorkspaceMembersPage.tsx +++ b/src/pages/workspace/WorkspaceMembersPage.tsx @@ -300,9 +300,9 @@ function WorkspaceMembersPage({personalDetails, route, policy, currentUserPerson }); } - setSelectedEmployees([]); setRemoveMembersConfirmModalVisible(false); InteractionManager.runAfterInteractions(() => { + setSelectedEmployees([]); removeMembers(accountIDsToRemove, route.params.policyID); }); }; diff --git a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx index d5ffb3c866fa3..cda7f7b666819 100644 --- a/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx +++ b/src/pages/workspace/categories/WorkspaceCategoriesPage.tsx @@ -1,6 +1,6 @@ import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {ActivityIndicator, InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -217,9 +217,12 @@ function WorkspaceCategoriesPage({route}: WorkspaceCategoriesPageProps) { }; const handleDeleteCategories = () => { - setSelectedCategories([]); deleteWorkspaceCategories(policyId, selectedCategories); setDeleteCategoriesConfirmModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedCategories([]); + }); }; const getHeaderButtons = () => { diff --git a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx index 802ec0312efee..acb79c352ba55 100644 --- a/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx +++ b/src/pages/workspace/distanceRates/PolicyDistanceRatesPage.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {ActivityIndicator, InteractionManager, View} from 'react-native'; import Button from '@components/Button'; import type {DropdownOption, WorkspaceDistanceRatesBulkActionType} from '@components/ButtonWithDropdownMenu/types'; import ConfirmModal from '@components/ConfirmModal'; @@ -237,8 +237,11 @@ function PolicyDistanceRatesPage({ } deletePolicyDistanceRates(policyID, customUnit, selectedDistanceRates); - setSelectedDistanceRates([]); setIsDeleteModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedDistanceRates([]); + }); }; const toggleRate = (rate: RateForList) => { diff --git a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx index f2a161b7aed4d..79ba4e009df39 100644 --- a/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx +++ b/src/pages/workspace/perDiem/WorkspacePerDiemPage.tsx @@ -1,7 +1,7 @@ import {useFocusEffect} from '@react-navigation/native'; import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {ActivityIndicator, InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -256,8 +256,11 @@ function WorkspacePerDiemPage({route}: WorkspacePerDiemPageProps) { const handleDeletePerDiemRates = () => { deleteWorkspacePerDiemRates(policyID, customUnit, selectedPerDiem); - setSelectedPerDiem([]); setDeletePerDiemConfirmModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedPerDiem([]); + }); }; const getHeaderButtons = () => { diff --git a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx index c74ed6487ec2c..e030674594c97 100644 --- a/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx +++ b/src/pages/workspace/reportFields/ReportFieldsListValuesPage.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useMemo, useState} from 'react'; -import {View} from 'react-native'; +import {InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -164,8 +164,6 @@ function ReportFieldsListValuesPage({ }; const handleDeleteValues = () => { - setSelectedValues({}); - const valuesToDelete = selectedValuesArray.reduce((acc, valueName) => { const index = listValues?.indexOf(valueName) ?? -1; @@ -183,6 +181,10 @@ function ReportFieldsListValuesPage({ } setDeleteValuesConfirmModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedValues({}); + }); }; const openListValuePage = (valueItem: ValueListItem) => { diff --git a/src/pages/workspace/tags/WorkspaceTagsPage.tsx b/src/pages/workspace/tags/WorkspaceTagsPage.tsx index d474cbb4a7b5c..4ed31a12f3ecd 100644 --- a/src/pages/workspace/tags/WorkspaceTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceTagsPage.tsx @@ -1,6 +1,6 @@ import lodashSortBy from 'lodash/sortBy'; import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {ActivityIndicator, InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -275,9 +275,12 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const selectedTagsArray = Object.keys(selectedTags).filter((key) => selectedTags[key]); const deleteTags = () => { - setSelectedTags({}); deletePolicyTags(policyID, selectedTagsArray); setIsDeleteTagsConfirmModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedTags({}); + }); }; const isLoading = !isOffline && policyTags === undefined; @@ -423,140 +426,141 @@ function WorkspaceTagsPage({route}: WorkspaceTagsPageProps) { const selectionModeHeader = selectionMode?.isEnabled && shouldUseNarrowLayout; return ( - - + - { - if (selectionMode?.isEnabled) { - setSelectedTags({}); - turnOffMobileSelectionMode(); - return; - } - - if (backTo) { - Navigation.goBack(backTo); - return; - } - - goBackFromWorkspaceCentralScreen(policyID); - }} - shouldShowThreeDotsButton={!policy?.hasMultipleTagLists} - threeDotsMenuItems={threeDotsMenuItems} - threeDotsAnchorPosition={threeDotsAnchorPosition} + - {!shouldUseNarrowLayout && getHeaderButtons()} - - {shouldUseNarrowLayout && {getHeaderButtons()}} - setIsDeleteTagsConfirmModalVisible(false)} - title={translate(selectedTagsArray.length === 1 ? 'workspace.tags.deleteTag' : 'workspace.tags.deleteTags')} - prompt={translate(selectedTagsArray.length === 1 ? 'workspace.tags.deleteTagConfirmation' : 'workspace.tags.deleteTagsConfirmation')} - confirmText={translate('common.delete')} - cancelText={translate('common.cancel')} - danger - /> - - {!hasSyncError && isConnectionVerified ? ( - - {`${translate('workspace.tags.importedFromAccountingSoftware')} `} - - {`${currentConnectionName} ${translate('workspace.accounting.settings')}`} - - . - - ) : ( - {translate('workspace.tags.subtitle')} + { + if (selectionMode?.isEnabled) { + setSelectedTags({}); + turnOffMobileSelectionMode(); + return; + } + + if (backTo) { + Navigation.goBack(backTo); + return; + } + + goBackFromWorkspaceCentralScreen(policyID); + }} + shouldShowThreeDotsButton={!policy?.hasMultipleTagLists} + threeDotsMenuItems={threeDotsMenuItems} + threeDotsAnchorPosition={threeDotsAnchorPosition} + > + {!shouldUseNarrowLayout && getHeaderButtons()} + + {shouldUseNarrowLayout && {getHeaderButtons()}} + + {!hasSyncError && isConnectionVerified ? ( + + {`${translate('workspace.tags.importedFromAccountingSoftware')} `} + + {`${currentConnectionName} ${translate('workspace.accounting.settings')}`} + + . + + ) : ( + {translate('workspace.tags.subtitle')} + )} + + {tagList.length > CONST.SEARCH_ITEM_LIMIT && ( + )} - - {tagList.length > CONST.SEARCH_ITEM_LIMIT && ( - - )} - {isLoading && ( - - )} - {!hasVisibleTags && !isLoading && ( - - - - )} - {hasVisibleTags && !isLoading && ( - item && toggleTag(item)} - sections={[{data: filteredTagList, isDisabled: false}]} - onCheckboxPress={toggleTag} - onSelectRow={navigateToTagSettings} - shouldSingleExecuteRowSelect={!canSelectMultiple} - onSelectAll={toggleAllTags} - ListItem={TableListItem} - customListHeader={getCustomListHeader()} - shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} - listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} - onDismissError={(item) => !isMultiLevelTags && clearPolicyTagErrors(policyID, item.value, 0)} - showScrollIndicator={false} - addBottomSafeAreaPadding - /> - )} - - setIsOfflineModalVisible(false)} - title={translate('common.youAppearToBeOffline')} - prompt={translate('common.thisFeatureRequiresInternet')} - confirmText={translate('common.buttonConfirm')} - shouldShowCancelButton={false} - onCancel={() => setIsOfflineModalVisible(false)} - shouldHandleNavigationBack - /> - setIsDownloadFailureModalVisible(false)} - secondOptionText={translate('common.buttonConfirm')} - isVisible={isDownloadFailureModalVisible} - onClose={() => setIsDownloadFailureModalVisible(false)} - /> - - + )} + {!hasVisibleTags && !isLoading && ( + + + + )} + {hasVisibleTags && !isLoading && ( + item && toggleTag(item)} + sections={[{data: filteredTagList, isDisabled: false}]} + onCheckboxPress={toggleTag} + onSelectRow={navigateToTagSettings} + shouldSingleExecuteRowSelect={!canSelectMultiple} + onSelectAll={toggleAllTags} + ListItem={TableListItem} + customListHeader={getCustomListHeader()} + shouldPreventDefaultFocusOnSelectRow={!canUseTouchScreen()} + listHeaderWrapperStyle={[styles.ph9, styles.pv3, styles.pb5]} + onDismissError={(item) => !isMultiLevelTags && clearPolicyTagErrors(policyID, item.value, 0)} + showScrollIndicator={false} + addBottomSafeAreaPadding + /> + )} + + + setIsOfflineModalVisible(false)} + title={translate('common.youAppearToBeOffline')} + prompt={translate('common.thisFeatureRequiresInternet')} + confirmText={translate('common.buttonConfirm')} + shouldShowCancelButton={false} + onCancel={() => setIsOfflineModalVisible(false)} + shouldHandleNavigationBack + /> + setIsDownloadFailureModalVisible(false)} + secondOptionText={translate('common.buttonConfirm')} + isVisible={isDownloadFailureModalVisible} + onClose={() => setIsDownloadFailureModalVisible(false)} + /> + setIsDeleteTagsConfirmModalVisible(false)} + title={translate(selectedTagsArray.length === 1 ? 'workspace.tags.deleteTag' : 'workspace.tags.deleteTags')} + prompt={translate(selectedTagsArray.length === 1 ? 'workspace.tags.deleteTagConfirmation' : 'workspace.tags.deleteTagsConfirmation')} + confirmText={translate('common.delete')} + cancelText={translate('common.cancel')} + danger + /> + ); } diff --git a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx index 96bb18b5ed012..a615368f4c34d 100644 --- a/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx +++ b/src/pages/workspace/tags/WorkspaceViewTagsPage.tsx @@ -1,6 +1,6 @@ import {useIsFocused} from '@react-navigation/native'; import React, {useCallback, useEffect, useMemo, useRef, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {ActivityIndicator, InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; import type {DropdownOption} from '@components/ButtonWithDropdownMenu/types'; @@ -191,9 +191,12 @@ function WorkspaceViewTagsPage({route}: WorkspaceViewTagsProps) { }; const deleteTags = () => { - setSelectedTags([]); deletePolicyTags(policyID, selectedTags); setIsDeleteTagsConfirmModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedTags([]); + }); }; const isLoading = !isOffline && policyTags === undefined; diff --git a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx index 306506a41c2de..8348bd2488e50 100644 --- a/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx +++ b/src/pages/workspace/taxes/WorkspaceTaxesPage.tsx @@ -1,5 +1,5 @@ import React, {useCallback, useEffect, useMemo, useState} from 'react'; -import {ActivityIndicator, View} from 'react-native'; +import {ActivityIndicator, InteractionManager, View} from 'react-native'; import {useOnyx} from 'react-native-onyx'; import Button from '@components/Button'; import ButtonWithDropdownMenu from '@components/ButtonWithDropdownMenu'; @@ -242,8 +242,11 @@ function WorkspaceTaxesPage({ return; } deletePolicyTaxes(policy, selectedTaxesIDs); - setSelectedTaxesIDs([]); setIsDeleteModalVisible(false); + + InteractionManager.runAfterInteractions(() => { + setSelectedTaxesIDs([]); + }); }, [policy, selectedTaxesIDs]); const toggleTaxes = useCallback( diff --git a/tests/perf-test/ReportActionCompose.perf-test.tsx b/tests/perf-test/ReportActionCompose.perf-test.tsx index 9bd9ac2e4a865..2e4f3914a0d6f 100644 --- a/tests/perf-test/ReportActionCompose.perf-test.tsx +++ b/tests/perf-test/ReportActionCompose.perf-test.tsx @@ -21,6 +21,9 @@ jest.mock('@gorhom/portal'); jest.mock('react-native-reanimated', () => ({ ...jest.requireActual('react-native-reanimated/mock'), useAnimatedRef: jest.fn(), + LayoutAnimationConfig: () => { + return ({children}: {children: React.ReactNode}) => children; + }, })); jest.mock('../../src/libs/Navigation/Navigation', () => ({