From c532d14f69239971c4ac5ac3ac3c00a7143ce0bc Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 19 Jul 2023 09:29:57 +0200 Subject: [PATCH 1/7] fix: close modal when anchor unmounted --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 9e1ceaad593e..2a5beeb115d8 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -1,5 +1,5 @@ import _ from 'underscore'; -import React from 'react'; +import React, {useEffect} from 'react'; import {StyleSheet} from 'react-native'; import PropTypes from 'prop-types'; import lodashGet from 'lodash/get'; @@ -41,6 +41,10 @@ const defaultProps = { * This is a default anchor component for regular links. */ function BaseAnchorForCommentsOnly(props) { + useEffect(() => () => { + ReportActionContextMenu.hideContextMenu(); + }, []) + let linkRef; const rest = _.omit(props, _.keys(propTypes)); const linkProps = {}; From 082089da1dcfe9b4b5bca920aff920da8e4ec236 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 19 Jul 2023 09:39:28 +0200 Subject: [PATCH 2/7] refactor: change withWindowDimensions for useWindowDimensions --- .../BaseAnchorForCommentsOnly.js | 14 +++++++++----- 1 file changed, 9 insertions(+), 5 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 2a5beeb115d8..6852f0fb748e 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -12,9 +12,12 @@ import Tooltip from '../Tooltip'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../withWindowDimensions'; -import {propTypes as anchorForCommentsOnlyPropTypes, defaultProps as anchorForCommentsOnlyDefaultProps} from './anchorForCommentsOnlyPropTypes'; +import { + propTypes as anchorForCommentsOnlyPropTypes, + defaultProps as anchorForCommentsOnlyDefaultProps +} from './anchorForCommentsOnlyPropTypes'; import CONST from '../../CONST'; +import useWindowDimensions from "../../hooks/useWindowDimensions"; const propTypes = { /** Press in handler for the link */ @@ -27,7 +30,6 @@ const propTypes = { containerStyles: PropTypes.arrayOf(PropTypes.object), ...anchorForCommentsOnlyPropTypes, - ...windowDimensionsPropTypes, }; const defaultProps = { @@ -45,6 +47,8 @@ function BaseAnchorForCommentsOnly(props) { ReportActionContextMenu.hideContextMenu(); }, []) + const {isSmallScreenWidth} = useWindowDimensions(); + let linkRef; const rest = _.omit(props, _.keys(propTypes)); const linkProps = {}; @@ -53,7 +57,7 @@ function BaseAnchorForCommentsOnly(props) { } else { linkProps.href = props.href; } - const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || props.isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer}; + const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer}; const isEmail = Str.isValidEmailMarkdown(props.href.replace(/mailto:/i, '')); return ( @@ -100,4 +104,4 @@ BaseAnchorForCommentsOnly.propTypes = propTypes; BaseAnchorForCommentsOnly.defaultProps = defaultProps; BaseAnchorForCommentsOnly.displayName = 'BaseAnchorForCommentsOnly'; -export default withWindowDimensions(BaseAnchorForCommentsOnly); +export default BaseAnchorForCommentsOnly; From 6a2f1e5b2eb342942c9f3f00893b19bf782ad22e Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 19 Jul 2023 10:06:03 +0200 Subject: [PATCH 3/7] refactor: props destructuring, remove unused props --- .../BaseAnchorForCommentsOnly.js | 55 ++++++++++--------- .../anchorForCommentsOnlyPropTypes.js | 4 -- 2 files changed, 28 insertions(+), 31 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 6852f0fb748e..b9dad2254703 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -14,35 +14,37 @@ import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; import { propTypes as anchorForCommentsOnlyPropTypes, - defaultProps as anchorForCommentsOnlyDefaultProps } from './anchorForCommentsOnlyPropTypes'; import CONST from '../../CONST'; import useWindowDimensions from "../../hooks/useWindowDimensions"; const propTypes = { /** Press in handler for the link */ + // eslint-disable-next-line react/require-default-props onPressIn: PropTypes.func, /** Press out handler for the link */ + // eslint-disable-next-line react/require-default-props onPressOut: PropTypes.func, // eslint-disable-next-line react/forbid-prop-types - containerStyles: PropTypes.arrayOf(PropTypes.object), - ...anchorForCommentsOnlyPropTypes, }; -const defaultProps = { - onPressIn: undefined, - onPressOut: undefined, - containerStyles: [], - ...anchorForCommentsOnlyDefaultProps, -}; - /* * This is a default anchor component for regular links. */ -function BaseAnchorForCommentsOnly(props) { +function BaseAnchorForCommentsOnly({ + onPressIn = undefined, + onPressOut = undefined, + href = '', + rel = '', + target = '', + children = null, + style = {}, + onPress = undefined, + ...rest +}) { useEffect(() => () => { ReportActionContextMenu.hideContextMenu(); }, []) @@ -50,42 +52,42 @@ function BaseAnchorForCommentsOnly(props) { const {isSmallScreenWidth} = useWindowDimensions(); let linkRef; - const rest = _.omit(props, _.keys(propTypes)); + const linkProps = {}; - if (_.isFunction(props.onPress)) { - linkProps.onPress = props.onPress; + if (_.isFunction(onPress)) { + linkProps.onPress = onPress; } else { - linkProps.href = props.href; + linkProps.href = href; } const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer}; - const isEmail = Str.isValidEmailMarkdown(props.href.replace(/mailto:/i, '')); + const isEmail = Str.isValidEmailMarkdown(href.replace(/mailto:/i, '')); return ( { ReportActionContextMenu.showContextMenu( isEmail ? ContextMenuActions.CONTEXT_MENU_TYPES.EMAIL : ContextMenuActions.CONTEXT_MENU_TYPES.LINK, event, - props.href, + href, lodashGet(linkRef, 'current'), ); }} onPress={linkProps.onPress} - onPressIn={props.onPressIn} - onPressOut={props.onPressOut} + onPressIn={onPressIn} + onPressOut={onPressOut} accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} - accessibilityLabel={props.href} + accessibilityLabel={href} > - + (linkRef = el)} - style={StyleSheet.flatten([props.style, defaultTextStyle])} + style={StyleSheet.flatten([style, defaultTextStyle])} accessibilityRole={CONST.ACCESSIBILITY_ROLE.LINK} hrefAttrs={{ - rel: props.rel, - target: isEmail ? '_self' : props.target, + rel, + target: isEmail ? '_self' : target, }} href={linkProps.href} // Add testID so it gets selected as an anchor tag by SelectionScraper @@ -93,7 +95,7 @@ function BaseAnchorForCommentsOnly(props) { // eslint-disable-next-line react/jsx-props-no-spreading {...rest} > - {props.children} + {children} @@ -101,7 +103,6 @@ function BaseAnchorForCommentsOnly(props) { } BaseAnchorForCommentsOnly.propTypes = propTypes; -BaseAnchorForCommentsOnly.defaultProps = defaultProps; BaseAnchorForCommentsOnly.displayName = 'BaseAnchorForCommentsOnly'; export default BaseAnchorForCommentsOnly; diff --git a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js index 6246f581435a..10b5a40c853d 100644 --- a/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js +++ b/src/components/AnchorForCommentsOnly/anchorForCommentsOnlyPropTypes.js @@ -16,9 +16,6 @@ const propTypes = { /** Any children to display */ children: PropTypes.node, - /** Anchor text of URLs or emails. */ - displayName: PropTypes.string, - /** Any additional styles to apply */ style: stylePropTypes, @@ -32,7 +29,6 @@ const defaultProps = { target: '', children: null, style: {}, - displayName: '', onPress: undefined, }; From 4ac54094b04851b00ea924c81c70b83a4fa59607 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 19 Jul 2023 10:21:09 +0200 Subject: [PATCH 4/7] fix: fix prettier --- .../BaseAnchorForCommentsOnly.js | 27 +++++++------------ 1 file changed, 9 insertions(+), 18 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index b9dad2254703..6705994d2080 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -12,11 +12,9 @@ import Tooltip from '../Tooltip'; import * as DeviceCapabilities from '../../libs/DeviceCapabilities'; import styles from '../../styles/styles'; import * as StyleUtils from '../../styles/StyleUtils'; -import { - propTypes as anchorForCommentsOnlyPropTypes, -} from './anchorForCommentsOnlyPropTypes'; +import {propTypes as anchorForCommentsOnlyPropTypes} from './anchorForCommentsOnlyPropTypes'; import CONST from '../../CONST'; -import useWindowDimensions from "../../hooks/useWindowDimensions"; +import useWindowDimensions from '../../hooks/useWindowDimensions'; const propTypes = { /** Press in handler for the link */ @@ -34,20 +32,13 @@ const propTypes = { /* * This is a default anchor component for regular links. */ -function BaseAnchorForCommentsOnly({ - onPressIn = undefined, - onPressOut = undefined, - href = '', - rel = '', - target = '', - children = null, - style = {}, - onPress = undefined, - ...rest -}) { - useEffect(() => () => { - ReportActionContextMenu.hideContextMenu(); - }, []) +function BaseAnchorForCommentsOnly({onPressIn = undefined, onPressOut = undefined, href = '', rel = '', target = '', children = null, style = {}, onPress = undefined, ...rest}) { + useEffect( + () => () => { + ReportActionContextMenu.hideContextMenu(); + }, + [], + ); const {isSmallScreenWidth} = useWindowDimensions(); From 7e644827f73708eccfc705aef512c1fb7ee65ac6 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Wed, 19 Jul 2023 13:36:14 +0200 Subject: [PATCH 5/7] fix: change default props for functions --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 6705994d2080..dc9a3ab8aa6f 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -32,7 +32,7 @@ const propTypes = { /* * This is a default anchor component for regular links. */ -function BaseAnchorForCommentsOnly({onPressIn = undefined, onPressOut = undefined, href = '', rel = '', target = '', children = null, style = {}, onPress = undefined, ...rest}) { +function BaseAnchorForCommentsOnly({onPressIn = () => {}, onPressOut = () => {}, href = '', rel = '', target = '', children = null, style = {}, onPress = undefined, ...rest}) { useEffect( () => () => { ReportActionContextMenu.hideContextMenu(); From 9307a61963ecf3b18f01f3f08e74bb3fe3048b62 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Mon, 24 Jul 2023 14:22:39 +0200 Subject: [PATCH 6/7] fix: remove unnecessary comment --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index dc9a3ab8aa6f..8c22973977d0 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -25,7 +25,6 @@ const propTypes = { // eslint-disable-next-line react/require-default-props onPressOut: PropTypes.func, - // eslint-disable-next-line react/forbid-prop-types ...anchorForCommentsOnlyPropTypes, }; From aacee6296f3e22ed607f3f21aeb6e9aa259a27d9 Mon Sep 17 00:00:00 2001 From: Agata Kosior Date: Thu, 27 Jul 2023 09:29:02 +0200 Subject: [PATCH 7/7] fix: remove unnecessary default values --- .../AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 8c22973977d0..89fb98e46411 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js @@ -31,7 +31,7 @@ const propTypes = { /* * This is a default anchor component for regular links. */ -function BaseAnchorForCommentsOnly({onPressIn = () => {}, onPressOut = () => {}, href = '', rel = '', target = '', children = null, style = {}, onPress = undefined, ...rest}) { +function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style = {}, onPress, ...rest}) { useEffect( () => () => { ReportActionContextMenu.hideContextMenu();