Merge pull request Expensify#30907 from software-mansion-labs/ts-migr…

…ation/TextLink

[TS migration] Migrate TextLink to Typescript

src/components/Text.tsx

@@ -1,30 +1,32 @@
 import React, {ForwardedRef} from 'react';
-// eslint-disable-next-line no-restricted-imports
 import {Text as RNText, TextProps as RNTextProps, StyleSheet} from 'react-native';
 import type {TextStyle} from 'react-native';
 import fontFamily from '@styles/fontFamily';
 import useTheme from '@styles/themes/useTheme';
 import variables from '@styles/variables';
+import ChildrenProps from '@src/types/utils/ChildrenProps';
 
-type TextProps = RNTextProps & {
-    /** The color of the text */
-    color?: string;
+type TextProps = RNTextProps &
+    ChildrenProps & {
+        /** The color of the text */
+        color?: string;
 
-    /** The size of the text */
-    fontSize?: number;
+        /** The size of the text */
+        fontSize?: number;
 
-    /** The alignment of the text */
-    textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify';
+        /** The alignment of the text */
+        textAlign?: TextStyle['textAlign'];
 
-    /** Any children to display */
-    children: React.ReactNode;
+        /** Any children to display */
+        children: React.ReactNode;
 
-    /** The family of the font to use */
-    family?: keyof typeof fontFamily;
-};
+        /** The family of the font to use */
+        family?: keyof typeof fontFamily;
+    };
 
-function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
+function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef<RNText>) {
     const theme = useTheme();
+
     const componentStyle: TextStyle = {
         color: color ?? theme.text,
         fontSize,
@@ -36,6 +38,7 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c
     if (!componentStyle.lineHeight && componentStyle.fontSize === variables.fontSizeNormal) {
         componentStyle.lineHeight = variables.fontSizeNormalHeight;
     }
+
     return (
         <RNText
             allowFontScaling={false}
@@ -52,3 +55,4 @@ function Text({color, fontSize = variables.fontSizeNormal, textAlign = 'left', c
 Text.displayName = 'Text';
 
 export default React.forwardRef(Text);
+export type {TextProps};

src/components/TextLink.tsx

@@ -0,0 +1,79 @@
+import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler} from 'react';
+import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native';
+import useEnvironment from '@hooks/useEnvironment';
+import useThemeStyles from '@styles/useThemeStyles';
+import * as Link from '@userActions/Link';
+import CONST from '@src/CONST';
+import Text, {TextProps} from './Text';
+
+type LinkProps = {
+    /** Link to open in new tab */
+    href: string;
+
+    onPress?: undefined;
+};
+
+type PressProps = {
+    href?: undefined;
+
+    /** Overwrites the default link behavior with a custom callback */
+    onPress: () => void;
+};
+
+type TextLinkProps = (LinkProps | PressProps) &
+    TextProps & {
+        /** Additional style props */
+        style?: StyleProp<TextStyle>;
+
+        /** Callback that is called when mousedown is triggered */
+        onMouseDown?: MouseEventHandler;
+    };
+
+function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef<RNText>) {
+    const {environmentURL} = useEnvironment();
+    const styles = useThemeStyles();
+
+    const openLink = () => {
+        if (onPress) {
+            onPress();
+        } else {
+            Link.openLink(href, environmentURL);
+        }
+    };
+
+    const openLinkOnTap = (event: GestureResponderEvent) => {
+        event.preventDefault();
+
+        openLink();
+    };
+
+    const openLinkOnEnterKey: KeyboardEventHandler = (event) => {
+        if (event.key !== 'Enter') {
+            return;
+        }
+        event.preventDefault();
+
+        openLink();
+    };
+
+    return (
+        <Text
+            style={[styles.link, style]}
+            role={CONST.ACCESSIBILITY_ROLE.LINK}
+            href={href}
+            onPress={openLinkOnTap}
+            onKeyDown={openLinkOnEnterKey}
+            onMouseDown={onMouseDown}
+            ref={ref}
+            suppressHighlighting
+            // eslint-disable-next-line react/jsx-props-no-spreading
+            {...rest}
+        >
+            {children}
+        </Text>
+    );
+}
+
+TextLink.displayName = 'TextLink';
+
+export default forwardRef(TextLink);