From d291618855d1e5bc84b15c091421a98e7adadb19 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Tue, 24 Oct 2023 16:11:31 +0200 Subject: [PATCH 01/21] Migrate to TS --- src/components/TextLink.js | 93 ------------------------------------- src/components/TextLink.tsx | 71 ++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 93 deletions(-) delete mode 100644 src/components/TextLink.js create mode 100644 src/components/TextLink.tsx diff --git a/src/components/TextLink.js b/src/components/TextLink.js deleted file mode 100644 index 233aaf50644e..000000000000 --- a/src/components/TextLink.js +++ /dev/null @@ -1,93 +0,0 @@ -import _ from 'underscore'; -import React from 'react'; -import PropTypes from 'prop-types'; -import Text from './Text'; -import styles from '../styles/styles'; -import stylePropTypes from '../styles/stylePropTypes'; -import CONST from '../CONST'; -import * as Link from '../libs/actions/Link'; -import refPropTypes from './refPropTypes'; - -const propTypes = { - /** Link to open in new tab */ - href: PropTypes.string, - - /** Text content child */ - children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).isRequired, - - /** Additional style props */ - style: stylePropTypes, - - /** Overwrites the default link behavior with a custom callback */ - onPress: PropTypes.func, - - /** Callback that is called when mousedown is triggered */ - onMouseDown: PropTypes.func, - - /** A ref to forward to text */ - forwardedRef: refPropTypes, -}; - -const defaultProps = { - forwardedRef: undefined, - href: undefined, - style: [], - onPress: undefined, - onMouseDown: (event) => event.preventDefault(), -}; - -function TextLink(props) { - const rest = _.omit(props, _.keys(propTypes)); - const additionalStyles = _.isArray(props.style) ? props.style : [props.style]; - - /** - * @param {Event} event - */ - const openLink = (event) => { - event.preventDefault(); - if (props.onPress) { - props.onPress(); - return; - } - - Link.openExternalLink(props.href); - }; - - /** - * @param {Event} event - */ - const openLinkIfEnterKeyPressed = (event) => { - if (event.key !== 'Enter') { - return; - } - openLink(event); - }; - - return ( - - {props.children} - - ); -} - -TextLink.defaultProps = defaultProps; -TextLink.propTypes = propTypes; -TextLink.displayName = 'TextLink'; -export default React.forwardRef((props, ref) => ( - -)); diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx new file mode 100644 index 000000000000..cb763e66a418 --- /dev/null +++ b/src/components/TextLink.tsx @@ -0,0 +1,71 @@ +import _ from 'underscore'; +import React, { ForwardedRef, MouseEventHandler, ReactElement } from 'react'; +import Text from './Text'; +import styles from '../styles/styles'; +import CONST from '../CONST'; +import * as Link from '../libs/actions/Link'; +import { TextStyle, Text as RNText } from 'react-native'; + +type TextLinkProps = { + /** Link to open in new tab */ + href: string; + + /** Text content child */ + children: ReactElement; + + /** Additional style props */ + style: TextStyle; + + /** Overwrites the default link behavior with a custom callback */ + onPress: () => void; + + /** Callback that is called when mousedown is triggered */ + onMouseDown: MouseEventHandler; + + /** A ref to forward to text */ + forwardedRef: ForwardedRef, +} + +function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), forwardedRef, ...props}: TextLinkProps) { + const openLink = (event: Event) => { + event.preventDefault(); + if (onPress) { + onPress(); + return; + } + + Link.openExternalLink(href); + }; + + const openLinkIfEnterKeyPressed = (event: KeyboardEvent) => { + if (event.key !== 'Enter') { + return; + } + openLink(event); + }; + + return ( + + {/* {children} */} + + ); +} + +TextLink.displayName = 'TextLink'; + +export default React.forwardRef((props, ref) => ( + +)); From cda8b737fe3e8498b2b34a50b06f4db05d2e4325 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 6 Nov 2023 12:43:20 +0100 Subject: [PATCH 02/21] Relative imports; optional params; types --- src/components/TextLink.tsx | 38 +++++++++++++++++++++++-------------- 1 file changed, 24 insertions(+), 14 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index cb763e66a418..9a39e2574beb 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,10 +1,10 @@ -import _ from 'underscore'; -import React, { ForwardedRef, MouseEventHandler, ReactElement } from 'react'; +import React, { FC, ForwardedRef, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react'; +import _ from 'lodash'; import Text from './Text'; -import styles from '../styles/styles'; -import CONST from '../CONST'; -import * as Link from '../libs/actions/Link'; -import { TextStyle, Text as RNText } from 'react-native'; +import styles from '@styles/styles'; +import CONST from '@src/CONST'; +import * as Link from '@userActions/Link'; +import { TextStyle, Text as RNText, GestureResponderEvent } from 'react-native'; type TextLinkProps = { /** Link to open in new tab */ @@ -14,20 +14,20 @@ type TextLinkProps = { children: ReactElement; /** Additional style props */ - style: TextStyle; + style?: TextStyle; /** Overwrites the default link behavior with a custom callback */ - onPress: () => void; + onPress?: () => void; /** Callback that is called when mousedown is triggered */ - onMouseDown: MouseEventHandler; + onMouseDown?: MouseEventHandler; /** A ref to forward to text */ forwardedRef: ForwardedRef, } function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), forwardedRef, ...props}: TextLinkProps) { - const openLink = (event: Event) => { + const openLink = (event: GestureResponderEvent) => { event.preventDefault(); if (onPress) { onPress(); @@ -37,11 +37,17 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even Link.openExternalLink(href); }; - const openLinkIfEnterKeyPressed = (event: KeyboardEvent) => { + const openLinkIfEnterKeyPressed: KeyboardEventHandler = (event) => { + event.preventDefault(); if (event.key !== 'Enter') { return; } - openLink(event); + if (onPress) { + onPress(); + return; + } + + Link.openExternalLink(href); }; return ( @@ -56,16 +62,20 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even suppressHighlighting {...props} > - {/* {children} */} + {children} ); } TextLink.displayName = 'TextLink'; -export default React.forwardRef((props, ref) => ( +const TextLinkWithRef: FC = React.forwardRef((props, ref) => ( )); + +TextLinkWithRef.displayName = 'TextLinkWithRef'; + +export default TextLinkWithRef; From 383db18c2403210217dd6472678a279713fc8a22 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 6 Nov 2023 12:51:15 +0100 Subject: [PATCH 03/21] Remove unused import --- src/components/TextLink.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 9a39e2574beb..1a56c9e39377 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,5 +1,4 @@ import React, { FC, ForwardedRef, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react'; -import _ from 'lodash'; import Text from './Text'; import styles from '@styles/styles'; import CONST from '@src/CONST'; From f7ea0fea4e099e4003c183d2c41ea713efccdb73 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 6 Nov 2023 12:55:47 +0100 Subject: [PATCH 04/21] Import ordering; Ignore no spreading --- src/components/TextLink.tsx | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 1a56c9e39377..776d2326fe22 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,9 +1,9 @@ -import React, { FC, ForwardedRef, KeyboardEventHandler, MouseEventHandler, ReactElement } from 'react'; -import Text from './Text'; +import React, {FC, ForwardedRef, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react'; +import {GestureResponderEvent, Text as RNText, TextStyle} from 'react-native'; import styles from '@styles/styles'; -import CONST from '@src/CONST'; import * as Link from '@userActions/Link'; -import { TextStyle, Text as RNText, GestureResponderEvent } from 'react-native'; +import CONST from '@src/CONST'; +import Text from './Text'; type TextLinkProps = { /** Link to open in new tab */ @@ -22,8 +22,8 @@ type TextLinkProps = { onMouseDown?: MouseEventHandler; /** A ref to forward to text */ - forwardedRef: ForwardedRef, -} + forwardedRef: ForwardedRef; +}; function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), forwardedRef, ...props}: TextLinkProps) { const openLink = (event: GestureResponderEvent) => { @@ -59,6 +59,7 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even onKeyDown={openLinkIfEnterKeyPressed} ref={forwardedRef} suppressHighlighting + // eslint-disable-next-line react/jsx-props-no-spreading {...props} > {children} @@ -70,6 +71,7 @@ TextLink.displayName = 'TextLink'; const TextLinkWithRef: FC = React.forwardRef((props, ref) => ( From 71fe17588f709d07c2f0b9818705ef4e81aa4553 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 6 Nov 2023 13:47:43 +0100 Subject: [PATCH 05/21] Extract logic to openLink method --- src/components/TextLink.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 776d2326fe22..cf0634ae9914 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -26,27 +26,28 @@ type TextLinkProps = { }; function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), forwardedRef, ...props}: TextLinkProps) { - const openLink = (event: GestureResponderEvent) => { - event.preventDefault(); + const openLink = () => { if (onPress) { onPress(); return; } Link.openExternalLink(href); + } + + const openLinkOnTap = (event: GestureResponderEvent) => { + event.preventDefault(); + + openLink(); }; - const openLinkIfEnterKeyPressed: KeyboardEventHandler = (event) => { + const openLinkOnEnterKey: KeyboardEventHandler = (event) => { event.preventDefault(); if (event.key !== 'Enter') { return; } - if (onPress) { - onPress(); - return; - } - Link.openExternalLink(href); + openLink(); }; return ( @@ -54,9 +55,9 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even style={[styles.link, style]} accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} href={href} - onPress={openLink} + onPress={openLinkOnTap} + onKeyDown={openLinkOnEnterKey} onMouseDown={onMouseDown} - onKeyDown={openLinkIfEnterKeyPressed} ref={forwardedRef} suppressHighlighting // eslint-disable-next-line react/jsx-props-no-spreading From 4c0a80841c5abe797a502850a4e3dd180db36563 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 6 Nov 2023 13:48:04 +0100 Subject: [PATCH 06/21] Missing semicolon --- src/components/TextLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index cf0634ae9914..bbbd8439a6c3 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -33,7 +33,7 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even } Link.openExternalLink(href); - } + }; const openLinkOnTap = (event: GestureResponderEvent) => { event.preventDefault(); From 89f3905bd49afd683db26444353167246296cb21 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Tue, 7 Nov 2023 18:14:50 +0100 Subject: [PATCH 07/21] Better ref handling --- src/components/TextLink.tsx | 21 ++++----------------- 1 file changed, 4 insertions(+), 17 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index bf496a87a971..ca04133a85a9 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,4 +1,4 @@ -import React, {FC, ForwardedRef, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react'; +import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react'; import {GestureResponderEvent, Text as RNText, TextStyle} from 'react-native'; import styles from '@styles/styles'; import * as Link from '@userActions/Link'; @@ -20,12 +20,9 @@ type TextLinkProps = { /** Callback that is called when mousedown is triggered */ onMouseDown?: MouseEventHandler; - - /** A ref to forward to text */ - forwardedRef: ForwardedRef; }; -function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), forwardedRef, ...props}: TextLinkProps) { +function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), ...props}: TextLinkProps, ref: ForwardedRef) { const openLink = () => { if (onPress) { onPress(); @@ -58,7 +55,7 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even onPress={openLinkOnTap} onKeyDown={openLinkOnEnterKey} onMouseDown={onMouseDown} - ref={forwardedRef} + ref={ref} suppressHighlighting // eslint-disable-next-line react/jsx-props-no-spreading {...props} @@ -70,14 +67,4 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even TextLink.displayName = 'TextLink'; -const TextLinkWithRef: FC = React.forwardRef((props, ref) => ( - -)); - -TextLinkWithRef.displayName = 'TextLinkWithRef'; - -export default TextLinkWithRef; +export default forwardRef(TextLink); From af92086cd7735718517d018f08f79e417c3e9483 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Tue, 7 Nov 2023 18:39:07 +0100 Subject: [PATCH 08/21] More preventDefault after early return --- src/components/TextLink.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index ca04133a85a9..6fcfa0051de8 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -39,10 +39,10 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even }; const openLinkOnEnterKey: KeyboardEventHandler = (event) => { - event.preventDefault(); if (event.key !== 'Enter') { return; } + event.preventDefault(); openLink(); }; From 0ded84a2e94bf16af54bfdfcf4a393574da67f7c Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 8 Nov 2023 14:54:44 +0100 Subject: [PATCH 09/21] Make href optional --- src/components/TextLink.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 6fcfa0051de8..f5bca0c8e824 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -7,7 +7,7 @@ import Text from './Text'; type TextLinkProps = { /** Link to open in new tab */ - href: string; + href?: string; /** Text content child */ children: ReactElement; @@ -29,7 +29,9 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even return; } - Link.openExternalLink(href); + if (href) { + Link.openExternalLink(href); + } }; const openLinkOnTap = (event: GestureResponderEvent) => { From 5304f4d32d9fa4c8d13aa7b652e978fc2a4bdd0c Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 8 Nov 2023 14:59:12 +0100 Subject: [PATCH 10/21] More compact else/if syntax --- src/components/TextLink.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index f5bca0c8e824..e14fc4c2c311 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -26,10 +26,7 @@ function TextLink({href, children, style, onPress, onMouseDown = (event) => even const openLink = () => { if (onPress) { onPress(); - return; - } - - if (href) { + } else if (href) { Link.openExternalLink(href); } }; From df2d98a9ce72cd4b8d72887ef2b47ab5ddd68730 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Thu, 9 Nov 2023 12:49:25 +0100 Subject: [PATCH 11/21] Use discriminating union type for link and onPress --- src/components/TextLink.tsx | 26 +++++++++++++++++--------- 1 file changed, 17 insertions(+), 9 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index e14fc4c2c311..9a29f0900dc9 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,32 +1,40 @@ import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react'; -import {GestureResponderEvent, Text as RNText, TextStyle} from 'react-native'; +import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native'; import styles from '@styles/styles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import Text from './Text'; -type TextLinkProps = { +type LinkProps = { /** Link to open in new tab */ - href?: string; + href: string; + onPress?: undefined; +} + +type PressProps = { + href?: undefined; + + /** Overwrites the default link behavior with a custom callback */ + onPress: () => void; +} + +type TextLinkProps = (LinkProps | PressProps) & { /** Text content child */ children: ReactElement; /** Additional style props */ - style?: TextStyle; - - /** Overwrites the default link behavior with a custom callback */ - onPress?: () => void; + style?: StyleProp; /** Callback that is called when mousedown is triggered */ onMouseDown?: MouseEventHandler; }; -function TextLink({href, children, style, onPress, onMouseDown = (event) => event.preventDefault(), ...props}: TextLinkProps, ref: ForwardedRef) { +function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...props}: TextLinkProps, ref: ForwardedRef) { const openLink = () => { if (onPress) { onPress(); - } else if (href) { + } else { Link.openExternalLink(href); } }; From 65e05f912e9e2dbcea2d61544f04b01e9fb9fa8f Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Thu, 9 Nov 2023 16:17:32 +0100 Subject: [PATCH 12/21] Prettier --- src/components/TextLink.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 9a29f0900dc9..559e5ec9eaca 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -5,19 +5,19 @@ import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import Text from './Text'; -type LinkProps = { +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) & { /** Text content child */ From 1b8976101ec63956d8adc27b8c5d8cd390bc8746 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Fri, 10 Nov 2023 17:14:04 +0100 Subject: [PATCH 13/21] Better type for children + export type --- src/components/Text.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 80181156ee3a..f1cf35933fb6 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -1,10 +1,10 @@ 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 themeColors from '@styles/themes/default'; import variables from '@styles/variables'; +import ChildrenProps from '@src/types/utils/ChildrenProps'; type TextProps = RNTextProps & { /** The color of the text */ @@ -12,17 +12,19 @@ type TextProps = RNTextProps & { /** The size of the text */ fontSize?: number; + /** The alignment of the text */ textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify'; + /** Any children to display */ - children: React.ReactNode; + children: ChildrenProps; /** The family of the font to use */ family?: keyof typeof fontFamily; }; function Text( - {color = themeColors.text, fontSize = variables.fontSizeNormal, textAlign = 'left', children = null, family = 'EXP_NEUE', style = {}, ...props}: TextProps, + {color = themeColors.text, fontSize = variables.fontSizeNormal, textAlign = 'left', children, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef, ) { const componentStyle: TextStyle = { @@ -52,3 +54,4 @@ function Text( Text.displayName = 'Text'; export default React.forwardRef(Text); +export type {TextProps}; From bc41d43b95c7a1b2886a91ba014cfe558dd85b13 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Fri, 10 Nov 2023 17:14:27 +0100 Subject: [PATCH 14/21] Extend TextProps; rename props->rest --- src/components/TextLink.tsx | 13 +++++-------- 1 file changed, 5 insertions(+), 8 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 559e5ec9eaca..cb03c340b7e6 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,9 +1,9 @@ -import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler, ReactElement} from 'react'; +import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler} from 'react'; import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native'; import styles from '@styles/styles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; -import Text from './Text'; +import Text, { TextProps } from './Text'; type LinkProps = { /** Link to open in new tab */ @@ -19,10 +19,7 @@ type PressProps = { onPress: () => void; }; -type TextLinkProps = (LinkProps | PressProps) & { - /** Text content child */ - children: ReactElement; - +type TextLinkProps = (LinkProps | PressProps) & TextProps & { /** Additional style props */ style?: StyleProp; @@ -30,7 +27,7 @@ type TextLinkProps = (LinkProps | PressProps) & { onMouseDown?: MouseEventHandler; }; -function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...props}: TextLinkProps, ref: ForwardedRef) { +function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef) { const openLink = () => { if (onPress) { onPress(); @@ -65,7 +62,7 @@ function TextLink({href, onPress, children, style, onMouseDown = (event) => even ref={ref} suppressHighlighting // eslint-disable-next-line react/jsx-props-no-spreading - {...props} + {...rest} > {children} From 3e26c7b8ef21f0a95ec0182659cf4973f52a55c4 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 20 Nov 2023 20:07:31 +0100 Subject: [PATCH 15/21] Fix merge - apply changes from olx .js file --- src/components/TextLink.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index cb03c340b7e6..9fc0c02185c9 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,6 +1,6 @@ import React, {ForwardedRef, forwardRef, KeyboardEventHandler, MouseEventHandler} from 'react'; import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react-native'; -import styles from '@styles/styles'; +import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; import Text, { TextProps } from './Text'; @@ -28,6 +28,8 @@ type TextLinkProps = (LinkProps | PressProps) & TextProps & { }; function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef) { + const styles = useThemeStyles(); + const openLink = () => { if (onPress) { onPress(); From 1d5c0aff3bbd2039ca3286addc591e618e09f7fa Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 20 Nov 2023 20:09:22 +0100 Subject: [PATCH 16/21] Lint --- src/components/TextLink.tsx | 15 ++++++++------- 1 file changed, 8 insertions(+), 7 deletions(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index 9fc0c02185c9..fae4a71eeafa 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -3,7 +3,7 @@ import {GestureResponderEvent, Text as RNText, StyleProp, TextStyle} from 'react import useThemeStyles from '@styles/useThemeStyles'; import * as Link from '@userActions/Link'; import CONST from '@src/CONST'; -import Text, { TextProps } from './Text'; +import Text, {TextProps} from './Text'; type LinkProps = { /** Link to open in new tab */ @@ -19,13 +19,14 @@ type PressProps = { onPress: () => void; }; -type TextLinkProps = (LinkProps | PressProps) & TextProps & { - /** Additional style props */ - style?: StyleProp; +type TextLinkProps = (LinkProps | PressProps) & + TextProps & { + /** Additional style props */ + style?: StyleProp; - /** Callback that is called when mousedown is triggered */ - onMouseDown?: MouseEventHandler; -}; + /** Callback that is called when mousedown is triggered */ + onMouseDown?: MouseEventHandler; + }; function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef) { const styles = useThemeStyles(); From 732efed62a588c5117960b02a35753d38720674e Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 20 Nov 2023 20:19:23 +0100 Subject: [PATCH 17/21] Extend ChildrenProps --- src/components/Text.tsx | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/src/components/Text.tsx b/src/components/Text.tsx index b7f8bff0c89b..17579830ba27 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -6,7 +6,7 @@ import useTheme from '@styles/themes/useTheme'; import variables from '@styles/variables'; import ChildrenProps from '@src/types/utils/ChildrenProps'; -type TextProps = RNTextProps & { +type TextProps = RNTextProps & ChildrenProps & { /** The color of the text */ color?: string; @@ -16,9 +16,6 @@ type TextProps = RNTextProps & { /** The alignment of the text */ textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify'; - /** Any children to display */ - children: ChildrenProps; - /** The family of the font to use */ family?: keyof typeof fontFamily; }; From 95ab86af59050b2af68066b80e773ce3a584476e Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 20 Nov 2023 20:37:54 +0100 Subject: [PATCH 18/21] Lint --- src/components/Text.tsx | 21 +++++++++++---------- 1 file changed, 11 insertions(+), 10 deletions(-) diff --git a/src/components/Text.tsx b/src/components/Text.tsx index 17579830ba27..b7799a74ce51 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -6,19 +6,20 @@ import useTheme from '@styles/themes/useTheme'; import variables from '@styles/variables'; import ChildrenProps from '@src/types/utils/ChildrenProps'; -type TextProps = RNTextProps & ChildrenProps & { - /** 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?: 'left' | 'right' | 'auto' | 'center' | 'justify'; - /** 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, family = 'EXP_NEUE', style = {}, ...props}: TextProps, ref: ForwardedRef) { const theme = useTheme(); From cfc444c2fecc53f445ad911d28cdd08bf0eec3ad Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Mon, 27 Nov 2023 11:46:22 +0100 Subject: [PATCH 19/21] Use TextStyles' textAlign type --- src/components/Text.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Text.tsx b/src/components/Text.tsx index b7799a74ce51..a289e224fb72 100644 --- a/src/components/Text.tsx +++ b/src/components/Text.tsx @@ -15,7 +15,7 @@ type TextProps = RNTextProps & fontSize?: number; /** The alignment of the text */ - textAlign?: 'left' | 'right' | 'auto' | 'center' | 'justify'; + textAlign?: TextStyle['textAlign']; /** The family of the font to use */ family?: keyof typeof fontFamily; From 1a8f7ad0f73f8f1a322832a685334eceac42f607 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 6 Dec 2023 10:11:44 +0100 Subject: [PATCH 20/21] Drop js file --- src/components/TextLink.js | 101 ------------------------------------- 1 file changed, 101 deletions(-) delete mode 100644 src/components/TextLink.js diff --git a/src/components/TextLink.js b/src/components/TextLink.js deleted file mode 100644 index 46c074eb79e6..000000000000 --- a/src/components/TextLink.js +++ /dev/null @@ -1,101 +0,0 @@ -import PropTypes from 'prop-types'; -import React from 'react'; -import _ from 'underscore'; -import useEnvironment from '@hooks/useEnvironment'; -import stylePropTypes from '@styles/stylePropTypes'; -import useThemeStyles from '@styles/useThemeStyles'; -import * as Link from '@userActions/Link'; -import CONST from '@src/CONST'; -import refPropTypes from './refPropTypes'; -import Text from './Text'; - -const propTypes = { - /** Link to open in new tab */ - href: PropTypes.string, - - /** Text content child */ - children: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.object]).isRequired, - - /** Additional style props */ - style: stylePropTypes, - - /** Overwrites the default link behavior with a custom callback */ - onPress: PropTypes.func, - - /** Callback that is called when mousedown is triggered */ - onMouseDown: PropTypes.func, - - /** A ref to forward to text */ - forwardedRef: refPropTypes, -}; - -const defaultProps = { - forwardedRef: undefined, - href: undefined, - style: [], - onPress: undefined, - onMouseDown: (event) => event.preventDefault(), -}; - -function TextLink(props) { - const {environmentURL} = useEnvironment(); - const styles = useThemeStyles(); - const rest = _.omit(props, _.keys(propTypes)); - const additionalStyles = _.isArray(props.style) ? props.style : [props.style]; - - /** - * @param {Event} event - */ - const openLink = (event) => { - event.preventDefault(); - if (props.onPress) { - props.onPress(); - return; - } - - Link.openLink(props.href, environmentURL); - }; - - /** - * @param {Event} event - */ - const openLinkIfEnterKeyPressed = (event) => { - if (event.key !== 'Enter') { - return; - } - openLink(event); - }; - - return ( - - {props.children} - - ); -} - -TextLink.defaultProps = defaultProps; -TextLink.propTypes = propTypes; -TextLink.displayName = 'TextLink'; - -const TextLinkWithRef = React.forwardRef((props, ref) => ( - -)); - -TextLinkWithRef.displayName = 'TextLinkWithRef'; - -export default TextLinkWithRef; From d95966ab6cface539c5b629036b0c63db540dbb4 Mon Sep 17 00:00:00 2001 From: Maciej Dobosz Date: Wed, 6 Dec 2023 17:27:49 +0100 Subject: [PATCH 21/21] Restore environmentURL --- src/components/TextLink.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/TextLink.tsx b/src/components/TextLink.tsx index fae4a71eeafa..95c456ddc8e3 100644 --- a/src/components/TextLink.tsx +++ b/src/components/TextLink.tsx @@ -1,5 +1,6 @@ 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'; @@ -29,13 +30,14 @@ type TextLinkProps = (LinkProps | PressProps) & }; function TextLink({href, onPress, children, style, onMouseDown = (event) => event.preventDefault(), ...rest}: TextLinkProps, ref: ForwardedRef) { + const {environmentURL} = useEnvironment(); const styles = useThemeStyles(); const openLink = () => { if (onPress) { onPress(); } else { - Link.openExternalLink(href); + Link.openLink(href, environmentURL); } };