Skip to content

Enable right-clicking on links for web #293

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

Merged
thienlnam merged 2 commits into from
Aug 25, 2020
Merged

Enable right-clicking on links for web #293

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
5f611f2
Implement a custom renderer for anchor tags
tgolen Aug 25, 2020
561243e
Fix import path
tgolen Aug 25, 2020
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
48 changes: 48 additions & 0 deletions src/components/Anchor/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,48 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';

/**
* Text based component that is passed a URL to open onPress
*/

const propTypes = {
// The URL to open
href: PropTypes.string.isRequired,

// Any children to display
children: PropTypes.node,

// Any additional styles to apply
// eslint-disable-next-line react/forbid-prop-types
style: PropTypes.any,
};

const defaultProps = {
children: null,
style: {},
};

const Anchor = ({
href,
children,
style,
...props
}) => {
// If the style prop is an array of styles, we need to mix them all together
const mergedStyles = !_.isArray(style) ? style : _.reduce(style, (finalStyles, s) => ({
...finalStyles,
...s
}), {});

return (
// eslint-disable-next-line react/jsx-props-no-spreading
<a style={mergedStyles} href={href} {...props}>{children}</a>
);
};

Anchor.propTypes = propTypes;
Anchor.defaultProps = defaultProps;
Anchor.displayName = 'Anchor';

export default Anchor;
3 changes: 1 addition & 2 deletions src/components/Anchor.js → src/components/Anchor/index.native.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,7 @@
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'underscore';
import {Linking} from 'react-native';
import Text from './Text';
import {Linking, Text} from 'react-native';

/**
* Text based component that is passed a URL to open onPress
Expand Down
10 changes: 10 additions & 0 deletions src/page/HomePage/Report/ReportHistoryItemFragment.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import Str from '../../../lib/Str';
import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes';
import styles, {webViewStyles} from '../../../style/StyleSheet';
import Text from '../../../components/Text';
import Anchor from '../../../components/Anchor';

const propTypes = {
// The message fragment needing to be displayed
Expand All @@ -24,6 +25,14 @@ class ReportHistoryItemFragment extends React.PureComponent {
super(props);

this.alterNode = this.alterNode.bind(this);

// Define the custom render methods
// For <a> tags, the <Anchor> attribute is used to be more cross-platform friendly
this.customRenderers = {
a: (htmlAttribs, children, convertedCSSStyles, passProps) => (
<Anchor href={htmlAttribs.href} style={passProps.style} key={passProps.key}>{children}</Anchor>
),
};
}

/**
Expand Down Expand Up @@ -51,6 +60,7 @@ class ReportHistoryItemFragment extends React.PureComponent {
return fragment.html !== fragment.text
? (
<HTML
renderers={this.customRenderers}
baseFontStyle={webViewStyles.baseFontStyle}
tagsStyles={webViewStyles.tagStyles}
onLinkPress={(event, href) => Linking.openURL(href)}
Expand Down