From 51e29971b6776ae7479e8da7587a03d25c0a8cb0 Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 08:33:46 -0700 Subject: [PATCH 1/7] add styles to the stylesheet --- src/style/StyleSheet.js | 3 +++ 1 file changed, 3 insertions(+) diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 762becfaca49..2153f5f74fa0 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -259,6 +259,9 @@ const styles = { sidebarFooterLink: { color: '#C6C9CA', fontSize: 11, + textDecorationLine: 'none', + fontFamily: 'GTAmericaExp-Regular', + lineHeight: '20px', }, sidebarListContainer: { From 437b4539ef383736c2ed036d80013a3cd5f74ce8 Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 09:29:32 -0700 Subject: [PATCH 2/7] Rename the method to AnchorForCommentsOnly --- .../{Anchor => AnchorForCommentsOnly}/index.js | 10 +++++----- .../{Anchor => AnchorForCommentsOnly}/index.native.js | 10 +++++----- 2 files changed, 10 insertions(+), 10 deletions(-) rename src/components/{Anchor => AnchorForCommentsOnly}/index.js (85%) rename src/components/{Anchor => AnchorForCommentsOnly}/index.native.js (86%) diff --git a/src/components/Anchor/index.js b/src/components/AnchorForCommentsOnly/index.js similarity index 85% rename from src/components/Anchor/index.js rename to src/components/AnchorForCommentsOnly/index.js index eecd3e0ba78e..9eb39e1b5833 100644 --- a/src/components/Anchor/index.js +++ b/src/components/AnchorForCommentsOnly/index.js @@ -31,7 +31,7 @@ const defaultProps = { style: {}, }; -const Anchor = ({ +const AnchorForCommentsOnly = ({ href, rel, target, @@ -51,8 +51,8 @@ const Anchor = ({ ); }; -Anchor.propTypes = propTypes; -Anchor.defaultProps = defaultProps; -Anchor.displayName = 'Anchor'; +AnchorForCommentsOnly.propTypes = propTypes; +AnchorForCommentsOnly.defaultProps = defaultProps; +AnchorForCommentsOnly.displayName = 'Anchor'; -export default Anchor; +export default AnchorForCommentsOnly; diff --git a/src/components/Anchor/index.native.js b/src/components/AnchorForCommentsOnly/index.native.js similarity index 86% rename from src/components/Anchor/index.native.js rename to src/components/AnchorForCommentsOnly/index.native.js index d3115fce4e1f..c512a62eab9d 100644 --- a/src/components/Anchor/index.native.js +++ b/src/components/AnchorForCommentsOnly/index.native.js @@ -35,7 +35,7 @@ const defaultProps = { style: {}, }; -const Anchor = ({ +const AnchorForCommentsOnly = ({ href, children, style, @@ -53,8 +53,8 @@ const Anchor = ({ ); }; -Anchor.propTypes = propTypes; -Anchor.defaultProps = defaultProps; -Anchor.displayName = 'Anchor'; +AnchorForCommentsOnly.propTypes = propTypes; +AnchorForCommentsOnly.defaultProps = defaultProps; +AnchorForCommentsOnly.displayName = 'Anchor'; -export default Anchor; +export default AnchorForCommentsOnly; From 472de714767dd1aaba808b705a8a25b14f487b20 Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 09:29:45 -0700 Subject: [PATCH 3/7] Create a new anchor method that uses --- src/components/Anchor.js | 51 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 51 insertions(+) create mode 100644 src/components/Anchor.js diff --git a/src/components/Anchor.js b/src/components/Anchor.js new file mode 100644 index 000000000000..e7389bc76638 --- /dev/null +++ b/src/components/Anchor.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import {Linking, Text} from 'react-native'; + +/** + * 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 + Linking.openURL(href)} {...props}> + {children} + + ); +}; + +Anchor.propTypes = propTypes; +Anchor.defaultProps = defaultProps; +Anchor.displayName = 'Anchor'; + +export default Anchor; \ No newline at end of file From 2079e389dca94e08145f48a35653329c1e872200 Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 09:30:03 -0700 Subject: [PATCH 4/7] update ReportHistory to use new AnchorForCommentsOnly --- src/page/HomePage/Report/ReportHistoryItemFragment.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js index c42a1c5bdd8d..f08c33cb68b3 100644 --- a/src/page/HomePage/Report/ReportHistoryItemFragment.js +++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js @@ -6,7 +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'; +import AnchorForCommentsOnly from '../../../components/AnchorForCommentsOnly'; const propTypes = { // The message fragment needing to be displayed @@ -30,7 +30,7 @@ class ReportHistoryItemFragment extends React.PureComponent { // For tags, the attribute is used to be more cross-platform friendly this.customRenderers = { a: (htmlAttribs, children, convertedCSSStyles, passProps) => ( - {children} + {children} ), }; } From 5921f233a2f8a368de58da76fe41f336425ce046 Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 09:30:14 -0700 Subject: [PATCH 5/7] Update the style to remove '20px' --- src/style/StyleSheet.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 2153f5f74fa0..98fcf6396319 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -261,7 +261,7 @@ const styles = { fontSize: 11, textDecorationLine: 'none', fontFamily: 'GTAmericaExp-Regular', - lineHeight: '20px', + lineHeight: 20, }, sidebarListContainer: { From 2c810514d8d3ef9f8ca03af4dbcad49340be595b Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 09:33:11 -0700 Subject: [PATCH 6/7] Add newline at the end of the file --- src/components/Anchor.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Anchor.js b/src/components/Anchor.js index e7389bc76638..efa51ea7f401 100644 --- a/src/components/Anchor.js +++ b/src/components/Anchor.js @@ -48,4 +48,4 @@ Anchor.propTypes = propTypes; Anchor.defaultProps = defaultProps; Anchor.displayName = 'Anchor'; -export default Anchor; \ No newline at end of file +export default Anchor; From 0d63ad0f67f230f251a35b3ff14bb5d3b6b6273e Mon Sep 17 00:00:00 2001 From: Jack Nam Date: Thu, 27 Aug 2020 09:35:51 -0700 Subject: [PATCH 7/7] Update displayName for new method --- src/components/AnchorForCommentsOnly/index.js | 2 +- src/components/AnchorForCommentsOnly/index.native.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/AnchorForCommentsOnly/index.js b/src/components/AnchorForCommentsOnly/index.js index 9eb39e1b5833..ca1926d0917e 100644 --- a/src/components/AnchorForCommentsOnly/index.js +++ b/src/components/AnchorForCommentsOnly/index.js @@ -53,6 +53,6 @@ const AnchorForCommentsOnly = ({ AnchorForCommentsOnly.propTypes = propTypes; AnchorForCommentsOnly.defaultProps = defaultProps; -AnchorForCommentsOnly.displayName = 'Anchor'; +AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly'; export default AnchorForCommentsOnly; diff --git a/src/components/AnchorForCommentsOnly/index.native.js b/src/components/AnchorForCommentsOnly/index.native.js index c512a62eab9d..e55f50a5d9d2 100644 --- a/src/components/AnchorForCommentsOnly/index.native.js +++ b/src/components/AnchorForCommentsOnly/index.native.js @@ -55,6 +55,6 @@ const AnchorForCommentsOnly = ({ AnchorForCommentsOnly.propTypes = propTypes; AnchorForCommentsOnly.defaultProps = defaultProps; -AnchorForCommentsOnly.displayName = 'Anchor'; +AnchorForCommentsOnly.displayName = 'AnchorForCommentsOnly'; export default AnchorForCommentsOnly;