[TS migration] Migrate 'ContextMenu' and 'ShowContextMenuContext' components to TypeScript

src/components/Modal/index.android.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import {AppState} from 'react-native';
-import withWindowDimensions from '@components/withWindowDimensions';
 import ComposerFocusManager from '@libs/ComposerFocusManager';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
@@ -28,4 +27,4 @@ function Modal({useNativeDriver = true, ...rest}: BaseModalProps) {
 }
 
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default Modal;

src/components/Modal/index.ios.tsx

@@ -1,5 +1,4 @@
 import React from 'react';
-import withWindowDimensions from '@components/withWindowDimensions';
 import BaseModal from './BaseModal';
 import type BaseModalProps from './types';
 
@@ -15,4 +14,4 @@ function Modal({children, ...rest}: BaseModalProps) {
 }
 
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default Modal;

src/components/Modal/index.tsx

@@ -1,5 +1,4 @@
 import React, {useState} from 'react';
-import withWindowDimensions from '@components/withWindowDimensions';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useTheme from '@hooks/useTheme';
 import StatusBar from '@libs/StatusBar';
@@ -55,4 +54,4 @@ function Modal({fullscreen = true, onModalHide = () => {}, type, onModalShow = (
 }
 
 Modal.displayName = 'Modal';
-export default withWindowDimensions(Modal);
+export default Modal;

src/components/Modal/types.ts

@@ -1,7 +1,6 @@
 import type {ViewStyle} from 'react-native';
 import type {ModalProps} from 'react-native-modal';
 import type {ValueOf} from 'type-fest';
-import type {WindowDimensionsProps} from '@components/withWindowDimensions/types';
 import type CONST from '@src/CONST';
 
 type PopoverAnchorPosition = {
@@ -11,57 +10,56 @@ type PopoverAnchorPosition = {
     left?: number;
 };
 
-type BaseModalProps = WindowDimensionsProps &
-    Partial<ModalProps> & {
-        /** Decides whether the modal should cover fullscreen. FullScreen modal has backdrop */
-        fullscreen?: boolean;
+type BaseModalProps = Partial<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 close modal on outside click */
+    shouldCloseOnOutsideClick?: boolean;
 
-        /** Should we announce the Modal visibility changes? */
-        shouldSetModalVisibility?: boolean;
+    /** Should we announce the Modal visibility changes? */
+    shouldSetModalVisibility?: boolean;
 
-        /** Callback method fired when the user requests to close the modal */
-        onClose: (ref?: React.RefObject<HTMLElement>) => void;
+    /** 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;
+    /** 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 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 hidden */
+    onModalHide?: () => void;
 
-        /** Callback method fired when the modal is shown */
-        onModalShow?: () => void;
+    /** Callback method fired when the modal is shown */
+    onModalShow?: () => void;
 
-        /** Style of modal to display */
-        type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
+    /** Style of modal to display */
+    type?: ValueOf<typeof CONST.MODAL.MODAL_TYPE>;
 
-        /** The anchor position of a popover modal. Has no effect on other modal types. */
-        popoverAnchorPosition?: PopoverAnchorPosition;
+    /** The anchor position of a popover modal. Has no effect on other modal types. */
+    popoverAnchorPosition?: PopoverAnchorPosition;
 
-        outerStyle?: ViewStyle;
+    outerStyle?: ViewStyle;
 
-        /** Whether the modal should go under the system statusbar */
-        statusBarTranslucent?: boolean;
+    /** Whether the modal should go under the system statusbar */
+    statusBarTranslucent?: boolean;
 
-        /** Whether the modal should avoid the keyboard */
-        avoidKeyboard?: boolean;
+    /** Whether the modal should avoid the keyboard */
+    avoidKeyboard?: boolean;
 
-        /** Modal container styles  */
-        innerContainerStyle?: ViewStyle;
+    /** 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;
-    };
+    /**
+     * 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;
 export type {PopoverAnchorPosition};

src/components/Popover/types.ts

@@ -22,7 +22,7 @@ type PopoverProps = BaseModalProps & {
     anchorPosition?: PopoverAnchorPosition;
 
     /** The anchor alignment of the popover */
-    anchorAlignment: AnchorAlignment;
+    anchorAlignment?: AnchorAlignment;
 
     /** The anchor ref of the popover */
     anchorRef: React.RefObject<HTMLElement>;

src/components/PopoverWithoutOverlay/index.tsx

@@ -52,7 +52,7 @@ function PopoverWithoutOverlay(
                 close: onClose,
                 anchorRef,
             });
-            removeOnClose = Modal.setCloseModal(() => onClose(anchorRef));
+            removeOnClose = Modal.setCloseModal(() => onClose());
         } else {
             onModalHide();
             close(anchorRef);

src/components/Reactions/MiniQuickEmojiReactions.tsx

@@ -1,6 +1,5 @@
 import React, {useRef} from 'react';
 import {View} from 'react-native';
-import type {OnyxEntry} from 'react-native-onyx';
 import {withOnyx} from 'react-native-onyx';
 import type {Emoji} from '@assets/emojis/types';
 import BaseMiniContextMenuItem from '@components/BaseMiniContextMenuItem';
@@ -16,16 +15,7 @@ import * as EmojiPickerAction from '@userActions/EmojiPickerAction';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import type {ReportActionReactions} from '@src/types/onyx';
-import type {BaseQuickEmojiReactionsProps} from './QuickEmojiReactions/types';
-
-type MiniQuickEmojiReactionsOnyxProps = {
-    /** All the emoji reactions for the report action. */
-    emojiReactions: OnyxEntry<ReportActionReactions>;
-
-    /** The user's preferred skin tone. */
-    preferredSkinTone: OnyxEntry<string | number>;
-};
+import type {BaseQuickEmojiReactionsOnyxProps, BaseQuickEmojiReactionsProps} from './QuickEmojiReactions/types';
 
 type MiniQuickEmojiReactionsProps = BaseQuickEmojiReactionsProps & {
     /**
@@ -112,11 +102,14 @@ function MiniQuickEmojiReactions({
 
 MiniQuickEmojiReactions.displayName = 'MiniQuickEmojiReactions';
 
-export default withOnyx<MiniQuickEmojiReactionsProps, MiniQuickEmojiReactionsOnyxProps>({
+export default withOnyx<MiniQuickEmojiReactionsProps, BaseQuickEmojiReactionsOnyxProps>({
     preferredSkinTone: {
         key: ONYXKEYS.PREFERRED_EMOJI_SKIN_TONE,
     },
     emojiReactions: {
         key: ({reportActionID}) => `${ONYXKEYS.COLLECTION.REPORT_ACTIONS_REACTIONS}${reportActionID}`,
     },
+    preferredLocale: {
+        key: ONYXKEYS.NVP_PREFERRED_LOCALE,
+    },
 })(MiniQuickEmojiReactions);

src/components/Reactions/QuickEmojiReactions/types.ts

@@ -11,18 +11,7 @@ type OpenPickerCallback = (element?: PickerRefElement, anchorOrigin?: AnchorOrig
 
 type CloseContextMenuCallback = () => void;
 
-type BaseQuickEmojiReactionsOnyxProps = {
-    /** All the emoji reactions for the report action. */
-    emojiReactions: OnyxEntry<ReportActionReactions>;
-
-    /** The user's preferred locale. */
-    preferredLocale: OnyxEntry<Locale>;
-
-    /** The user's preferred skin tone. */
-    preferredSkinTone: OnyxEntry<string | number>;
-};
-
-type BaseQuickEmojiReactionsProps = BaseQuickEmojiReactionsOnyxProps & {
+type BaseReactionsProps = {
     /** Callback to fire when an emoji is selected. */
     onEmojiSelected: (emoji: Emoji, emojiReactions: OnyxEntry<ReportActionReactions>) => void;
 
@@ -45,7 +34,20 @@ type BaseQuickEmojiReactionsProps = BaseQuickEmojiReactionsOnyxProps & {
     reportActionID: string;
 };
 
-type QuickEmojiReactionsProps = BaseQuickEmojiReactionsProps & {
+type BaseQuickEmojiReactionsOnyxProps = {
+    /** All the emoji reactions for the report action. */
+    emojiReactions: OnyxEntry<ReportActionReactions>;
+
+    /** The user's preferred locale. */
+    preferredLocale: OnyxEntry<Locale>;
+
+    /** The user's preferred skin tone. */
+    preferredSkinTone: OnyxEntry<string | number>;
+};
+
+type BaseQuickEmojiReactionsProps = BaseReactionsProps & BaseQuickEmojiReactionsOnyxProps;
+
+type QuickEmojiReactionsProps = BaseReactionsProps & {
     /**
      * Function that can be called to close the context menu
      * in which this component is rendered.

src/components/ShowContextMenuContext.js → src/components/ShowContextMenuContext.ts

@@ -1,8 +1,10 @@
 import React from 'react';
+import type {GestureResponderEvent, Text as RNText} from 'react-native';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ReportUtils from '@libs/ReportUtils';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import CONST from '@src/CONST';
+import type ReportAction from '@src/types/onyx/ReportAction';
 
 const ShowContextMenuContext = React.createContext({
     anchor: null,
@@ -16,17 +18,25 @@ ShowContextMenuContext.displayName = 'ShowContextMenuContext';
 /**
  * Show the report action context menu.
  *
- * @param {Object} event - Press event object
- * @param {Element} anchor - Context menu anchor
- * @param {String} reportID - Active Report ID
- * @param {Object} action - ReportAction for ContextMenu
- * @param {Function} checkIfContextMenuActive Callback to update context menu active state
- * @param {Boolean} [isArchivedRoom=false] - Is the report an archived room
+ * @param event - Press event object
+ * @param anchor - Context menu anchor
+ * @param reportID - Active Report ID
+ * @param action - ReportAction for ContextMenu
+ * @param checkIfContextMenuActive Callback to update context menu active state
+ * @param isArchivedRoom - Is the report an archived room
  */
-function showContextMenuForReport(event, anchor, reportID, action, checkIfContextMenuActive, isArchivedRoom = false) {
+function showContextMenuForReport(
+    event: GestureResponderEvent | MouseEvent,
+    anchor: RNText | null,
+    reportID: string,
+    action: ReportAction,
+    checkIfContextMenuActive: () => void,
+    isArchivedRoom = false,
+) {
     if (!DeviceCapabilities.canUseTouchScreen()) {
         return;
     }
+
     ReportActionContextMenu.showContextMenu(
         CONST.CONTEXT_MENU_TYPES.REPORT_ACTION,
         event,

src/libs/ReportUtils.ts

@@ -4325,9 +4325,9 @@ function navigateToPrivateNotes(report: Report, session: Session) {
 /**
  * Checks if thread replies should be displayed
  */
-function shouldDisplayThreadReplies(reportAction: ReportAction, reportID: string): boolean {
-    const hasReplies = (reportAction.childVisibleActionCount ?? 0) > 0;
-    return hasReplies && !!reportAction.childCommenterCount && !isThreadFirstChat(reportAction, reportID);
+function shouldDisplayThreadReplies(reportAction: OnyxEntry<ReportAction>, reportID: string): boolean {
+    const hasReplies = (reportAction?.childVisibleActionCount ?? 0) > 0;
+    return hasReplies && !!reportAction?.childCommenterCount && !isThreadFirstChat(reportAction, reportID);
 }
 
 /**
@@ -4339,17 +4339,17 @@ function shouldDisplayThreadReplies(reportAction: ReportAction, reportID: string
  * - The action is a whisper action and it's neither a report preview nor IOU action
  * - The action is the thread's first chat
  */
-function shouldDisableThread(reportAction: ReportAction, reportID: string) {
+function shouldDisableThread(reportAction: OnyxEntry<ReportAction>, reportID: string) {
     const isSplitBillAction = ReportActionsUtils.isSplitBillAction(reportAction);
     const isDeletedAction = ReportActionsUtils.isDeletedAction(reportAction);
     const isReportPreviewAction = ReportActionsUtils.isReportPreviewAction(reportAction);
     const isIOUAction = ReportActionsUtils.isMoneyRequestAction(reportAction);
     const isWhisperAction = ReportActionsUtils.isWhisperAction(reportAction);
 
     return (
-        CONST.REPORT.ACTIONS.THREAD_DISABLED.some((action: string) => action === reportAction.actionName) ||
+        CONST.REPORT.ACTIONS.THREAD_DISABLED.some((action: string) => action === reportAction?.actionName) ||
         isSplitBillAction ||
-        (isDeletedAction && !reportAction.childVisibleActionCount) ||
+        (isDeletedAction && !reportAction?.childVisibleActionCount) ||
         (isWhisperAction && !isReportPreviewAction && !isIOUAction) ||
         isThreadFirstChat(reportAction, reportID)
     );

src/libs/actions/IOU.js

@@ -2447,7 +2447,7 @@ function updateMoneyRequestAmountAndCurrency(transactionID, transactionThreadRep
 }
 
 /**
- * @param {String} transactionID
+ * @param {String | undefined} transactionID
  * @param {Object} reportAction - the money request reportAction we are deleting
  * @param {Boolean} isSingleTransactionView
  */

src/libs/actions/Report.ts

@@ -1986,7 +1986,7 @@ function toggleEmojiReaction(
     reportID: string,
     reportAction: ReportAction,
     reactionObject: Emoji,
-    existingReactions: ReportActionReactions | undefined,
+    existingReactions: ReportActionReactions | null,
     paramSkinTone: number = preferredSkinTone,
 ) {
     const originalReportID = ReportUtils.getOriginalReportID(reportID, reportAction);