From 95281e333f2fd325248a20a23ec1db5bcb907266 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Sat, 15 Aug 2020 09:48:50 -0700 Subject: [PATCH 1/4] Add link styles for sidebar footer --- src/page/HomePage/SidebarView.js | 6 +++++- src/style/StyleSheet.js | 7 +++++++ 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js index 09822274eb000..d623ef6f2e367 100644 --- a/src/page/HomePage/SidebarView.js +++ b/src/page/HomePage/SidebarView.js @@ -76,7 +76,11 @@ 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 67dc005acd15e..fb14d089de8b4 100644 --- a/src/style/StyleSheet.js +++ b/src/style/StyleSheet.js @@ -40,6 +40,13 @@ const styles = { p1: { padding: 10, }, + pr1: { + paddingRight: 4, + }, + pr2: { + paddingRight: 8, + }, + h100p: { height: '100%', }, From 792459429850f32d287a8ba6a2e8897d90dbee33 Mon Sep 17 00:00:00 2001 From: Shawn Borton Date: Sat, 15 Aug 2020 09:51:09 -0700 Subject: [PATCH 2/4] Use margin instead of padding --- src/page/HomePage/SidebarView.js | 4 ++-- src/style/StyleSheet.js | 6 +++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js index d623ef6f2e367..6b9e25f29f7eb 100644 --- a/src/page/HomePage/SidebarView.js +++ b/src/page/HomePage/SidebarView.js @@ -77,8 +77,8 @@ class SidebarView extends React.Component { )} - iOS - Android + iOS + Android Sign Out diff --git a/src/style/StyleSheet.js b/src/style/StyleSheet.js index fb14d089de8b4..8190892d1df9c 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, }, From f8b876b91aacd16a80f7a3bb8a8d8f4d0f185a2f Mon Sep 17 00:00:00 2001 From: andrew Date: Sat, 15 Aug 2020 13:20:51 -0700 Subject: [PATCH 3/4] Add link callbacks --- src/page/HomePage/SidebarView.js | 38 +++++++++++++++++++++++++++++--- 1 file changed, 35 insertions(+), 3 deletions(-) diff --git a/src/page/HomePage/SidebarView.js b/src/page/HomePage/SidebarView.js index 6b9e25f29f7eb..7e19b8f7db5cd 100644 --- a/src/page/HomePage/SidebarView.js +++ b/src/page/HomePage/SidebarView.js @@ -2,7 +2,8 @@ import React from 'react'; import _ from 'underscore'; import { View, - Image + Image, + Linking } from 'react-native'; import PropTypes from 'prop-types'; import Text from '../../components/Text'; @@ -26,6 +27,27 @@ const propTypes = { }; class SidebarView extends React.Component { + constructor(props) { + super(props); + + this.openTestFlightLink = this.openTestFlightLink.bind(this); + this.openAndroidLink = this.openAndroidLink.bind(this); + } + + /** + * Opens the link to join the iOS TestFlight + */ + openTestFlightLink() { + Linking.openURL('https://testflight.apple.com/join/vBYbMRQG'); + } + + /** + * Opens link to download the latest Android APK + */ + openAndroidLink() { + Linking.openURL('https://chat.expensify.com/app-release.apk'); + } + /** * Updates the page title to indicate there are unread reports */ @@ -77,8 +99,18 @@ class SidebarView extends React.Component { )} - iOS - Android + + iOS + + + Android + Sign Out From fba02f3b8a7b08e30f27ca1d94557c5115ad8579 Mon Sep 17 00:00:00 2001 From: andrew Date: Sat, 15 Aug 2020 16:47:17 -0700 Subject: [PATCH 4/4] Add Anchor component --- src/components/Anchor.js | 50 +++++++++++++++++++ src/components/{webView => WebView}/index.js | 0 .../{webView => WebView}/index.native.js | 0 .../Report/ReportHistoryItemFragment.js | 2 +- src/page/HomePage/SidebarView.js | 37 +++----------- 5 files changed, 59 insertions(+), 30 deletions(-) create mode 100644 src/components/Anchor.js rename src/components/{webView => WebView}/index.js (100%) rename src/components/{webView => WebView}/index.native.js (100%) 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 125b467708044..dc7a2b84d36a9 100644 --- a/src/page/HomePage/Report/ReportHistoryItemFragment.js +++ b/src/page/HomePage/Report/ReportHistoryItemFragment.js @@ -1,6 +1,6 @@ import React from 'react'; import {Text} from 'react-native'; -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 7e19b8f7db5cd..769b2287c0fe2 100644 --- a/src/page/HomePage/SidebarView.js +++ b/src/page/HomePage/SidebarView.js @@ -2,8 +2,7 @@ import React from 'react'; import _ from 'underscore'; import { View, - Image, - Linking + Image } from 'react-native'; import PropTypes from 'prop-types'; import Text from '../../components/Text'; @@ -16,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 @@ -27,27 +27,6 @@ const propTypes = { }; class SidebarView extends React.Component { - constructor(props) { - super(props); - - this.openTestFlightLink = this.openTestFlightLink.bind(this); - this.openAndroidLink = this.openAndroidLink.bind(this); - } - - /** - * Opens the link to join the iOS TestFlight - */ - openTestFlightLink() { - Linking.openURL('https://testflight.apple.com/join/vBYbMRQG'); - } - - /** - * Opens link to download the latest Android APK - */ - openAndroidLink() { - Linking.openURL('https://chat.expensify.com/app-release.apk'); - } - /** * Updates the page title to indicate there are unread reports */ @@ -99,18 +78,18 @@ class SidebarView extends React.Component { )} - iOS - - + Android - + Sign Out