Skip to content

enable new focus management for waypoint and report field page #43041

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Julesssss merged 3 commits into from
Jun 7, 2024
+16 −1
Merged

enable new focus management for waypoint and report field page #43041

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5d107e0
enable new focus management
ntdiary Jun 4, 2024
6ffb67a
do not refocus after deletion
ntdiary Jun 5, 2024
55e84c0
fix ts check
ntdiary Jun 5, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions src/components/ConfirmModal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ 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 */
Expand Down Expand Up @@ -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({
Expand All @@ -98,6 +102,7 @@ function ConfirmModal({
onConfirm,
image,
shouldEnableNewFocusManagement,
restoreFocusType,
}: ConfirmModalProps) {
const {isSmallScreenWidth} = useResponsiveLayout();
const styles = useThemeStyles();
Expand All @@ -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}
>
<ConfirmContent
title={title}
Expand Down
1 change: 1 addition & 0 deletions src/pages/EditReportFieldPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,7 @@ function EditReportFieldPage({route, policy, report}: EditReportFieldPageProps)
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
shouldEnableNewFocusManagement
/>

{(reportField.type === 'text' || isReportFieldTitle) && (
Expand Down
10 changes: 9 additions & 1 deletion src/pages/iou/request/step/IOURequestStepWaypoint.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +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 type BaseModalProps from '@components/Modal/types';
import ScreenWrapper from '@components/ScreenWrapper';
import useLocalize from '@hooks/useLocalize';
import useLocationBias from '@hooks/useLocationBias';
Expand Down Expand Up @@ -58,6 +59,7 @@ function IOURequestStepWaypoint({
const styles = useThemeStyles();
const {windowWidth} = useWindowDimensions();
const [isDeleteStopModalOpen, setIsDeleteStopModalOpen] = useState(false);
const [restoreFocusType, setRestoreFocusType] = useState<BaseModalProps['restoreFocusType']>();
const navigation = useNavigation();
const isFocused = navigation.isFocused();
const {translate} = useLocalize();
Expand Down Expand Up @@ -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));
};
Expand Down Expand Up @@ -172,7 +175,10 @@ function IOURequestStepWaypoint({
{
icon: Expensicons.Trashcan,
text: translate('distance.deleteWaypoint'),
onSelected: () => setIsDeleteStopModalOpen(true),
onSelected: () => {
setRestoreFocusType(undefined);
setIsDeleteStopModalOpen(true);
},
},
]}
/>
Expand All @@ -186,6 +192,8 @@ function IOURequestStepWaypoint({
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
danger
shouldEnableNewFocusManagement

@ntdiary ntdiary Jun 7, 2024

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

a bit strange, I thought there would be a conflict with the main branch here. 🤔

@Julesssss Julesssss Jun 7, 2024

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Lol, you jynxed us -- #43261

restoreFocusType={restoreFocusType}
/>
<FormProvider
style={[styles.flexGrow1, styles.mh5]}
Expand Down