From ea0fe8a5f59dfb72db0c38d53256aa7a36a55123 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 9 Apr 2024 15:07:36 +0200 Subject: [PATCH 1/4] add option to disable escape for modal dismiss --- src/libs/actions/Modal.ts | 9 ++++++++- .../BaseOnboardingPersonalDetails.tsx | 7 ++++++- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 ++ src/pages/home/sidebar/SidebarLinks.js | 4 ++++ src/types/onyx/Modal.ts | 3 +++ 5 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/libs/actions/Modal.ts b/src/libs/actions/Modal.ts index 6351d0165544..7de4548b92c9 100644 --- a/src/libs/actions/Modal.ts +++ b/src/libs/actions/Modal.ts @@ -69,6 +69,13 @@ function setModalVisibility(isVisible: boolean) { Onyx.merge(ONYXKEYS.MODAL, {isVisible}); } +/** + * Allows other parts of the app to set whether modals should be dismissable using the Escape key + */ +function setDisableDismissOnEscape(disableDismissOnEscape: boolean) { + Onyx.merge(ONYXKEYS.MODAL, {disableDismissOnEscape}); +} + /** * Allows other parts of app to know that an alert modal is about to open. * This will trigger as soon as a modal is opened but not yet visible while animation is running. @@ -78,4 +85,4 @@ function willAlertModalBecomeVisible(isVisible: boolean, isPopover = false) { Onyx.merge(ONYXKEYS.MODAL, {willAlertModalBecomeVisible: isVisible, isPopover}); } -export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible, closeTop}; +export {setCloseModal, close, onModalDidClose, setModalVisibility, willAlertModalBecomeVisible, setDisableDismissOnEscape, closeTop}; diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index f49c5c0f506e..ae3ed90b3592 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -1,4 +1,4 @@ -import React, {useCallback} from 'react'; +import React, {useCallback, useEffect} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -13,6 +13,7 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; +import * as Modal from '@userActions/Modal'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; @@ -36,6 +37,10 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat const {isSmallScreenWidth} = useWindowDimensions(); const {shouldUseNarrowLayout} = useOnboardingLayout(); + useEffect(() => { + Modal.setDisableDismissOnEscape(true); + }, []); + const saveAndNavigate = useCallback((values: FormOnyxValues<'onboardingPersonalDetailsForm'>) => { PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim()); diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index ae43f850018b..9d8e6c8b94b8 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -16,6 +16,7 @@ import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; +import * as Modal from '@userActions/Modal'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; @@ -80,6 +81,7 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on return; } + Modal.setDisableDismissOnEscape(false); Report.completeEngagementModal(CONST.ONBOARDING_CONCIERGE[selectedPurpose], selectedPurpose); Navigation.dismissModal(); diff --git a/src/pages/home/sidebar/SidebarLinks.js b/src/pages/home/sidebar/SidebarLinks.js index 3716d6ef2f4e..fae7e723e9c3 100644 --- a/src/pages/home/sidebar/SidebarLinks.js +++ b/src/pages/home/sidebar/SidebarLinks.js @@ -76,6 +76,10 @@ function SidebarLinks({onLinkClick, insets, optionListItems, isLoading, priority return; } + if (modal.current.disableDismissOnEscape) { + return; + } + Navigation.dismissModal(); }, shortcutConfig.descriptionKey, diff --git a/src/types/onyx/Modal.ts b/src/types/onyx/Modal.ts index 1a38864f30d6..1ea96cd283ce 100644 --- a/src/types/onyx/Modal.ts +++ b/src/types/onyx/Modal.ts @@ -2,6 +2,9 @@ type Modal = { /** Indicates when an Alert modal is about to be visible */ willAlertModalBecomeVisible?: boolean; + /** Indicates whether the modal should be dismissable using the ESCAPE key */ + disableDismissOnEscape?: boolean; + /** Indicates if there is a modal currently visible or not */ isVisible?: boolean; From 6ec63ca33458b3df945021fada76ebaa3fa2a71d Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Tue, 9 Apr 2024 15:08:51 +0200 Subject: [PATCH 2/4] fix prettier --- .../OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx | 2 +- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index ae3ed90b3592..d6e3d10c6c21 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -13,12 +13,12 @@ import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalD import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; -import * as Modal from '@userActions/Modal'; import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; +import * as Modal from '@userActions/Modal'; import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 9d8e6c8b94b8..b45a4518f334 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -16,10 +16,10 @@ import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; import useThemeStyles from '@hooks/useThemeStyles'; -import * as Modal from '@userActions/Modal'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; +import * as Modal from '@userActions/Modal'; import * as Report from '@userActions/Report'; import * as Welcome from '@userActions/Welcome'; import CONST from '@src/CONST'; From 443539c848aaa792f4d57a4f43b3b114637fc101 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 11 Apr 2024 14:13:03 +0200 Subject: [PATCH 3/4] rework functionality into a reusable hook --- src/hooks/useDisableModalDismissOnEscape.ts | 9 +++++++++ .../BaseOnboardingPersonalDetails.tsx | 8 +++----- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 5 +++-- 3 files changed, 15 insertions(+), 7 deletions(-) create mode 100644 src/hooks/useDisableModalDismissOnEscape.ts diff --git a/src/hooks/useDisableModalDismissOnEscape.ts b/src/hooks/useDisableModalDismissOnEscape.ts new file mode 100644 index 000000000000..caf31bd3af6d --- /dev/null +++ b/src/hooks/useDisableModalDismissOnEscape.ts @@ -0,0 +1,9 @@ +import * as Modal from '@userActions/Modal'; +import { useEffect } from "react"; + +export default function useDisableModalDismissOnEscape() { + useEffect(() => { + Modal.setDisableDismissOnEscape(true); + return () => Modal.setDisableDismissOnEscape(false); + }, []); +} \ No newline at end of file diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index d6e3d10c6c21..b6f8258db098 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -1,4 +1,4 @@ -import React, {useCallback, useEffect} from 'react'; +import React, {useCallback} from 'react'; import {View} from 'react-native'; import FormProvider from '@components/Form/FormProvider'; import InputWrapper from '@components/Form/InputWrapper'; @@ -18,12 +18,12 @@ import useWindowDimensions from '@hooks/useWindowDimensions'; import * as ErrorUtils from '@libs/ErrorUtils'; import Navigation from '@libs/Navigation/Navigation'; import * as ValidationUtils from '@libs/ValidationUtils'; -import * as Modal from '@userActions/Modal'; import * as PersonalDetails from '@userActions/PersonalDetails'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/DisplayNameForm'; +import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; type BaseOnboardingPersonalDetailsProps = { /* Whether to use native styles tailored for native devices */ @@ -37,9 +37,7 @@ function BaseOnboardingPersonalDetails({currentUserPersonalDetails, shouldUseNat const {isSmallScreenWidth} = useWindowDimensions(); const {shouldUseNarrowLayout} = useOnboardingLayout(); - useEffect(() => { - Modal.setDisableDismissOnEscape(true); - }, []); + useDisableModalDismissOnEscape(); const saveAndNavigate = useCallback((values: FormOnyxValues<'onboardingPersonalDetailsForm'>) => { PersonalDetails.updateDisplayName(values.firstName.trim(), values.lastName.trim()); diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index b45a4518f334..24c11b938fbe 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -19,12 +19,12 @@ import useThemeStyles from '@hooks/useThemeStyles'; import useWindowDimensions from '@hooks/useWindowDimensions'; import Navigation from '@libs/Navigation/Navigation'; import variables from '@styles/variables'; -import * as Modal from '@userActions/Modal'; import * as Report from '@userActions/Report'; import * as Welcome from '@userActions/Welcome'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; +import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; import type {BaseOnboardingPurposeOnyxProps, BaseOnboardingPurposeProps} from './types'; type ValuesType = T[keyof T]; @@ -48,6 +48,8 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on const [error, setError] = useState(false); const theme = useTheme(); + useDisableModalDismissOnEscape(); + const PurposeFooterInstance = ; useEffect(() => { @@ -81,7 +83,6 @@ function BaseOnboardingPurpose({shouldUseNativeStyles, shouldEnableMaxHeight, on return; } - Modal.setDisableDismissOnEscape(false); Report.completeEngagementModal(CONST.ONBOARDING_CONCIERGE[selectedPurpose], selectedPurpose); Navigation.dismissModal(); From 5facddbf82dbebeaaee61749dc2136f42a3f4281 Mon Sep 17 00:00:00 2001 From: cdOut <88325488+cdOut@users.noreply.github.com> Date: Thu, 11 Apr 2024 14:13:39 +0200 Subject: [PATCH 4/4] fix prettier --- src/hooks/useDisableModalDismissOnEscape.ts | 4 ++-- .../BaseOnboardingPersonalDetails.tsx | 2 +- src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/hooks/useDisableModalDismissOnEscape.ts b/src/hooks/useDisableModalDismissOnEscape.ts index caf31bd3af6d..c24323265565 100644 --- a/src/hooks/useDisableModalDismissOnEscape.ts +++ b/src/hooks/useDisableModalDismissOnEscape.ts @@ -1,9 +1,9 @@ +import {useEffect} from 'react'; import * as Modal from '@userActions/Modal'; -import { useEffect } from "react"; export default function useDisableModalDismissOnEscape() { useEffect(() => { Modal.setDisableDismissOnEscape(true); return () => Modal.setDisableDismissOnEscape(false); }, []); -} \ No newline at end of file +} diff --git a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx index b6f8258db098..dd5707ef3507 100644 --- a/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx +++ b/src/pages/OnboardingPersonalDetails/BaseOnboardingPersonalDetails.tsx @@ -10,6 +10,7 @@ import Text from '@components/Text'; import TextInput from '@components/TextInput'; import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails'; import withCurrentUserPersonalDetails from '@components/withCurrentUserPersonalDetails'; +import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; @@ -23,7 +24,6 @@ import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; import INPUT_IDS from '@src/types/form/DisplayNameForm'; -import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; type BaseOnboardingPersonalDetailsProps = { /* Whether to use native styles tailored for native devices */ diff --git a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx index 24c11b938fbe..3b82a79e6c48 100644 --- a/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx +++ b/src/pages/OnboardingPurpose/BaseOnboardingPurpose.tsx @@ -12,6 +12,7 @@ import MenuItemList from '@components/MenuItemList'; import OfflineIndicator from '@components/OfflineIndicator'; import SafeAreaConsumer from '@components/SafeAreaConsumer'; import Text from '@components/Text'; +import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; import useLocalize from '@hooks/useLocalize'; import useOnboardingLayout from '@hooks/useOnboardingLayout'; import useTheme from '@hooks/useTheme'; @@ -24,7 +25,6 @@ import * as Welcome from '@userActions/Welcome'; import CONST from '@src/CONST'; import ONYXKEYS from '@src/ONYXKEYS'; import ROUTES from '@src/ROUTES'; -import useDisableModalDismissOnEscape from '@hooks/useDisableModalDismissOnEscape'; import type {BaseOnboardingPurposeOnyxProps, BaseOnboardingPurposeProps} from './types'; type ValuesType = T[keyof T];