From 7b72e06501d37c194c83dcf454cd286617775ade Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 22 Nov 2021 22:55:23 +0530 Subject: [PATCH 1/6] use Text instead of Pressable to fix the UI overflow issue and enable wrapping --- .../BaseAnchorForCommentsOnly/index.js | 17 ++++---- .../BaseAnchorForCommentsOnly/index.native.js | 19 ++++---- .../index.android.js | 31 +++++++------ .../index.ios.js | 43 ++++++++++--------- .../index.js | 7 +-- ...ssableWithSecondaryInteractionPropTypes.js | 9 ++++ 6 files changed, 72 insertions(+), 54 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js index 295c6a6541c8..a28a298a491d 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js @@ -32,16 +32,17 @@ const BaseAnchorForCommentsOnly = (props) => { ) : ( { - showContextMenu( - CONTEXT_MENU_TYPES.LINK, - event, - props.href, - lodashGet(linkRef, 'current'), - ); - } + (event) => { + showContextMenu( + CONTEXT_MENU_TYPES.LINK, + event, + props.href, + lodashGet(linkRef, 'current'), + ); } + } > linkRef = el} diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js index 49a3b581e27b..7a105468424a 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js @@ -35,16 +35,17 @@ const BaseAnchorForCommentsOnly = (props) => { ) : ( { - showContextMenu( - CONTEXT_MENU_TYPES.LINK, - event, - props.href, - lodashGet(linkRef, 'current'), - ); - } - } + (event) => { + showContextMenu( + CONTEXT_MENU_TYPES.LINK, + event, + props.href, + lodashGet(linkRef, 'current'), + ); + } + } onPress={() => Linking.openURL(props.href)} > ( - handleLongPress(event, props)} - onPressOut={props.onPressOut} - // eslint-disable-next-line react/jsx-props-no-spreading - {...(_.omit(props, 'onLongPress'))} - > - {props.children} - -); +const PressableWithSecondaryInteraction = (props) => { + const Node = props.inline ? RNText : Pressable; + return ( + handleLongPress(event, props)} + onPressOut={props.onPressOut} + // eslint-disable-next-line react/jsx-props-no-spreading + {...(_.omit(props, 'onLongPress'))} + > + {props.children} + + ); +}; PressableWithSecondaryInteraction.propTypes = propTypes; PressableWithSecondaryInteraction.defaultProps = defaultProps; diff --git a/src/components/PressableWithSecondaryInteraction/index.ios.js b/src/components/PressableWithSecondaryInteraction/index.ios.js index 20c68d523fae..5a3df0c76d98 100644 --- a/src/components/PressableWithSecondaryInteraction/index.ios.js +++ b/src/components/PressableWithSecondaryInteraction/index.ios.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React, {forwardRef} from 'react'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; -import {Pressable} from 'react-native'; +import {Pressable, Text as RNText} from 'react-native'; import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes'; /** @@ -10,25 +10,28 @@ import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTy * @param {Object} props * @returns {React.Component} */ -const PressableWithSecondaryInteraction = props => ( - { - e.preventDefault(); - ReactNativeHapticFeedback.trigger('selection', { - enableVibrateFallback: true, - }); - props.onSecondaryInteraction(e); - }} - onPressOut={props.onPressOut} - // eslint-disable-next-line react/jsx-props-no-spreading - {...(_.omit(props, 'onLongPress'))} - > - {props.children} - -); +const PressableWithSecondaryInteraction = (props) => { + const Node = props.inline ? RNText : Pressable; + return ( + { + e.preventDefault(); + ReactNativeHapticFeedback.trigger('selection', { + enableVibrateFallback: true, + }); + props.onSecondaryInteraction(e); + }} + onPressOut={props.onPressOut} + // eslint-disable-next-line react/jsx-props-no-spreading + {...(_.omit(props, 'onLongPress'))} + > + {props.children} + + ); +}; PressableWithSecondaryInteraction.propTypes = propTypes; PressableWithSecondaryInteraction.defaultProps = defaultProps; diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index d490ddde0f22..0199f6609e0a 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,6 +1,6 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {Pressable} from 'react-native'; +import {Pressable, Text as RNText} from 'react-native'; import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes'; /** @@ -39,8 +39,9 @@ class PressableWithSecondaryInteraction extends Component { render() { const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']); + const Node = this.props.inline ? RNText : Pressable; return ( - {this.props.children} - + ); } } diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js index b0a2fa1982a3..22a27b97f03f 100644 --- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js +++ b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js @@ -21,6 +21,14 @@ const propTypes = { /** Prevent the default ContextMenu on web/Desktop */ preventDefaultContentMenu: PropTypes.bool, + + /** Use Text instead of Presable to create inline layout. + * It has few limitations in comparison to Pressable. + * + * - No support for delayLongPress. + * - No support for pressIn and pressOut events. + */ + inline: PropTypes.bool, }; const defaultProps = { @@ -28,6 +36,7 @@ const defaultProps = { onPressIn: () => {}, onPressOut: () => {}, preventDefaultContentMenu: true, + inline: false, }; export {propTypes, defaultProps}; From 029d09fede820fce63775ca733b8f5c64f11238b Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Mon, 22 Nov 2021 22:56:02 +0530 Subject: [PATCH 2/6] Remove unnecessary longpressdelay for Web. --- src/components/PressableWithSecondaryInteraction/index.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 0199f6609e0a..0ec25410cad9 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -43,7 +43,6 @@ class PressableWithSecondaryInteraction extends Component { return ( Date: Mon, 22 Nov 2021 23:13:59 +0530 Subject: [PATCH 3/6] LongPress fix for web. --- .../PressableWithSecondaryInteraction/index.js | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 0ec25410cad9..97e3bf947c8f 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,7 +1,8 @@ import _ from 'underscore'; import React, {Component} from 'react'; -import {Pressable, Text as RNText} from 'react-native'; +import {Pressable} from 'react-native'; import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes'; +import styles from '../../styles/styles'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed, or right-clicked. @@ -39,9 +40,11 @@ class PressableWithSecondaryInteraction extends Component { render() { const defaultPressableProps = _.omit(this.props, ['onSecondaryInteraction', 'children', 'onLongPress']); - const Node = this.props.inline ? RNText : Pressable; + + // On Web, Text does not support LongPress events thus manage inline mode with styling instead of using Text. return ( - {this.props.children} - + ); } } From 78d8e433a3a687d6eca31ed3cd903881f1799663 Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 25 Nov 2021 01:51:43 +0530 Subject: [PATCH 4/6] typo --- .../pressableWithSecondaryInteractionPropTypes.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js index 22a27b97f03f..619c9ec00c76 100644 --- a/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js +++ b/src/components/PressableWithSecondaryInteraction/pressableWithSecondaryInteractionPropTypes.js @@ -22,11 +22,13 @@ const propTypes = { /** Prevent the default ContextMenu on web/Desktop */ preventDefaultContentMenu: PropTypes.bool, - /** Use Text instead of Presable to create inline layout. + /** Use Text instead of Pressable to create inline layout. * It has few limitations in comparison to Pressable. * * - No support for delayLongPress. * - No support for pressIn and pressOut events. + * + * Note: Web uses styling instead of Text due to no support of LongPress. Thus above pointers are not valid for web. */ inline: PropTypes.bool, }; From b5ed67bb02aa4096e810db83ef0a20e2c932e4ff Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 25 Nov 2021 03:33:10 +0530 Subject: [PATCH 5/6] Comments --- .../PressableWithSecondaryInteraction/index.android.js | 7 ++++--- .../PressableWithSecondaryInteraction/index.ios.js | 7 ++++--- 2 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/PressableWithSecondaryInteraction/index.android.js b/src/components/PressableWithSecondaryInteraction/index.android.js index 79fadcdb04cd..b81cf77a7adf 100644 --- a/src/components/PressableWithSecondaryInteraction/index.android.js +++ b/src/components/PressableWithSecondaryInteraction/index.android.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import React, {forwardRef} from 'react'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; import {Pressable, Platform, Text as RNText} from 'react-native'; -import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes'; +import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; /** * Triggers haptic feedback, and calls onSecondaryInteraction @@ -32,6 +32,7 @@ function handleLongPress(event, props) { * @returns {React.Component} */ const PressableWithSecondaryInteraction = (props) => { + // Use Text node for inline mode to prevent content overflow. const Node = props.inline ? RNText : Pressable; return ( { ); }; -PressableWithSecondaryInteraction.propTypes = propTypes; -PressableWithSecondaryInteraction.defaultProps = defaultProps; +PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes; +PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps; PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; export default forwardRef((props, ref) => ( diff --git a/src/components/PressableWithSecondaryInteraction/index.ios.js b/src/components/PressableWithSecondaryInteraction/index.ios.js index 5a3df0c76d98..4d11ef538976 100644 --- a/src/components/PressableWithSecondaryInteraction/index.ios.js +++ b/src/components/PressableWithSecondaryInteraction/index.ios.js @@ -2,7 +2,7 @@ import _ from 'underscore'; import React, {forwardRef} from 'react'; import ReactNativeHapticFeedback from 'react-native-haptic-feedback'; import {Pressable, Text as RNText} from 'react-native'; -import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes'; +import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; /** * This is a special Pressable that calls onSecondaryInteraction when LongPressed. @@ -11,6 +11,7 @@ import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTy * @returns {React.Component} */ const PressableWithSecondaryInteraction = (props) => { + // Use Text node for inline mode to prevent content overflow. const Node = props.inline ? RNText : Pressable; return ( { ); }; -PressableWithSecondaryInteraction.propTypes = propTypes; -PressableWithSecondaryInteraction.defaultProps = defaultProps; +PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes; +PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps; PressableWithSecondaryInteraction.displayName = 'PressableWithSecondaryInteraction'; export default forwardRef((props, ref) => ( From 5ce1b2cedc08dddd0f8dea4a38be0fcce933d05e Mon Sep 17 00:00:00 2001 From: Rajat Parashar Date: Thu, 25 Nov 2021 15:56:24 +0530 Subject: [PATCH 6/6] Linting issues --- .../BaseAnchorForCommentsOnly/index.js | 1 + .../BaseAnchorForCommentsOnly/index.native.js | 1 + src/components/AnchorForCommentsOnly/index.js | 10 ++++------ .../PressableWithSecondaryInteraction/index.js | 6 +++--- 4 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js index 1cc01f011eea..ef9347c2f20b 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.js @@ -15,6 +15,7 @@ import fileDownload from '../../../libs/fileDownload'; */ const BaseAnchorForCommentsOnly = (props) => { let linkRef; + // eslint-disable-next-line react/forbid-foreign-prop-types const rest = _.omit(props, _.keys(anchorForCommentsOnlyPropTypes.propTypes)); return ( props.isAttachment diff --git a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js index 7a463ed3431f..a15b74ea93b4 100644 --- a/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js +++ b/src/components/AnchorForCommentsOnly/BaseAnchorForCommentsOnly/index.native.js @@ -16,6 +16,7 @@ import styles from '../../../styles/styles'; */ const BaseAnchorForCommentsOnly = (props) => { let linkRef; + // eslint-disable-next-line react/forbid-foreign-prop-types const rest = _.omit(props, _.keys(anchorForCommentsOnlyPropTypes.propTypes)); return ( props.isAttachment diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js index 556c2c577d87..55dc0b3154ef 100644 --- a/src/components/AnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/index.js @@ -1,10 +1,7 @@ import _ from 'underscore'; import React from 'react'; import PropTypes from 'prop-types'; -import { - propTypes as anchorForCommentsOnlyPropTypes, - defaultProps as anchorForCommentsOnlyDefaultProps, -} from './anchorForCommentsOnlyPropTypes'; +import * as anchorForCommentsOnlyPropTypes from './anchorForCommentsOnlyPropTypes'; import BaseAnchorForCommentsOnly from './BaseAnchorForCommentsOnly'; import addEncryptedAuthTokenToURL from '../../libs/addEncryptedAuthTokenToURL'; @@ -12,12 +9,13 @@ const propTypes = { /** Do we need an auth token to view this link or download the remote resource? */ isAuthTokenRequired: PropTypes.bool, - ...anchorForCommentsOnlyPropTypes, + // eslint-disable-next-line react/forbid-foreign-prop-types + ...anchorForCommentsOnlyPropTypes.propTypes, }; const defaultProps = { isAuthTokenRequired: false, - ...anchorForCommentsOnlyDefaultProps, + ...anchorForCommentsOnlyPropTypes.defaultProps, }; /* diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js index 97e3bf947c8f..c14d0576a5aa 100644 --- a/src/components/PressableWithSecondaryInteraction/index.js +++ b/src/components/PressableWithSecondaryInteraction/index.js @@ -1,7 +1,7 @@ import _ from 'underscore'; import React, {Component} from 'react'; import {Pressable} from 'react-native'; -import {propTypes, defaultProps} from './pressableWithSecondaryInteractionPropTypes'; +import * as pressableWithSecondaryInteractionPropTypes from './pressableWithSecondaryInteractionPropTypes'; import styles from '../../styles/styles'; /** @@ -59,8 +59,8 @@ class PressableWithSecondaryInteraction extends Component { } } -PressableWithSecondaryInteraction.propTypes = propTypes; -PressableWithSecondaryInteraction.defaultProps = defaultProps; +PressableWithSecondaryInteraction.propTypes = pressableWithSecondaryInteractionPropTypes.propTypes; +PressableWithSecondaryInteraction.defaultProps = pressableWithSecondaryInteractionPropTypes.defaultProps; export default React.forwardRef((props, ref) => ( // eslint-disable-next-line react/jsx-props-no-spreading