From 2947c3f227878bc31c1eeaf136ed9ca1b2e053ef Mon Sep 17 00:00:00 2001 From: Mateusz Rajski Date: Thu, 15 Feb 2024 17:23:35 +0100 Subject: [PATCH] Revert changes in modal related code --- src/components/Modal/BaseModal.tsx | 8 ++--- src/components/Modal/types.ts | 3 -- .../utils/generators/ModalStyleUtils.ts | 35 ++----------------- 3 files changed, 4 insertions(+), 42 deletions(-) diff --git a/src/components/Modal/BaseModal.tsx b/src/components/Modal/BaseModal.tsx index 5f5058dd5498..7fc5013f58a0 100644 --- a/src/components/Modal/BaseModal.tsx +++ b/src/components/Modal/BaseModal.tsx @@ -3,7 +3,6 @@ import {View} from 'react-native'; import ReactNativeModal from 'react-native-modal'; import ColorSchemeWrapper from '@components/ColorSchemeWrapper'; import useKeyboardState from '@hooks/useKeyboardState'; -import useOnboardingLayout from '@hooks/useOnboardingLayout'; import usePrevious from '@hooks/usePrevious'; import useSafeAreaInsets from '@hooks/useSafeAreaInsets'; import useStyleUtils from '@hooks/useStyleUtils'; @@ -23,7 +22,6 @@ function BaseModal( isVisible, onClose, shouldSetModalVisibility = true, - shouldForceHideBackdrop = false, onModalHide = () => {}, type, popoverAnchorPosition = {}, @@ -50,7 +48,6 @@ function BaseModal( const styles = useThemeStyles(); const StyleUtils = useStyleUtils(); const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions(); - const {shouldUseNarrowLayout} = useOnboardingLayout(); const keyboardStateContextValue = useKeyboardState(); const safeAreaInsets = useSafeAreaInsets(); @@ -150,9 +147,8 @@ function BaseModal( popoverAnchorPosition, innerContainerStyle, outerStyle, - shouldUseNarrowLayout, ), - [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle, shouldUseNarrowLayout], + [StyleUtils, type, windowWidth, windowHeight, isSmallScreenWidth, popoverAnchorPosition, innerContainerStyle, outerStyle], ); const { @@ -195,7 +191,7 @@ function BaseModal( swipeDirection={swipeDirection} isVisible={isVisible} backdropColor={theme.overlay} - backdropOpacity={(!shouldUseCustomBackdrop && hideBackdrop) || shouldForceHideBackdrop ? 0 : variables.overlayOpacity} + backdropOpacity={!shouldUseCustomBackdrop && hideBackdrop ? 0 : variables.overlayOpacity} backdropTransitionOutTiming={0} hasBackdrop={fullscreen} coverScreen={fullscreen} diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts index f92532f6e27f..a0cdb737d448 100644 --- a/src/components/Modal/types.ts +++ b/src/components/Modal/types.ts @@ -20,9 +20,6 @@ type BaseModalProps = Partial & { /** Should we announce the Modal visibility changes? */ shouldSetModalVisibility?: boolean; - /** Should we hide backdrop no matter what value is set in modal styles */ - shouldForceHideBackdrop?: boolean; - /** Callback method fired when the user requests to close the modal */ onClose: () => void; diff --git a/src/styles/utils/generators/ModalStyleUtils.ts b/src/styles/utils/generators/ModalStyleUtils.ts index 33dbbe6a4b6b..335ef8382941 100644 --- a/src/styles/utils/generators/ModalStyleUtils.ts +++ b/src/styles/utils/generators/ModalStyleUtils.ts @@ -15,10 +15,6 @@ function getCenteredModalStyles(styles: ThemeStyles, windowWidth: number, isSmal }; } -function getOnboardingModalStyles(styles: ThemeStyles, windowWidth: number, shouldUseNarrowLayout: boolean, isFullScreenWhenSmall = false): ViewStyle { - return shouldUseNarrowLayout ? {width: 500, height: 712} : getCenteredModalStyles(styles, windowWidth, !shouldUseNarrowLayout, isFullScreenWhenSmall); -} - type WindowDimensions = { windowWidth: number; windowHeight: number; @@ -45,12 +41,11 @@ type GetModalStylesStyleUtil = { popoverAnchorPosition?: ViewStyle, innerContainerStyle?: ViewStyle, outerStyle?: ViewStyle, - shouldUseNarrowLayout?: boolean, ) => GetModalStyles; }; const createModalStyleUtils: StyleUtilGenerator = ({theme, styles}) => ({ - getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}, shouldUseNarrowLayout = false): GetModalStyles => { + getModalStyles: (type, windowDimensions, popoverAnchorPosition = {}, innerContainerStyle = {}, outerStyle = {}): GetModalStyles => { const {isSmallScreenWidth, windowWidth} = windowDimensions; let modalStyle: GetModalStyles['modalStyle'] = { @@ -167,33 +162,7 @@ const createModalStyleUtils: StyleUtilGenerator = ({the shouldAddTopSafeAreaMargin = false; shouldAddBottomSafeAreaMargin = false; shouldAddTopSafeAreaPadding = false; - break; - case CONST.MODAL.MODAL_TYPE.ONBOARDING: - // Handles how onboarding modals should be rendered on different screens - modalStyle = { - ...modalStyle, - ...{ - alignItems: 'center', - }, - }; - modalContainerStyle = { - boxShadow: '0px 0px 5px 5px rgba(0, 0, 0, 0.1)', - borderWidth: 0, - flex: !shouldUseNarrowLayout ? 1 : undefined, - marginTop: 0, - marginBottom: 0, - borderRadius: !shouldUseNarrowLayout ? 0 : 16, - overflow: 'hidden', - ...getOnboardingModalStyles(styles, windowWidth, shouldUseNarrowLayout, true), - }; - - // Allow this modal to be dismissed with a swipe down or swipe right - // swipeDirection = ['down', 'right']; - animationIn = 'fadeIn'; - animationOut = 'fadeOut'; - shouldAddTopSafeAreaMargin = !shouldUseNarrowLayout; - shouldAddBottomSafeAreaMargin = false; - shouldAddTopSafeAreaPadding = false; + shouldAddBottomSafeAreaPadding = false; break; case CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED: modalStyle = {