[TS Migration] Migrate withWindowDimensions and Modal directories to TypeScript

src/components/Modal/BaseModal.js → src/components/Modal/BaseModal.tsx

@@ -1,57 +1,45 @@
 import React, {forwardRef, useCallback, useEffect, useMemo, useRef} from 'react';
 import {View} from 'react-native';
-import PropTypes from 'prop-types';
 import ReactNativeModal from 'react-native-modal';
 import {useSafeAreaInsets} from 'react-native-safe-area-context';
 import styles from '../../styles/styles';
 import * as Modal from '../../libs/actions/Modal';
 import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
-import {propTypes as modalPropTypes, defaultProps as modalDefaultProps} from './modalPropTypes';
 import getModalStyles from '../../styles/getModalStyles';
 import useWindowDimensions from '../../hooks/useWindowDimensions';
 import variables from '../../styles/variables';
-import CONST from '../../CONST';
 import ComposerFocusManager from '../../libs/ComposerFocusManager';
 import useNativeDriver from '../../libs/useNativeDriver';
 import usePrevious from '../../hooks/usePrevious';
-
-const propTypes = {
-    ...modalPropTypes,
-
-    /** The ref to the modal container */
-    forwardedRef: PropTypes.func,
-};
-
-const defaultProps = {
-    ...modalDefaultProps,
-    forwardedRef: () => {},
-};
-
-function BaseModal({
-    isVisible,
-    onClose,
-    shouldSetModalVisibility,
-    onModalHide,
-    type,
-    popoverAnchorPosition,
-    innerContainerStyle,
-    outerStyle,
-    onModalShow,
-    propagateSwipe,
-    fullscreen,
-    animationIn,
-    animationOut,
-    useNativeDriver: useNativeDriverProp,
-    hideModalContentWhileAnimating,
-    animationInTiming,
-    animationOutTiming,
-    statusBarTranslucent,
-    onLayout,
-    avoidKeyboard,
-    forwardedRef,
-    children,
-}) {
+import BaseModalProps from './types';
+
+function BaseModal(
+    {
+        isVisible,
+        onClose,
+        shouldSetModalVisibility = true,
+        onModalHide = () => {},
+        type,
+        popoverAnchorPosition = {},
+        innerContainerStyle = {},
+        outerStyle,
+        onModalShow = () => {},
+        propagateSwipe,
+        fullscreen = true,
+        animationIn,
+        animationOut,
+        useNativeDriver: useNativeDriverProp,
+        hideModalContentWhileAnimating = false,
+        animationInTiming,
+        animationOutTiming,
+        statusBarTranslucent = true,
+        onLayout,
+        avoidKeyboard = false,
+        children,
+    }: BaseModalProps,
+    ref: React.ForwardedRef<View>,
+) {
     const {windowWidth, windowHeight, isSmallScreenWidth} = useWindowDimensions();
 
     const safeAreaInsets = useSafeAreaInsets();
@@ -61,7 +49,7 @@ function BaseModal({
 
     /**
      * Hides modal
-     * @param {Boolean} [callHideCallback=true] Should we call the onModalHide callback
+     * @param callHideCallback - Should we call the onModalHide callback
      */
     const hideModal = useCallback(
         (callHideCallback = true) => {
@@ -113,10 +101,7 @@ function BaseModal({
         onModalShow();
     };
 
-    const handleBackdropPress = (e) => {
-        if (e && e.key === CONST.KEYBOARD_SHORTCUTS.ENTER.shortcutKey) {
-            return;
-        }
+    const handleBackdropPress = () => {
         onClose();
     };
 
@@ -195,8 +180,8 @@ function BaseModal({
             style={modalStyle}
             deviceHeight={windowHeight}
             deviceWidth={windowWidth}
-            animationIn={animationIn || modalStyleAnimationIn}
-            animationOut={animationOut || modalStyleAnimationOut}
+            animationIn={animationIn ?? modalStyleAnimationIn}
+            animationOut={animationOut ?? modalStyleAnimationOut}
             useNativeDriver={useNativeDriverProp && useNativeDriver}
             hideModalContentWhileAnimating={hideModalContentWhileAnimating}
             animationInTiming={animationInTiming}
@@ -207,26 +192,14 @@ function BaseModal({
         >
             <View
                 style={[styles.defaultModalContainer, modalContainerStyle, modalPaddingStyles, !isVisible && styles.pointerEventsNone]}
-                ref={forwardedRef}
+                ref={ref}
             >
                 {children}
             </View>
         </ReactNativeModal>
     );
 }
 
-BaseModal.propTypes = propTypes;
-BaseModal.defaultProps = defaultProps;
-BaseModal.displayName = 'BaseModal';
-
-const BaseModalWithRef = forwardRef((props, ref) => (
-    <BaseModal
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        forwardedRef={ref}
-    />
-));
-
-BaseModalWithRef.displayName = 'BaseModalWithRef';
+BaseModal.displayName = 'BaseModalWithRef';
 
-export default BaseModalWithRef;
+export default forwardRef(BaseModal);

src/components/Modal/index.android.js → src/components/Modal/index.android.tsx

@@ -2,8 +2,8 @@ import React from 'react';
 import {AppState} from 'react-native';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
-import {propTypes, defaultProps} from './modalPropTypes';
 import ComposerFocusManager from '../../libs/ComposerFocusManager';
+import BaseModalProps from './types';
 
 AppState.addEventListener('focus', () => {
     ComposerFocusManager.setReadyToFocus();
@@ -15,19 +15,17 @@ AppState.addEventListener('blur', () => {
 
 // Only want to use useNativeDriver on Android. It has strange flashes issue on IOS
 // https://github.com/react-native-modal/react-native-modal#the-modal-flashes-in-a-weird-way-when-animating
-function Modal(props) {
+function Modal(props: BaseModalProps) {
     return (
         <BaseModal
-            useNativeDriver
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...props}
+            useNativeDriver
         >
             {props.children}
         </BaseModal>
     );
 }
 
-Modal.propTypes = propTypes;
-Modal.defaultProps = defaultProps;
 Modal.displayName = 'Modal';
 export default withWindowDimensions(Modal);

src/components/Modal/index.ios.js → src/components/Modal/index.ios.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
-import {propTypes, defaultProps} from './modalPropTypes';
+import BaseModalProps from './types';
 
-function Modal(props) {
+function Modal(props: BaseModalProps) {
     return (
         <BaseModal
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -14,7 +14,5 @@ function Modal(props) {
     );
 }
 
-Modal.propTypes = propTypes;
-Modal.defaultProps = defaultProps;
 Modal.displayName = 'Modal';
 export default withWindowDimensions(Modal);

src/components/Modal/index.web.js → src/components/Modal/index.tsx

@@ -1,14 +1,14 @@
 import React, {useState} from 'react';
 import withWindowDimensions from '../withWindowDimensions';
 import BaseModal from './BaseModal';
-import {propTypes, defaultProps} from './modalPropTypes';
 import * as StyleUtils from '../../styles/StyleUtils';
 import themeColors from '../../styles/themes/default';
 import StatusBar from '../../libs/StatusBar';
 import CONST from '../../CONST';
+import BaseModalProps from './types';
 
-function Modal(props) {
-    const [previousStatusBarColor, setPreviousStatusBarColor] = useState();
+function Modal(props: BaseModalProps) {
+    const [previousStatusBarColor, setPreviousStatusBarColor] = useState<string>();
 
     const setStatusBarColor = (color = themeColors.appBG) => {
         if (!props.fullscreen) {
@@ -25,12 +25,15 @@ function Modal(props) {
 
     const showModal = () => {
         const statusBarColor = StatusBar.getBackgroundColor();
-        const isFullScreenModal =
-            props.type === CONST.MODAL.MODAL_TYPE.CENTERED || props.type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || props.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
-        setPreviousStatusBarColor(statusBarColor);
-        // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
-        setStatusBarColor(isFullScreenModal ? themeColors.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
-        props.onModalShow();
+
+        if (statusBarColor) {
+            const isFullScreenModal =
+                props.type === CONST.MODAL.MODAL_TYPE.CENTERED || props.type === CONST.MODAL.MODAL_TYPE.CENTERED_UNSWIPEABLE || props.type === CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED;
+            setPreviousStatusBarColor(statusBarColor);
+            // If it is a full screen modal then match it with appBG, otherwise we use the backdrop color
+            setStatusBarColor(isFullScreenModal ? themeColors.appBG : StyleUtils.getThemeBackgroundColor(statusBarColor));
+            props.onModalShow();
+        }
     };
 
     return (
@@ -46,7 +49,5 @@ function Modal(props) {
     );
 }
 
-Modal.propTypes = propTypes;
-Modal.defaultProps = defaultProps;
 Modal.displayName = 'Modal';
 export default withWindowDimensions(Modal);

src/components/Modal/types.ts

@@ -0,0 +1,65 @@
+import {ValueOf} from 'type-fest';
+import {ViewStyle} from 'react-native';
+import {ModalProps} from 'react-native-modal';
+import {WindowDimensionsProps} from '../withWindowDimensions/types';
+import CONST from '../../CONST';
+
+type BaseModalProps = WindowDimensionsProps &
+    ModalProps & {
+        /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
+        fullscreen?: boolean;
+
+        /** Should we close modal on outside click */
+        shouldCloseOnOutsideClick?: boolean;
+
+        /** Should we announce the Modal visibility changes? */
+        shouldSetModalVisibility?: boolean;
+
+        /** Callback method fired when the user requests to close the modal */
+        onClose: () => void;
+
+        /** State that determines whether to display the modal or not */
+        isVisible: boolean;
+
+        /** Callback method fired when the user requests to submit the modal content. */
+        onSubmit?: () => void;
+
+        /** Callback method fired when the modal is hidden */
+        onModalHide?: () => void;
+
+        /** Callback method fired when the modal is shown */
+        onModalShow?: () => void;
+
+        /** Style of modal to display */
+        // type: PropTypes.oneOf(_.values(CONST.MODAL.MODAL_TYPE)),
+        type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
+
+        /** The anchor position of a popover modal. Has no effect on other modal types. */
+        popoverAnchorPosition?: {
+            top?: number;
+            right?: number;
+            bottom?: number;
+            left?: number;
+        };
+
+        outerStyle?: ViewStyle;
+
+        /** Whether the modal should go under the system statusbar */
+        statusBarTranslucent?: boolean;
+
+        /** Whether the modal should avoid the keyboard */
+        avoidKeyboard?: boolean;
+
+        /** Modal container styles  */
+        innerContainerStyle?: ViewStyle;
+
+        /**
+         * Whether the modal should hide its content while animating. On iOS, set to true
+         * if `useNativeDriver` is also true, to avoid flashes in the UI.
+         *
+         * See: https://github.com/react-native-modal/react-native-modal/pull/116
+         * */
+        hideModalContentWhileAnimating?: boolean;
+    };
+
+export default BaseModalProps;