Merge pull request #3659 from Viacheslav80/fix_copy_message_menu

fix contextMenu on Mobile
Expensify · Jun 29, 2021 · b5a3bab · b5a3bab
2 parents 5cde3ca + a1f2c94
commit b5a3bab
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 29 deletions.
diff --git a/src/components/PressableWithSecondaryInteraction/index.js b/src/components/PressableWithSecondaryInteraction/index.js
@@ -22,10 +22,20 @@ class PressableWithSecondaryInteraction extends Component {
             this.props.forwardedRef(this.pressableRef);
         }
         this.pressableRef.addEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
+        this.pressableRef.addEventListener('touchstart', this.preventDefault);
     }
 
     componentWillUnmount() {
         this.pressableRef.removeEventListener('contextmenu', this.executeSecondaryInteractionOnContextMenu);
+        this.pressableRef.removeEventListener('touchstart', this.preventDefault);
+    }
+
+    /**
+     * @param {touchstart} e - TouchEvent.
+     * https://developer.mozilla.org/en-US/docs/Web/API/TouchEvent
+     */
+    preventDefault = (e) => {
+        e.preventDefault();
     }
 
     /**

diff --git a/src/components/RenderHTML.js → src/components/RenderHTML/BaseRenderHTML.js b/src/components/RenderHTML.js → src/components/RenderHTML/BaseRenderHTML.js
@@ -1,23 +1,38 @@
 /* eslint-disable react/prop-types */
 import _ from 'underscore';
 import React from 'react';
-import PropTypes from 'prop-types';
 import {useWindowDimensions, TouchableOpacity} from 'react-native';
 import HTML, {
     defaultHTMLElementModels,
     TNodeChildrenRenderer,
     splitBoxModelStyle,
 } from 'react-native-render-html';
-import Config from '../CONFIG';
-import styles, {webViewStyles, getFontFamilyMonospace} from '../styles/styles';
-import fontFamily from '../styles/fontFamily';
-import AnchorForCommentsOnly from './AnchorForCommentsOnly';
-import InlineCodeBlock from './InlineCodeBlock';
-import AttachmentModal from './AttachmentModal';
-import ThumbnailImage from './ThumbnailImage';
-import variables from '../styles/variables';
-import themeColors from '../styles/themes/default';
-import Text from './Text';
+import PropTypes from 'prop-types';
+import Config from '../../CONFIG';
+import styles, {webViewStyles, getFontFamilyMonospace} from '../../styles/styles';
+import fontFamily from '../../styles/fontFamily';
+import AnchorForCommentsOnly from '../AnchorForCommentsOnly';
+import InlineCodeBlock from '../InlineCodeBlock';
+import AttachmentModal from '../AttachmentModal';
+import ThumbnailImage from '../ThumbnailImage';
+import variables from '../../styles/variables';
+import themeColors from '../../styles/themes/default';
+import Text from '../Text';
+import {
+    propTypes as renderHTMLPropTypes,
+    defaultProps as renderHTMLDefaultProps,
+} from './renderHTMLPropTypes';
+
+const propTypes = {
+    /** Whether text elements should be selectable */
+    textSelectable: PropTypes.bool,
+    ...renderHTMLPropTypes,
+};
+
+const defaultProps = {
+    textSelectable: false,
+    ...renderHTMLDefaultProps,
+};
 
 const MAX_IMG_DIMENSIONS = 512;
 
@@ -192,20 +207,12 @@ const renderers = {
     edited: EditedRenderer,
 };
 
-const propTypes = {
-    /** HTML string to render */
-    html: PropTypes.string.isRequired,
-
-    /** Optional debug flag */
-    debug: PropTypes.bool,
-};
-
-const RenderHTML = ({html, debug = false}) => {
+const BaseRenderHTML = ({html, debug, textSelectable}) => {
     const {width} = useWindowDimensions();
     const containerWidth = width * 0.8;
     return (
         <HTML
-            textSelectable
+            textSelectable={textSelectable}
             renderers={renderers}
             baseStyle={webViewStyles.baseFontStyle}
             tagsStyles={webViewStyles.tagStyles}
@@ -223,10 +230,8 @@ const RenderHTML = ({html, debug = false}) => {
     );
 };
 
-RenderHTML.displayName = 'RenderHTML';
-RenderHTML.propTypes = propTypes;
-RenderHTML.defaultProps = {
-    debug: false,
-};
+BaseRenderHTML.displayName = 'BaseRenderHTML';
+BaseRenderHTML.propTypes = propTypes;
+BaseRenderHTML.defaultProps = defaultProps;
 
-export default RenderHTML;
+export default BaseRenderHTML;
diff --git a/src/components/RenderHTML/index.js b/src/components/RenderHTML/index.js
@@ -0,0 +1,21 @@
+import React from 'react';
+import BaseRenderHTML from './BaseRenderHTML';
+import withWindowDimensions from '../withWindowDimensions';
+import {
+    propTypes,
+    defaultProps,
+} from './renderHTMLPropTypes';
+
+const RenderHTML = ({html, debug, isSmallScreenWidth}) => (
+    <BaseRenderHTML
+        textSelectable={!isSmallScreenWidth}
+        html={html}
+        debug={debug}
+    />
+);
+
+RenderHTML.displayName = 'RenderHTML';
+RenderHTML.propTypes = propTypes;
+RenderHTML.defaultProps = defaultProps;
+
+export default withWindowDimensions(RenderHTML);
diff --git a/src/components/RenderHTML/index.native.js b/src/components/RenderHTML/index.native.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import BaseRenderHTML from './BaseRenderHTML';
+import {
+    propTypes,
+    defaultProps,
+} from './renderHTMLPropTypes';
+
+const RenderHTML = ({html, debug}) => (
+    <BaseRenderHTML
+        html={html}
+        debug={debug}
+    />
+);
+
+RenderHTML.displayName = 'RenderHTML';
+RenderHTML.propTypes = propTypes;
+RenderHTML.defaultProps = defaultProps;
+
+export default RenderHTML;
diff --git a/src/components/RenderHTML/renderHTMLPropTypes.js b/src/components/RenderHTML/renderHTMLPropTypes.js
@@ -0,0 +1,15 @@
+import PropTypes from 'prop-types';
+
+const propTypes = {
+    /** HTML string to render */
+    html: PropTypes.string.isRequired,
+
+    /** Optional debug flag */
+    debug: PropTypes.bool,
+};
+
+const defaultProps = {
+    debug: false,
+};
+
+export {propTypes, defaultProps};
diff --git a/src/pages/home/report/ReportActionItemFragment.js b/src/pages/home/report/ReportActionItemFragment.js
@@ -10,6 +10,7 @@ import RenderHTML from '../../../components/RenderHTML';
 import Text from '../../../components/Text';
 import Tooltip from '../../../components/Tooltip';
 import {isSingleEmoji} from '../../../libs/ValidationUtils';
+import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions';
 
 const propTypes = {
     /** The message fragment needing to be displayed */
@@ -23,6 +24,8 @@ const propTypes = {
 
     /** Does this fragment belong to a reportAction that has not yet loaded? */
     loading: PropTypes.bool,
+
+    ...windowDimensionsPropTypes,
 };
 
 const defaultProps = {
@@ -58,7 +61,7 @@ class ReportActionItemFragment extends React.PureComponent {
                         />
                     ) : (
                         <Text
-                            selectable
+                            selectable={!this.props.isSmallScreenWidth}
                             style={isSingleEmoji(fragment.text) ? styles.singleEmojiText : undefined}
                         >
                             {Str.htmlDecode(fragment.text)}
@@ -109,4 +112,4 @@ ReportActionItemFragment.propTypes = propTypes;
 ReportActionItemFragment.defaultProps = defaultProps;
 ReportActionItemFragment.displayName = 'ReportActionItemFragment';
 
-export default ReportActionItemFragment;
+export default withWindowDimensions(ReportActionItemFragment);