Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix contextMenu on Mobile #3659

Merged
merged 10 commits into from
Jun 29, 2021
Merged

fix contextMenu on Mobile #3659

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
a679909
fix contextMenu on Mobile
Viacheslav80 Jun 17, 2021
eb94af7
fix eslint
Viacheslav80 Jun 17, 2021
e429d0b
add BaseRenderHTML
Viacheslav80 Jun 22, 2021
f0cca6c
defaultProp textSelectable
Viacheslav80 Jun 24, 2021
e2fc7ec
fix errors
Viacheslav80 Jun 24, 2021
69722fe
fix comments
Viacheslav80 Jun 25, 2021
ca56242
merge with main
Viacheslav80 Jun 25, 2021
1111fa3
add isSmallScreenWidth in RenderHTML + ReportActionItemFragment
Viacheslav80 Jun 27, 2021
44cf52a
fix debug prop
Viacheslav80 Jun 28, 2021
a1f2c94
fix selection on longPress
Viacheslav80 Jun 29, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 10 additions & 0 deletions src/components/PressableWithSecondaryInteraction/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think we support this pattern in Class component yet.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good catch! I will create a follow-up to clean this up!

e.preventDefault();
}

/**
Expand Down
59 changes: 32 additions & 27 deletions src/components/RenderHTML.js → src/components/RenderHTML/BaseRenderHTML.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;

Expand Down Expand Up @@ -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}
Expand All @@ -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;
21 changes: 21 additions & 0 deletions src/components/RenderHTML/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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}
/>
);

roryabraham marked this conversation as resolved.
Show resolved Hide resolved
RenderHTML.displayName = 'RenderHTML';
RenderHTML.propTypes = propTypes;
RenderHTML.defaultProps = defaultProps;

export default withWindowDimensions(RenderHTML);
19 changes: 19 additions & 0 deletions src/components/RenderHTML/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
15 changes: 15 additions & 0 deletions src/components/RenderHTML/renderHTMLPropTypes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
import PropTypes from 'prop-types';
roryabraham marked this conversation as resolved.
Show resolved Hide resolved

const propTypes = {
/** HTML string to render */
html: PropTypes.string.isRequired,

/** Optional debug flag */
debug: PropTypes.bool,
};

const defaultProps = {
debug: false,
};

export {propTypes, defaultProps};
7 changes: 5 additions & 2 deletions src/pages/home/report/ReportActionItemFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand All @@ -23,6 +24,8 @@ const propTypes = {

/** Does this fragment belong to a reportAction that has not yet loaded? */
loading: PropTypes.bool,

...windowDimensionsPropTypes,
};

const defaultProps = {
Expand Down Expand Up @@ -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)}
Expand Down Expand Up @@ -109,4 +112,4 @@ ReportActionItemFragment.propTypes = propTypes;
ReportActionItemFragment.defaultProps = defaultProps;
ReportActionItemFragment.displayName = 'ReportActionItemFragment';

export default ReportActionItemFragment;
export default withWindowDimensions(ReportActionItemFragment);