diff --git a/src/components/Anchor.js b/src/components/Anchor.js new file mode 100644 index 0000000000000..c316d00588540 --- /dev/null +++ b/src/components/Anchor.js @@ -0,0 +1,50 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import _ from 'underscore'; +import {Linking} from 'react-native'; +import Text from './Text'; + +/** + * 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; diff --git a/src/components/webView/index.js b/src/components/WebView/index.js similarity index 100% rename from src/components/webView/index.js rename to src/components/WebView/index.js diff --git a/src/components/webView/index.native.js b/src/components/WebView/index.native.js similarity index 100% rename from src/components/webView/index.native.js rename to src/components/WebView/index.native.js diff --git a/src/page/HomePage/Report/ReportHistoryItemFragment.js b/src/page/HomePage/Report/ReportHistoryItemFragment.js index a3417c28e032a..6b88be6787a75 100644 --- a/src/page/HomePage/Report/ReportHistoryItemFragment.js +++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js @@ -1,5 +1,5 @@ import React from 'react'; -import WebView from '../../../components/webView'; +import WebView from '../../../components/WebView'; import Str from '../../../lib/Str'; import ReportHistoryFragmentPropTypes from './ReportHistoryFragmentPropTypes'; import styles from '../../../style/StyleSheet'; diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js index 09822274eb000..769b2287c0fe2 100644 --- a/src/page/HomePage/SidebarView.js +++ b/src/page/HomePage/SidebarView.js @@ -15,6 +15,7 @@ import {fetchAll} from '../../lib/actions/ActionsReport'; import SidebarLink from './SidebarLink'; import logo from '../../../assets/images/expensify-logo_reversed.png'; import PageTitleUpdater from '../../lib/PageTitleUpdater'; +import Anchor from '../../components/Anchor'; const propTypes = { // Toggles the hamburger menu open and closed @@ -76,7 +77,21 @@ class SidebarView extends React.Component { {this.state.userDisplayName} )} - Sign Out + + + iOS + + + Android + + Sign Out + diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index 2594c1d809542..6b8cb7fadc287 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -16,8 +16,12 @@ const colors = { const styles = { // Utility classes mr1: { - marginRight: 10, + marginRight: 4, }, + mr2: { + marginRight: 8, + }, + ml1: { marginLeft: 10, }, @@ -40,6 +44,13 @@ const styles = { p1: { padding: 10, }, + pr1: { + paddingRight: 4, + }, + pr2: { + paddingRight: 8, + }, + h100p: { height: '100%', },