[TS migration] Migrate 'ThreeDotsMenu' component to TypeScript

src/components/HeaderWithBackButton/types.ts

@@ -9,7 +9,7 @@ import type IconAsset from '@src/types/utils/IconAsset';
 
 type ThreeDotsMenuItem = {
     /** An icon element displayed on the left side */
-    icon?: IconAsset;
+    icon: IconAsset;
 
     /** Text label */
     text: string;

src/components/PopoverMenu.tsx

@@ -177,3 +177,4 @@ function PopoverMenu({
 PopoverMenu.displayName = 'PopoverMenu';
 
 export default React.memo(PopoverMenu);
+export type {PopoverMenuItem};

src/components/ThreeDotsMenu/index.js → src/components/ThreeDotsMenu/index.tsx

@@ -1,10 +1,10 @@
-import PropTypes from 'prop-types';
 import React, {useRef, useState} from 'react';
+import type {StyleProp, ViewStyle} from 'react-native';
 import {View} from 'react-native';
-import _ from 'underscore';
 import Icon from '@components/Icon';
 import * as Expensicons from '@components/Icon/Expensicons';
-import sourcePropTypes from '@components/Image/sourcePropTypes';
+import type {AnchorAlignment} from '@components/Popover/types';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import PopoverMenu from '@components/PopoverMenu';
 import PressableWithoutFeedback from '@components/Pressable/PressableWithoutFeedback';
 import Tooltip from '@components/Tooltip/PopoverAnchorTooltip';
@@ -13,68 +13,61 @@ import useTheme from '@hooks/useTheme';
 import useThemeStyles from '@hooks/useThemeStyles';
 import * as Browser from '@libs/Browser';
 import CONST from '@src/CONST';
-import ThreeDotsMenuItemPropTypes from './ThreeDotsMenuItemPropTypes';
+import type {TranslationPaths} from '@src/languages/types';
+import type {AnchorPosition} from '@src/styles';
+import type IconAsset from '@src/types/utils/IconAsset';
 
-const propTypes = {
+type ThreeDotsMenuProps = {
     /** Tooltip for the popup icon */
-    iconTooltip: PropTypes.string,
+    iconTooltip?: TranslationPaths;
 
     /** icon for the popup trigger */
-    icon: PropTypes.oneOfType([PropTypes.string, sourcePropTypes]),
+    icon?: IconAsset;
 
     /** Any additional styles to pass to the icon container. */
-    // eslint-disable-next-line react/forbid-prop-types
-    iconStyles: PropTypes.arrayOf(PropTypes.object),
+    iconStyles?: StyleProp<ViewStyle>;
 
     /** The fill color to pass into the icon. */
-    iconFill: PropTypes.string,
+    iconFill?: string;
 
     /** Function to call on icon press */
-    onIconPress: PropTypes.func,
+    onIconPress?: () => void;
 
     /** menuItems that'll show up on toggle of the popup menu */
-    menuItems: ThreeDotsMenuItemPropTypes.isRequired,
+    menuItems: PopoverMenuItem[];
 
     /** The anchor position of the menu */
-    anchorPosition: PropTypes.shape({
-        top: PropTypes.number,
-        right: PropTypes.number,
-        bottom: PropTypes.number,
-        left: PropTypes.number,
-    }).isRequired,
+    anchorPosition: AnchorPosition;
 
     /** The anchor alignment of the menu */
-    anchorAlignment: PropTypes.shape({
-        horizontal: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL)),
-        vertical: PropTypes.oneOf(_.values(CONST.MODAL.ANCHOR_ORIGIN_VERTICAL)),
-    }),
+    anchorAlignment?: AnchorAlignment;
 
     /** Whether the popover menu should overlay the current view */
-    shouldOverlay: PropTypes.bool,
+    shouldOverlay?: boolean;
 
     /** Whether the menu is disabled */
-    disabled: PropTypes.bool,
+    disabled?: boolean;
 
     /** Should we announce the Modal visibility changes? */
-    shouldSetModalVisibility: PropTypes.bool,
+    shouldSetModalVisibility?: boolean;
 };
 
-const defaultProps = {
-    iconTooltip: 'common.more',
-    disabled: false,
-    iconFill: undefined,
-    iconStyles: [],
-    icon: Expensicons.ThreeDots,
-    onIconPress: () => {},
-    anchorAlignment: {
+function ThreeDotsMenu({
+    iconTooltip = 'common.more',
+    icon = Expensicons.ThreeDots,
+    iconFill,
+    iconStyles,
+    onIconPress = () => {},
+    menuItems,
+    anchorPosition,
+    anchorAlignment = {
         horizontal: CONST.MODAL.ANCHOR_ORIGIN_HORIZONTAL.LEFT,
         vertical: CONST.MODAL.ANCHOR_ORIGIN_VERTICAL.TOP, // we assume that popover menu opens below the button, anchor is at TOP
     },
-    shouldOverlay: false,
-    shouldSetModalVisibility: true,
-};
-
-function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, menuItems, anchorPosition, anchorAlignment, shouldOverlay, shouldSetModalVisibility, disabled}) {
+    shouldOverlay = false,
+    shouldSetModalVisibility = true,
+    disabled = false,
+}: ThreeDotsMenuProps) {
     const theme = useTheme();
     const styles = useThemeStyles();
     const [isPopupMenuVisible, setPopupMenuVisible] = useState(false);
@@ -113,13 +106,13 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
                             e.preventDefault();
                         }}
                         ref={buttonRef}
-                        style={[styles.touchableButtonImage, ...iconStyles]}
+                        style={[styles.touchableButtonImage, iconStyles]}
                         role={CONST.ROLE.BUTTON}
                         accessibilityLabel={translate(iconTooltip)}
                     >
                         <Icon
                             src={icon}
-                            fill={iconFill || theme.icon}
+                            fill={iconFill ?? theme.icon}
                         />
                     </PressableWithoutFeedback>
                 </Tooltip>
@@ -139,10 +132,6 @@ function ThreeDotsMenu({iconTooltip, icon, iconFill, iconStyles, onIconPress, me
     );
 }
 
-ThreeDotsMenu.propTypes = propTypes;
-ThreeDotsMenu.defaultProps = defaultProps;
 ThreeDotsMenu.displayName = 'ThreeDotsMenu';
 
 export default ThreeDotsMenu;
-
-export {ThreeDotsMenuItemPropTypes};

src/pages/workspace/WorkspacesListRow.tsx

@@ -4,7 +4,7 @@ import type {ValueOf} from 'type-fest';
 import Avatar from '@components/Avatar';
 import Icon from '@components/Icon';
 import * as Illustrations from '@components/Icon/Illustrations';
-import type {MenuItemProps} from '@components/MenuItem';
+import type {PopoverMenuItem} from '@components/PopoverMenu';
 import Text from '@components/Text';
 import ThreeDotsMenu from '@components/ThreeDotsMenu';
 import type {WithCurrentUserPersonalDetailsProps} from '@components/withCurrentUserPersonalDetails';
@@ -34,7 +34,7 @@ type WorkspacesListRowProps = WithCurrentUserPersonalDetailsProps & {
     fallbackWorkspaceIcon?: AvatarSource;
 
     /** Items for the three dots menu */
-    menuItems: MenuItemProps[];
+    menuItems: PopoverMenuItem[];
 
     /** Renders the component using big screen layout or small screen layout. When layoutWidth === WorkspaceListRowLayout.NONE,
      * component will return null to prevent layout from jumping on initial render and when parent width changes. */
@@ -111,7 +111,7 @@ function WorkspacesListRow({
                 {isNarrow && (
                     <ThreeDotsMenu
                         menuItems={menuItems}
-                        anchorPosition={{top: 0, right: 0}}
+                        anchorPosition={{horizontal: 0, vertical: 0}}
                     />
                 )}
             </View>
@@ -165,7 +165,7 @@ function WorkspacesListRow({
             {isWide && (
                 <ThreeDotsMenu
                     menuItems={menuItems}
-                    anchorPosition={{top: 0, right: 0}}
+                    anchorPosition={{horizontal: 0, vertical: 0}}
                     iconStyles={[styles.mr2]}
                 />
             )}