Merge pull request Expensify#33485 from JKobrynski/migrateContextMenu…

…ItemToTypeScript [TS Migration] Migrate 'ContextMenuItem.js' component to TypeScript
brunovjk · Jan 9, 2024 · 5d0931d · 5d0931d
2 parents 0f867b8 + bf15f99
commit 5d0931d
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 41 deletions.
diff --git a/src/components/ContextMenuItem.js → src/components/ContextMenuItem.tsx b/src/components/ContextMenuItem.js → src/components/ContextMenuItem.tsx
@@ -1,58 +1,52 @@
-import PropTypes from 'prop-types';
+import type {ForwardedRef} from 'react';
 import React, {forwardRef, useImperativeHandle} from 'react';
 import useStyleUtils from '@hooks/useStyleUtils';
 import useThemeStyles from '@hooks/useThemeStyles';
 import useThrottledButtonState from '@hooks/useThrottledButtonState';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import getButtonState from '@libs/getButtonState';
+import type IconAsset from '@src/types/utils/IconAsset';
 import BaseMiniContextMenuItem from './BaseMiniContextMenuItem';
 import Icon from './Icon';
-import sourcePropTypes from './Image/sourcePropTypes';
 import MenuItem from './MenuItem';
 
-const propTypes = {
+type ContextMenuItemProps = {
     /** Icon Component */
-    icon: sourcePropTypes.isRequired,
+    icon: IconAsset;
 
     /** Text to display */
-    text: PropTypes.string.isRequired,
+    text: string;
 
     /** Icon to show when interaction was successful */
-    successIcon: sourcePropTypes,
+    successIcon?: IconAsset;
 
     /** Text to show when interaction was successful */
-    successText: PropTypes.string,
+    successText?: string;
 
     /** Whether to show the mini menu */
-    isMini: PropTypes.bool,
+    isMini?: boolean;
 
     /** Callback to fire when the item is pressed */
-    onPress: PropTypes.func.isRequired,
+    onPress: () => void;
 
     /** A description text to show under the title */
-    description: PropTypes.string,
+    description?: string;
 
     /** The action accept for anonymous user or not */
-    isAnonymousAction: PropTypes.bool,
+    isAnonymousAction?: boolean;
 
     /** Whether the menu item is focused or not */
-    isFocused: PropTypes.bool,
-
-    /** Forwarded ref to ContextMenuItem */
-    innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.object]),
+    isFocused?: boolean;
 };
 
-const defaultProps = {
-    isMini: false,
-    successIcon: null,
-    successText: '',
-    description: '',
-    isAnonymousAction: false,
-    isFocused: false,
-    innerRef: null,
+type ContextMenuItemHandle = {
+    triggerPressAndUpdateSuccess?: () => void;
 };
 
-function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini, description, isAnonymousAction, isFocused, innerRef}) {
+function ContextMenuItem(
+    {onPress, successIcon, successText = '', icon, text, isMini = false, description = '', isAnonymousAction = false, isFocused = false}: ContextMenuItemProps,
+    ref: ForwardedRef<ContextMenuItemHandle>,
+) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
     const {windowWidth} = useWindowDimensions();
@@ -66,12 +60,12 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
 
         // We only set the success state when we have icon or text to represent the success state
         // We may want to replace this check by checking the Result from OnPress Callback in future.
-        if (successIcon || successText) {
+        if (!!successIcon || successText) {
             setThrottledButtonInactive();
         }
     };
 
-    useImperativeHandle(innerRef, () => ({triggerPressAndUpdateSuccess}));
+    useImperativeHandle(ref, () => ({triggerPressAndUpdateSuccess}));
 
     const itemIcon = !isThrottledButtonActive && successIcon ? successIcon : icon;
     const itemText = !isThrottledButtonActive && successText ? successText : text;
@@ -107,18 +101,6 @@ function ContextMenuItem({onPress, successIcon, successText, icon, text, isMini,
     );
 }
 
-ContextMenuItem.propTypes = propTypes;
-ContextMenuItem.defaultProps = defaultProps;
 ContextMenuItem.displayName = 'ContextMenuItem';
 
-const ContextMenuItemWithRef = forwardRef((props, ref) => (
-    <ContextMenuItem
-        // eslint-disable-next-line react/jsx-props-no-spreading
-        {...props}
-        innerRef={ref}
-    />
-));
-
-ContextMenuItemWithRef.displayName = 'ContextMenuItemWithRef';
-
-export default ContextMenuItemWithRef;
+export default forwardRef(ContextMenuItem);
diff --git a/src/components/MenuItem.tsx b/src/components/MenuItem.tsx
@@ -66,7 +66,7 @@ type MenuItemProps = (IconProps | AvatarProps | NoIcon) & {
     badgeText?: string;
 
     /** Used to apply offline styles to child text components */
-    style?: ViewStyle;
+    style?: StyleProp<ViewStyle>;
 
     /** Any additional styles to apply */
     wrapperStyle?: StyleProp<ViewStyle>;
@@ -291,7 +291,7 @@ function MenuItem(
     const theme = useTheme();
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
-    const combinedStyle = StyleUtils.combineStyles(style ?? {}, styles.popoverMenuItem);
+    const combinedStyle = [style, styles.popoverMenuItem];
     const {isSmallScreenWidth} = useWindowDimensions();
     const [html, setHtml] = useState('');
     const titleRef = useRef('');