diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly.js index 46a213e163eb..93e86e5171a2 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'; @@ -12,74 +12,74 @@ 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} 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, - ...windowDimensionsPropTypes, -}; - -const defaultProps = { - onPressIn: undefined, - onPressOut: undefined, - containerStyles: [], - ...anchorForCommentsOnlyDefaultProps, }; /* * This is a default anchor component for regular links. */ -function BaseAnchorForCommentsOnly(props) { +function BaseAnchorForCommentsOnly({onPressIn, onPressOut, href = '', rel = '', target = '', children = null, style = {}, onPress, ...rest}) { + useEffect( + () => () => { + ReportActionContextMenu.hideContextMenu(); + }, + [], + ); + + 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() || props.isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer}; - const isEmail = Str.isValidEmailMarkdown(props.href.replace(/mailto:/i, '')); + const defaultTextStyle = DeviceCapabilities.canUseTouchScreen() || isSmallScreenWidth ? {} : {...styles.userSelectText, ...styles.cursorPointer}; + 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 || !linkProps.href ? '_self' : props.target, + rel, + target: isEmail || !linkProps.href ? '_self' : target, }} - href={linkProps.href || props.href} + href={linkProps.href || href} onPress={(event) => { if (!linkProps.onPress) { return; @@ -93,7 +93,7 @@ function BaseAnchorForCommentsOnly(props) { // eslint-disable-next-line react/jsx-props-no-spreading {...rest} > - {props.children} + {children} @@ -101,7 +101,6 @@ function BaseAnchorForCommentsOnly(props) { } BaseAnchorForCommentsOnly.propTypes = propTypes; -BaseAnchorForCommentsOnly.defaultProps = defaultProps; BaseAnchorForCommentsOnly.displayName = 'BaseAnchorForCommentsOnly'; -export default withWindowDimensions(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, };