From 5d107e0979b19b74162e04dd946f989fa1f2b50e Mon Sep 17 00:00:00 2001 From: ntdiary <2471314@gmail.com> Date: Tue, 4 Jun 2024 23:55:37 +0800 Subject: [PATCH 1/3] enable new focus management --- src/pages/EditReportFieldPage.tsx | 1 + src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 1 + 2 files changed, 2 insertions(+) diff --git a/src/pages/EditReportFieldPage.tsx b/src/pages/EditReportFieldPage.tsx index 53b8043c9162..d555b2654333 100644 --- a/src/pages/EditReportFieldPage.tsx +++ b/src/pages/EditReportFieldPage.tsx @@ -123,6 +123,7 @@ function EditReportFieldPage({route, policy, report}: EditReportFieldPageProps) confirmText={translate('common.delete')} cancelText={translate('common.cancel')} danger + shouldEnableNewFocusManagement /> {(reportField.type === 'text' || isReportFieldTitle) && ( diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 6c0eae98fb85..541404d1345d 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -186,6 +186,7 @@ function IOURequestStepWaypoint({ confirmText={translate('common.delete')} cancelText={translate('common.cancel')} danger + shouldEnableNewFocusManagement /> Date: Wed, 5 Jun 2024 17:20:07 +0800 Subject: [PATCH 2/3] do not refocus after deletion --- src/components/ConfirmModal.tsx | 6 ++++++ src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 9 ++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index 23a08b4306e3..c76e11364654 100755 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -1,6 +1,7 @@ import type {ReactNode} from 'react'; import React from 'react'; import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; +import BaseModalProps from '@components/Modal/types'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; @@ -74,6 +75,9 @@ type ConfirmModalProps = { * We are attempting to migrate to a new refocus manager, adding this property for gradual migration. * */ shouldEnableNewFocusManagement?: boolean; + + /** How to re-focus after the modal is dismissed */ + restoreFocusType: BaseModalProps['restoreFocusType']; }; function ConfirmModal({ @@ -98,6 +102,7 @@ function ConfirmModal({ onConfirm, image, shouldEnableNewFocusManagement, + restoreFocusType, }: ConfirmModalProps) { const {isSmallScreenWidth} = useResponsiveLayout(); const styles = useThemeStyles(); @@ -112,6 +117,7 @@ function ConfirmModal({ type={isSmallScreenWidth ? CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED : CONST.MODAL.MODAL_TYPE.CONFIRM} innerContainerStyle={image ? styles.pt0 : {}} shouldEnableNewFocusManagement={shouldEnableNewFocusManagement} + restoreFocusType={restoreFocusType} > (); const navigation = useNavigation(); const isFocused = navigation.isFocused(); const {translate} = useLocalize(); @@ -130,6 +132,7 @@ function IOURequestStepWaypoint({ const deleteStopAndHideModal = () => { Transaction.removeWaypoint(transaction, pageIndex, action === CONST.IOU.ACTION.CREATE); + setRestoreFocusType(CONST.MODAL.RESTORE_FOCUS_TYPE.DELETE); setIsDeleteStopModalOpen(false); Navigation.goBack(ROUTES.MONEY_REQUEST_STEP_DISTANCE.getRoute(action, iouType, transactionID, reportID)); }; @@ -172,7 +175,10 @@ function IOURequestStepWaypoint({ { icon: Expensicons.Trashcan, text: translate('distance.deleteWaypoint'), - onSelected: () => setIsDeleteStopModalOpen(true), + onSelected: () => { + setRestoreFocusType(undefined); + setIsDeleteStopModalOpen(true); + }, }, ]} /> @@ -187,6 +193,7 @@ function IOURequestStepWaypoint({ cancelText={translate('common.cancel')} danger shouldEnableNewFocusManagement + restoreFocusType={restoreFocusType} /> Date: Wed, 5 Jun 2024 19:26:45 +0800 Subject: [PATCH 3/3] fix ts check --- src/components/ConfirmModal.tsx | 4 ++-- src/pages/iou/request/step/IOURequestStepWaypoint.tsx | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/ConfirmModal.tsx b/src/components/ConfirmModal.tsx index c76e11364654..1403f6a7ed42 100755 --- a/src/components/ConfirmModal.tsx +++ b/src/components/ConfirmModal.tsx @@ -1,13 +1,13 @@ import type {ReactNode} from 'react'; import React from 'react'; import type {StyleProp, TextStyle, ViewStyle} from 'react-native'; -import BaseModalProps from '@components/Modal/types'; import useResponsiveLayout from '@hooks/useResponsiveLayout'; import useThemeStyles from '@hooks/useThemeStyles'; import CONST from '@src/CONST'; import type IconAsset from '@src/types/utils/IconAsset'; import ConfirmContent from './ConfirmContent'; import Modal from './Modal'; +import type BaseModalProps from './Modal/types'; type ConfirmModalProps = { /** Title of the modal */ @@ -77,7 +77,7 @@ type ConfirmModalProps = { shouldEnableNewFocusManagement?: boolean; /** How to re-focus after the modal is dismissed */ - restoreFocusType: BaseModalProps['restoreFocusType']; + restoreFocusType?: BaseModalProps['restoreFocusType']; }; function ConfirmModal({ diff --git a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx index 3868d8c513b2..7e122c8cb32d 100644 --- a/src/pages/iou/request/step/IOURequestStepWaypoint.tsx +++ b/src/pages/iou/request/step/IOURequestStepWaypoint.tsx @@ -13,7 +13,7 @@ import InputWrapperWithRef from '@components/Form/InputWrapper'; import type {FormOnyxValues} from '@components/Form/types'; import HeaderWithBackButton from '@components/HeaderWithBackButton'; import * as Expensicons from '@components/Icon/Expensicons'; -import BaseModalProps from '@components/Modal/types'; +import type BaseModalProps from '@components/Modal/types'; import ScreenWrapper from '@components/ScreenWrapper'; import useLocalize from '@hooks/useLocalize'; import useLocationBias from '@hooks/useLocationBias';