[TS migration] Migrate 'AnchorForCommentsOnly' component to TypeScript

src/CONST.ts

@@ -2895,6 +2895,14 @@ const CONST = {
         DEFAULT: 5,
         CAROUSEL: 3,
     },
+
+    /** Context menu types */
+    CONTEXT_MENU_TYPES: {
+        LINK: 'LINK',
+        REPORT_ACTION: 'REPORT_ACTION',
+        EMAIL: 'EMAIL',
+        REPORT: 'REPORT',
+    },
 } as const;
 
 export default CONST;

src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js → src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.tsx

@@ -1,39 +1,42 @@
 import Str from 'expensify-common/lib/str';
-import lodashGet from 'lodash/get';
-import PropTypes from 'prop-types';
-import React, {useEffect} from 'react';
-import {StyleSheet} from 'react-native';
-import _ from 'underscore';
+import React, {useEffect, useRef} from 'react';
+import {Text as RNText, StyleSheet} from 'react-native';
 import PressableWithSecondaryInteraction from '@components/PressableWithSecondaryInteraction';
 import Text from '@components/Text';
 import Tooltip from '@components/Tooltip';
 import useWindowDimensions from '@hooks/useWindowDimensions';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import useStyleUtils from '@styles/useStyleUtils';
 import useThemeStyles from '@styles/useThemeStyles';
 import CONST from '@src/CONST';
-import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes';
+import type AnchorForCommentsOnlyProps from './types';
 
-const propTypes = {
+type BaseAnchorForCommentsOnlyProps = AnchorForCommentsOnlyProps & {
     /** Press in handler for the link */
-    // eslint-disable-next-line react/require-default-props
-    onPressIn: PropTypes.func,
+    onPressIn?: () => void;
 
     /** Press out handler for the link */
-    // eslint-disable-next-line react/require-default-props
-    onPressOut: PropTypes.func,
+    onPressOut?: () => void;
+};
+
+type LinkProps = {
+    /** Press handler for the link, when not passed, default href is used to create a link like behaviour */
+    onPress?: () => void;
 
-    ...anchorForCommentsOnlyPropTypes,
+    /** The URL to open */
+    href?: string;
 };
 
 /*
  * This is a default anchor component for regular links.
  */
-function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style = {}, onPress, ...rest}) {
+function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style, onPress, ...rest}: BaseAnchorForCommentsOnlyProps) {
     const styles = useThemeStyles();
     const StyleUtils = useStyleUtils();
+    const linkRef = useRef<RNText>(null);
+    const flattenStyle = StyleSheet.flatten(style);
+
     useEffect(
         () => () => {
             ReportActionContextMenu.hideContextMenu();
@@ -43,10 +46,8 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
 
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    let linkRef;
-
-    const linkProps = {};
-    if (_.isFunction(onPress)) {
+    const linkProps: LinkProps = {};
+    if (onPress) {
         linkProps.onPress = onPress;
     } else {
         linkProps.href = href;
@@ -58,21 +59,16 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
         <PressableWithSecondaryInteraction
             inline
             suppressHighlighting
-            style={[styles.cursorDefault, StyleUtils.getFontSizeStyle(style.fontSize)]}
+            style={[styles.cursorDefault, !!flattenStyle.fontSize && StyleUtils.getFontSizeStyle(flattenStyle.fontSize)]}
             onSecondaryInteraction={(event) => {
-                ReportActionContextMenu.showContextMenu(
-                    isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK,
-                    event,
-                    href,
-                    lodashGet(linkRef, 'current'),
-                );
+                ReportActionContextMenu.showContextMenu(isEmail ? CONST.CONTEXT_MENU_TYPES.EMAIL : CONST.CONTEXT_MENU_TYPES.LINK, event, href, linkRef.current);
             }}
             onPress={(event) => {
                 if (!linkProps.onPress) {
                     return;
                 }
 
-                event.preventDefault();
+                event?.preventDefault();
                 linkProps.onPress();
             }}
             onPressIn={onPressIn}
@@ -82,14 +78,14 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
         >
             <Tooltip text={href}>
                 <Text
-                    ref={(el) => (linkRef = el)}
+                    ref={linkRef}
                     style={StyleSheet.flatten([style, defaultTextStyle])}
                     role={CONST.ACCESSIBILITY_ROLE.LINK}
                     hrefAttrs={{
                         rel,
                         target: isEmail || !linkProps.href ? '_self' : target,
                     }}
-                    href={linkProps.href || href}
+                    href={href}
                     suppressHighlighting
                     // Add testID so it gets selected as an anchor tag by SelectionScraper
                     testID="a"
@@ -103,7 +99,6 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
     );
 }
 
-BaseAnchorForCommentsOnly.propTypes = propTypes;
 BaseAnchorForCommentsOnly.displayName = 'BaseAnchorForCommentsOnly';
 
 export default BaseAnchorForCommentsOnly;

src/components/AnchorForCommentsOnly/index.native.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import {Linking} from 'react-native';
+import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
+import type AnchorForCommentsOnlyProps from './types';
+
+function AnchorForCommentsOnly({onPress, href, ...props}: AnchorForCommentsOnlyProps) {
+    const onLinkPress = () => {
+        if (onPress) {
+            onPress();
+        } else {
+            Linking.openURL(href ?? '');
+        }
+    };
+
+    return (
+        <BaseAnchorForCommentsOnly
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...props}
+            href={href}
+            onPress={onLinkPress}
+        />
+    );
+}
+
+AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly';
+
+export default AnchorForCommentsOnly;

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

@@ -1,10 +1,10 @@
 import React from 'react';
 import ControlSelection from '@libs/ControlSelection';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
-import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes';
 import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly';
+import type AnchorForCommentsOnlyProps from './types';
 
-function AnchorForCommentsOnly(props) {
+function AnchorForCommentsOnly(props: AnchorForCommentsOnlyProps) {
     return (
         <BaseAnchorForCommentsOnly
             // eslint-disable-next-line react/jsx-props-no-spreading
@@ -15,8 +15,6 @@ function AnchorForCommentsOnly(props) {
     );
 }
 
-AnchorForCommentsOnly.propTypes = anchorForCommentsOnlyPropTypes.propTypes;
-AnchorForCommentsOnly.defaultProps = anchorForCommentsOnlyPropTypes.defaultProps;
 AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly';
 
 export default AnchorForCommentsOnly;

src/components/AnchorForCommentsOnly/types.ts

@@ -0,0 +1,23 @@
+import {StyleProp, TextStyle} from 'react-native';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
+
+type AnchorForCommentsOnlyProps = ChildrenProps & {
+    /** The URL to open */
+    href?: string;
+
+    /** What headers to send to the linked page (usually noopener and noreferrer)
+     This is unused in native, but is here for parity with web */
+    rel?: string;
+
+    /** Used to determine where to open a link ("_blank" is passed for a new tab)
+     This is unused in native, but is here for parity with web */
+    target?: string;
+
+    /** Any additional styles to apply */
+    style: StyleProp<TextStyle>;
+
+    /** Press handler for the link, when not passed, default href is used to create a link like behaviour */
+    onPress?: () => void;
+};
+
+export default AnchorForCommentsOnlyProps;

src/components/LHNOptionsList/OptionRowLHN.js

@@ -22,7 +22,6 @@ import {getGroupChatName} from '@libs/GroupChatUtils';
 import * as OptionsListUtils from '@libs/OptionsListUtils';
 import ReportActionComposeFocusManager from '@libs/ReportActionComposeFocusManager';
 import * as ReportUtils from '@libs/ReportUtils';
-import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
 import useTheme from '@styles/themes/useTheme';
 import useStyleUtils from '@styles/useStyleUtils';
@@ -130,7 +129,7 @@ function OptionRowLHN(props) {
         }
         setIsContextMenuActive(true);
         ReportActionContextMenu.showContextMenu(
-            ContextMenuActions.CONTEXT_MENU_TYPES.REPORT,
+            CONST.CONTEXT_MENU_TYPES.REPORT,
             event,
             '',
             popoverAnchor,

src/components/MenuItemList.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import _ from 'underscore';
 import useSingleExecution from '@hooks/useSingleExecution';
-import {CONTEXT_MENU_TYPES} from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import CONST from '@src/CONST';
 import MenuItem from './MenuItem';
 import menuItemPropTypes from './menuItemPropTypes';
 
@@ -31,9 +31,9 @@ function MenuItemList(props) {
      */
     const secondaryInteraction = (link, e) => {
         if (typeof link === 'function') {
-            link().then((url) => ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, url, popoverAnchor));
+            link().then((url) => ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, url, popoverAnchor));
         } else if (!_.isEmpty(link)) {
-            ReportActionContextMenu.showContextMenu(CONTEXT_MENU_TYPES.LINK, e, link, popoverAnchor);
+            ReportActionContextMenu.showContextMenu(CONST.CONTEXT_MENU_TYPES.LINK, e, link, popoverAnchor);
         }
     };
 

src/components/ShowContextMenuContext.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import * as DeviceCapabilities from '@libs/DeviceCapabilities';
 import * as ReportUtils from '@libs/ReportUtils';
-import * as ContextMenuActions from '@pages/home/report/ContextMenu/ContextMenuActions';
 import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportActionContextMenu';
+import CONST from '@src/CONST';
 
 const ShowContextMenuContext = React.createContext({
     anchor: null,
@@ -28,7 +28,7 @@ function showContextMenuForReport(event, anchor, reportID, action, checkIfContex
         return;
     }
     ReportActionContextMenu.showContextMenu(
-        ContextMenuActions.CONTEXT_MENU_TYPES.REPORT_ACTION,
+        CONST.CONTEXT_MENU_TYPES.REPORT_ACTION,
         event,
         '',
         anchor,

src/pages/home/report/ContextMenu/BaseReportActionContextMenu.js

@@ -16,7 +16,7 @@ import useStyleUtils from '@styles/useStyleUtils';
 import * as Session from '@userActions/Session';
 import CONST from '@src/CONST';
 import ONYXKEYS from '@src/ONYXKEYS';
-import ContextMenuActions, {CONTEXT_MENU_TYPES} from './ContextMenuActions';
+import ContextMenuActions from './ContextMenuActions';
 import {defaultProps as GenericReportActionContextMenuDefaultProps, propTypes as genericReportActionContextMenuPropTypes} from './genericReportActionContextMenuPropTypes';
 import {hideContextMenu} from './ReportActionContextMenu';
 
@@ -41,7 +41,7 @@ const propTypes = {
 };
 
 const defaultProps = {
-    type: CONTEXT_MENU_TYPES.REPORT_ACTION,
+    type: CONST.CONTEXT_MENU_TYPES.REPORT_ACTION,
     anchor: null,
     contentRef: null,
     isChronosReport: false,