[TS migration] Migrate 'AnchorForCommentsOnly' component to TypeScript

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

@@ -1,9 +1,6 @@
 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';
@@ -14,25 +11,32 @@ import * as ReportActionContextMenu from '@pages/home/report/ContextMenu/ReportA
 import * as StyleUtils from '@styles/StyleUtils';
 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?: () => Promise<void> | 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 linkRef = useRef<RNText>(null);
+    const flattenStyle = StyleSheet.flatten(style);
+
     useEffect(
         () => () => {
             ReportActionContextMenu.hideContextMenu();
@@ -42,10 +46,8 @@ function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '',
 
     const {isSmallScreenWidth} = useWindowDimensions();
 
-    let linkRef;
-
-    const linkProps = {};
-    if (_.isFunction(onPress)) {
+    const linkProps: LinkProps = {};
+    if (typeof onPress === 'function') {
         linkProps.onPress = onPress;
     } else {
         linkProps.href = href;
@@ -57,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 ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK, event, href, linkRef.current);
             }}
             onPress={(event) => {
                 if (!linkProps.onPress) {
                     return;
                 }
 
-                event.preventDefault();
+                event?.preventDefault();
                 linkProps.onPress();
             }}
             onPressIn={onPressIn}
@@ -81,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"
@@ -102,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,21 @@
+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 = () => (typeof onPress === 'function' ? onPress() : 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?: () => Promise<void> | void;
+};
+
+export default AnchorForCommentsOnlyProps;