From c13f0cffef46c71d23c6ad4fffb976447bf1ffbe Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Fri, 22 Jan 2021 17:16:24 -0800 Subject: [PATCH 01/12] Get settings modal popping in and out from the right-side of the screen --- src/CONST.js | 1 + src/components/Modal.js | 1 + src/components/SettingsModal.js | 63 +++++++++++++++++++++++++++++++++ src/pages/SettingsPage.js | 2 -- src/pages/home/HomePage.js | 7 ++-- src/styles/getModalStyles.js | 17 +++++++++ 6 files changed, 86 insertions(+), 5 deletions(-) create mode 100644 src/components/SettingsModal.js diff --git a/src/CONST.js b/src/CONST.js index 6686f66ccb37..861523a32c0f 100644 --- a/src/CONST.js +++ b/src/CONST.js @@ -14,6 +14,7 @@ const CONST = { CENTERED: 'centered', BOTTOM_DOCKED: 'bottom_docked', POPOVER: 'popover', + RIGHT_DOCKED: 'right_docked', }, }, TIMING: { diff --git a/src/components/Modal.js b/src/components/Modal.js index 0bdfc913bd25..f692e17215c0 100644 --- a/src/components/Modal.js +++ b/src/components/Modal.js @@ -24,6 +24,7 @@ const propTypes = { CONST.MODAL.MODAL_TYPE.CENTERED, CONST.MODAL.MODAL_TYPE.BOTTOM_DOCKED, CONST.MODAL.MODAL_TYPE.POPOVER, + CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED, ]), }; diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js new file mode 100644 index 000000000000..5c47b7bcbb69 --- /dev/null +++ b/src/components/SettingsModal.js @@ -0,0 +1,63 @@ +import React, {Component} from 'react'; +import PropTypes from 'prop-types'; +import {View} from 'react-native-web'; +import {withOnyx} from 'react-native-onyx'; +import SettingsPage from '../pages/SettingsPage'; +import CONST from '../CONST'; +import themeColors from '../styles/themes/default'; +import ONYXKEYS from '../ONYXKEYS'; +import ModalWithHeader from './ModalWithHeader'; +import {redirect} from '../libs/actions/App'; +import ROUTES from '../ROUTES'; + +/** + * TODO + */ +const propTypes = { + // Title of the modal header + title: PropTypes.string, + + isVisible: PropTypes.bool, +}; + +const defaultProps = { + isVisible: false, +}; + +class SettingsModal extends Component { + constructor(props) { + super(props); + + this.onClose = this.onClose.bind(this); + } + + onClose() { + redirect(ROUTES.ROOT); + } + + render() { + return ( + <> + + + + + + + ); + } +} + +SettingsModal.propTypes = propTypes; +SettingsModal.defaultProps = defaultProps; +export default withOnyx({ + session: { + key: ONYXKEYS.SESSION, + }, +})(SettingsModal); diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js index f6c1ce6ef7b6..11fa2be5ed73 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage.js @@ -67,8 +67,6 @@ const SettingsPage = ({ > - {this.props.currentURL === '/settings' && } +
diff --git a/src/styles/getModalStyles.js b/src/styles/getModalStyles.js index 119af1f4bee0..15e35620720c 100644 --- a/src/styles/getModalStyles.js +++ b/src/styles/getModalStyles.js @@ -96,6 +96,23 @@ export default (type, windowDimensions) => { animationIn = 'fadeInLeft'; animationOut = 'fadeOutLeft'; break; + case CONST.MODAL.MODAL_TYPE.RIGHT_DOCKED: + modalStyle = { + margin: 0, + flexDirection: 'row-reverse', + justifyContent: 'end', + }; + modalContainerStyle = { + width: isSmallScreen ? '100%' : '40%', + height: '100%', + overflow: 'hidden', + marginRight: 0, + }; + + swipeDirection = 'right'; + animationIn = 'slideInRight'; + animationOut = 'slideOutLeft'; + break; default: modalStyle = {}; modalContainerStyle = {}; From 4c3915f0f1f0b8952db45814e08fc635008d606e Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Mon, 25 Jan 2021 11:33:03 -0800 Subject: [PATCH 02/12] Cleanup style for the right-docked modal header --- src/pages/SettingsPage.js | 6 ------ src/styles/getModalStyles.js | 1 + 2 files changed, 1 insertion(+), 6 deletions(-) diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js index 11fa2be5ed73..1b4d6140c658 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage.js @@ -69,12 +69,6 @@ const SettingsPage = ({ style={[ ]} > - redirect(currentlyViewedReportID !== '' - ? ROUTES.getReportRoute(currentlyViewedReportID) - : ROUTES.HOME)} - title="Settings" - /> { height: '100%', overflow: 'hidden', marginRight: 0, + paddingTop: 0, }; swipeDirection = 'right'; From 122ee3fb289163a6c86ca9a23f02c729f66b3068 Mon Sep 17 00:00:00 2001 From: Yuwen Memon Date: Mon, 25 Jan 2021 14:00:59 -0800 Subject: [PATCH 03/12] Remember current report and slide in the right direction --- src/components/SettingsModal.js | 14 ++++++++++---- src/pages/SettingsPage.js | 14 ++------------ src/pages/home/MainView.js | 23 +++++++++++++++++++---- src/styles/getModalStyles.js | 2 +- 4 files changed, 32 insertions(+), 21 deletions(-) diff --git a/src/components/SettingsModal.js b/src/components/SettingsModal.js index 5c47b7bcbb69..82877915dd7a 100644 --- a/src/components/SettingsModal.js +++ b/src/components/SettingsModal.js @@ -14,14 +14,17 @@ import ROUTES from '../ROUTES'; * TODO */ const propTypes = { - // Title of the modal header - title: PropTypes.string, - + // Is the Settings Modal visible or not? isVisible: PropTypes.bool, + + /* Onyx Props */ + // Currently viewed reportID + currentlyViewedReportID: PropTypes.string, }; const defaultProps = { isVisible: false, + currentlyViewedReportID: '', }; class SettingsModal extends Component { @@ -32,7 +35,7 @@ class SettingsModal extends Component { } onClose() { - redirect(ROUTES.ROOT); + redirect(ROUTES.getReportRoute(this.props.currentlyViewedReportID)); } render() { @@ -60,4 +63,7 @@ export default withOnyx({ session: { key: ONYXKEYS.SESSION, }, + currentlyViewedReportID: { + key: ONYXKEYS.CURRENTLY_VIEWED_REPORTID, + }, })(SettingsModal); diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js index 1b4d6140c658..d1b38f2a9bc2 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage.js @@ -33,9 +33,6 @@ const propTypes = { isOffline: PropTypes.bool, }), - // Currently viewed reportID - currentlyViewedReportID: PropTypes.string, - // The session of the logged in person session: PropTypes.shape({ // Email of the logged in person @@ -46,11 +43,10 @@ const propTypes = { const defaultProps = { myPersonalDetails: {}, network: null, - currentlyViewedReportID: '', session: {}, }; const SettingsPage = ({ - myPersonalDetails, network, session, currentlyViewedReportID, + myPersonalDetails, network, session, }) => { // On the very first sign in or after clearing storage these // details will not be present on the first render so we'll just @@ -65,10 +61,7 @@ const SettingsPage = ({ styles.settingsPageBackground, ]} > - +