Skip to content

Commit 2fe0da7

Browse files
jmusialjmusial
committed
rename BottomDockedModal to ReanimatedModal, use ReanimatedModal for fullscreen modals
1 parent bc12ce0 commit 2fe0da7

11 files changed

Lines changed: 23 additions & 20 deletions

File tree

‎src/components/Modal/BaseModal.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,20 +23,22 @@ import Navigation from '@libs/Navigation/Navigation';
2323
import variables from '@styles/variables';
2424
import {areAllModalsHidden, closeTop, onModalDidClose, setCloseModal, setModalVisibility, willAlertModalBecomeVisible} from '@userActions/Modal';
2525
import CONST from '@src/CONST';
26-
import BottomDockedModal from './BottomDockedModal';
27-
import type ModalProps from './BottomDockedModal/types';
2826
import ModalContent from './ModalContent';
2927
import ModalContext from './ModalContext';
28+
import ReanimatedModal from './ReanimatedModal';
29+
import type ModalProps from './ReanimatedModal/types';
3030
import type BaseModalProps from './types';
3131

32+
const ReanimatedModalTypes: Array<ValueOf<typeof CONST.MODAL.MODAL_TYPE>> = [CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.FULLSCREEN];
33+
3234
type ModalComponentProps = (ReactNativeModalProps | ModalProps) & {
3335
type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
3436
};
3537

3638
function ModalComponent({type, ...props}: ModalComponentProps) {
37-
if (type === CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED) {
39+
if (type && ReanimatedModalTypes.includes(type)) {
3840
// eslint-disable-next-line react/jsx-props-no-spreading
39-
return <BottomDockedModal {...(props as ModalProps)} />;
41+
return <ReanimatedModal {...(props as ModalProps)} />;
4042
}
4143
// eslint-disable-next-line react/jsx-props-no-spreading
4244
return <ReactNativeModal {...(props as ReactNativeModalProps)} />;

src/components/Modal/BottomDockedModal/Backdrop/index.tsx renamed to src/components/Modal/ReanimatedModal/Backdrop/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import React, {useMemo} from 'react';
22
import Animated, {Easing, Keyframe} from 'react-native-reanimated';
3-
import type {BackdropProps} from '@components/Modal/BottomDockedModal/types';
3+
import type {BackdropProps} from '@components/Modal/ReanimatedModal/types';
44
import {PressableWithoutFeedback} from '@components/Pressable';
55
import useLocalize from '@hooks/useLocalize';
66
import useThemeStyles from '@hooks/useThemeStyles';

src/components/Modal/BottomDockedModal/Backdrop/index.web.tsx renamed to src/components/Modal/ReanimatedModal/Backdrop/index.web.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useMemo} from 'react';
22
import {View} from 'react-native';
33
import Animated, {Easing, Keyframe} from 'react-native-reanimated';
4-
import type {BackdropProps} from '@components/Modal/BottomDockedModal/types';
4+
import type {BackdropProps} from '@components/Modal/ReanimatedModal/types';
55
import {PressableWithoutFeedback} from '@components/Pressable';
66
import useLocalize from '@hooks/useLocalize';
77
import useThemeStyles from '@hooks/useThemeStyles';

src/components/Modal/BottomDockedModal/Container/index.tsx renamed to src/components/Modal/ReanimatedModal/Container/index.tsx

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import React, {useMemo} from 'react';
22
import {View} from 'react-native';
33
import Animated, {Easing, Keyframe, runOnJS} from 'react-native-reanimated';
4-
import type ModalProps from '@components/Modal/BottomDockedModal/types';
5-
import type {ContainerProps} from '@components/Modal/BottomDockedModal/types';
4+
import type ModalProps from '@components/Modal/ReanimatedModal/types';
5+
import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
66
import useThemeStyles from '@hooks/useThemeStyles';
77

88
const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();
@@ -49,7 +49,7 @@ function Container({style, animationInTiming = 300, animationOutTiming = 300, on
4949
{...props}
5050
>
5151
<Animated.View
52-
style={styles.modalAnimatedContainer}
52+
style={[style, styles.modalAnimatedContainer]}
5353
entering={Entering}
5454
exiting={Exiting}
5555
>

src/components/Modal/BottomDockedModal/Container/index.web.tsx renamed to src/components/Modal/ReanimatedModal/Container/index.web.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, {useEffect, useMemo, useRef} from 'react';
22
import Animated, {Easing, Keyframe, useAnimatedStyle, useSharedValue, withTiming} from 'react-native-reanimated';
3-
import type ModalProps from '@components/Modal/BottomDockedModal/types';
4-
import type {ContainerProps} from '@components/Modal/BottomDockedModal/types';
3+
import type ModalProps from '@components/Modal/ReanimatedModal/types';
4+
import type {ContainerProps} from '@components/Modal/ReanimatedModal/types';
55
import useThemeStyles from '@hooks/useThemeStyles';
66

77
const easing = Easing.bezier(0.76, 0.0, 0.24, 1.0).factory();

src/components/Modal/BottomDockedModal/index.tsx renamed to src/components/Modal/ReanimatedModal/index.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,14 +4,14 @@ import type {NativeEventSubscription, ViewStyle} from 'react-native';
44
import {BackHandler, Dimensions, InteractionManager, Modal, View} from 'react-native';
55
import {LayoutAnimationConfig} from 'react-native-reanimated';
66
import KeyboardAvoidingView from '@components/KeyboardAvoidingView';
7+
import Backdrop from '@components/Modal/ReanimatedModal/Backdrop';
78
import useThemeStyles from '@hooks/useThemeStyles';
89
import getPlatform from '@libs/getPlatform';
910
import CONST from '@src/CONST';
10-
import Backdrop from './Backdrop';
1111
import Container from './Container';
1212
import type ModalProps from './types';
1313

14-
function BottomDockedModal({
14+
function ReanimatedModal({
1515
testID,
1616
animationInDelay,
1717
animationInTiming = 300,
@@ -207,6 +207,6 @@ function BottomDockedModal({
207207
);
208208
}
209209

210-
BottomDockedModal.displayName = 'BottomDockedModal';
210+
ReanimatedModal.displayName = 'ReanimatedModal';
211211

212-
export default BottomDockedModal;
212+
export default ReanimatedModal;

src/components/Modal/BottomDockedModal/types.ts renamed to src/components/Modal/ReanimatedModal/types.ts

File renamed without changes.

‎src/components/Modal/types.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import type {GestureResponderEvent, PanResponderGestureState, ViewStyle} from 'r
33
import type {Direction, ModalProps as ReactNativeModalProps} from 'react-native-modal';
44
import type {ValueOf} from 'type-fest';
55
import type CONST from '@src/CONST';
6-
import type BottomDockedModalProps from './BottomDockedModal/types';
6+
import type ReanimatedModalProps from './ReanimatedModal/types';
77

88
type FocusTrapOptions = Exclude<FocusTrapProps['focusTrapOptions'], undefined>;
99

@@ -19,7 +19,7 @@ type WindowState = {
1919
};
2020

2121
type BaseModalProps = Partial<ReactNativeModalProps> &
22-
Partial<BottomDockedModalProps> & {
22+
Partial<ReanimatedModalProps> & {
2323
/** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
2424
fullscreen?: boolean;
2525

‎src/components/PopoverMenu.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,7 @@ import FocusTrapForModal from './FocusTrap/FocusTrapForModal';
2525
import * as Expensicons from './Icon/Expensicons';
2626
import type {MenuItemProps} from './MenuItem';
2727
import MenuItem from './MenuItem';
28-
import type BottomDockedModalProps from './Modal/BottomDockedModal/types';
28+
import type ReanimatedModalProps from './Modal/ReanimatedModal/types';
2929
import type BaseModalProps from './Modal/types';
3030
import OfflineWithFeedback from './OfflineWithFeedback';
3131
import PopoverWithMeasuredContent from './PopoverWithMeasuredContent';
@@ -69,7 +69,7 @@ type PopoverMenuItem = MenuItemProps & {
6969
testID?: string;
7070
};
7171

72-
type PopoverModalProps = Pick<ModalProps, 'animationIn' | 'animationOut' | 'animationInTiming' | 'animationOutTiming'> & Pick<BottomDockedModalProps, 'animationInDelay'>;
72+
type PopoverModalProps = Pick<ModalProps, 'animationIn' | 'animationOut' | 'animationInTiming' | 'animationOutTiming'> & Pick<ReanimatedModalProps, 'animationInDelay'>;
7373

7474
type PopoverMenuProps = Partial<PopoverModalProps> & {
7575
/** Callback method fired when the user requests to close the modal */

‎src/pages/settings/Subscription/SubscriptionPlan/ComparePlansModal.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react';
22
import {View} from 'react-native';
33
import HeaderWithBackButton from '@components/HeaderWithBackButton';
44
import Modal from '@components/Modal';
5-
import type {AnimationOut} from '@components/Modal/BottomDockedModal/types';
5+
import type {AnimationOut} from '@components/Modal/ReanimatedModal/types';
66
import ScrollView from '@components/ScrollView';
77
import Text from '@components/Text';
88
import TextLink from '@components/TextLink';

0 commit comments

Comments
 (0)