From 3fbaab08d7a85c37a70ed8a0cf5ce62d154b3ba8 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 21 Apr 2021 15:41:50 -1000 Subject: [PATCH 1/4] consolidate clickaway handlers --- .../Navigation/AppNavigator/AuthScreens.js | 1 + .../ClickAwayHandler.js | 12 +++++++---- .../AppNavigator/ClickAwayHandler/index.js | 3 --- .../ClickAwayHandler/index.native.js | 20 ------------------- .../AppNavigator/ModalStackNavigators.js | 1 + 5 files changed, 10 insertions(+), 27 deletions(-) rename src/libs/Navigation/AppNavigator/{ClickAwayHandler => }/ClickAwayHandler.js (55%) delete mode 100644 src/libs/Navigation/AppNavigator/ClickAwayHandler/index.js delete mode 100644 src/libs/Navigation/AppNavigator/ClickAwayHandler/index.native.js diff --git a/src/libs/Navigation/AppNavigator/AuthScreens.js b/src/libs/Navigation/AppNavigator/AuthScreens.js index 2269e198f9e5..d0c8b1988b9a 100644 --- a/src/libs/Navigation/AppNavigator/AuthScreens.js +++ b/src/libs/Navigation/AppNavigator/AuthScreens.js @@ -179,6 +179,7 @@ class AuthScreens extends React.Component { cardStyleInterpolator: modalCardStyleInterpolator, animationEnabled: true, gestureDirection: 'horizontal', + cardOverlayEnabled: true, // This is a custom prop we are passing to custom navigator so that we will know to add a Pressable overlay // when displaying a modal. This allows us to dismiss by clicking outside on web / large screens. diff --git a/src/libs/Navigation/AppNavigator/ClickAwayHandler/ClickAwayHandler.js b/src/libs/Navigation/AppNavigator/ClickAwayHandler.js similarity index 55% rename from src/libs/Navigation/AppNavigator/ClickAwayHandler/ClickAwayHandler.js rename to src/libs/Navigation/AppNavigator/ClickAwayHandler.js index 9e1daab19fa7..b7ffc5525709 100644 --- a/src/libs/Navigation/AppNavigator/ClickAwayHandler/ClickAwayHandler.js +++ b/src/libs/Navigation/AppNavigator/ClickAwayHandler.js @@ -1,15 +1,19 @@ import React from 'react'; import PropTypes from 'prop-types'; import {Pressable} from 'react-native'; -import Navigation from '../../Navigation'; -import styles from '../../../../styles/styles'; +import withWindowDimensions, {windowDimensionsPropTypes} from '../../../components/withWindowDimensions'; +import Navigation from '../Navigation'; +import styles from '../../../styles/styles'; const propTypes = { + // Whether a modal is currently being displayed isDisplayingModal: PropTypes.bool.isRequired, + + ...windowDimensionsPropTypes, }; const ClickAwayHandler = (props) => { - if (!props.isDisplayingModal) { + if (!props.isDisplayingModal || props.isSmallScreenWidth) { return null; } @@ -23,4 +27,4 @@ const ClickAwayHandler = (props) => { ClickAwayHandler.propTypes = propTypes; ClickAwayHandler.displayName = 'ClickAwayHandler'; -export default ClickAwayHandler; +export default withWindowDimensions(ClickAwayHandler); diff --git a/src/libs/Navigation/AppNavigator/ClickAwayHandler/index.js b/src/libs/Navigation/AppNavigator/ClickAwayHandler/index.js deleted file mode 100644 index 837018cba06c..000000000000 --- a/src/libs/Navigation/AppNavigator/ClickAwayHandler/index.js +++ /dev/null @@ -1,3 +0,0 @@ -import ClickAwayHandler from './ClickAwayHandler'; - -export default ClickAwayHandler; diff --git a/src/libs/Navigation/AppNavigator/ClickAwayHandler/index.native.js b/src/libs/Navigation/AppNavigator/ClickAwayHandler/index.native.js deleted file mode 100644 index 565061dadb5f..000000000000 --- a/src/libs/Navigation/AppNavigator/ClickAwayHandler/index.native.js +++ /dev/null @@ -1,20 +0,0 @@ -import React from 'react'; -import withWindowDimensions, {windowDimensionsPropTypes} from '../../../../components/withWindowDimensions'; -import ClickAwayHandler from './ClickAwayHandler'; - -const propTypes = { - ...windowDimensionsPropTypes, -}; - -const ClickAwayHandlerWithWindowDimensions = (props) => { - if (props.isSmallScreenWidth) { - return null; - } - - // eslint-disable-next-line react/jsx-props-no-spreading - return ; -}; - -ClickAwayHandlerWithWindowDimensions.propTypes = propTypes; -ClickAwayHandlerWithWindowDimensions.displayName = 'ClickAwayHandlerWithWindowDimensions'; -export default withWindowDimensions(ClickAwayHandlerWithWindowDimensions); diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index e5a39c19549f..ae0c19a805c4 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -29,6 +29,7 @@ const IOUBillModalStack = createStackNavigator(); const defaultSubRouteOptions = { cardStyle: styles.navigationScreenCardStyle, headerShown: false, + cardOverlayEnabled: true, }; const IOUBillStackNavigator = () => ( From 3de669799a817d9655e158bc2b568ddf43377258 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 21 Apr 2021 15:47:47 -1000 Subject: [PATCH 2/4] Fix regression to tapping on multiple participants --- src/ROUTES.js | 4 ++-- src/libs/Url.js | 16 ++++++++++++++++ 2 files changed, 18 insertions(+), 2 deletions(-) diff --git a/src/ROUTES.js b/src/ROUTES.js index 36d5f2117a51..7db85c957b98 100644 --- a/src/ROUTES.js +++ b/src/ROUTES.js @@ -1,5 +1,5 @@ import lodashGet from 'lodash/get'; -import {addTrailingForwardSlash} from './libs/Url'; +import {wrapWithForwardSlash} from './libs/Url'; /** * This is a file containing constants for all of the routes we want to be able to go to @@ -41,7 +41,7 @@ export default { * @returns {Object} */ parseReportRouteParams: (route) => { - if (!route.startsWith(addTrailingForwardSlash(REPORT))) { + if (!route.startsWith(wrapWithForwardSlash(REPORT))) { return {}; } diff --git a/src/libs/Url.js b/src/libs/Url.js index e166c127a83f..8ad99e37c36b 100644 --- a/src/libs/Url.js +++ b/src/libs/Url.js @@ -10,7 +10,23 @@ function addTrailingForwardSlash(url) { return url; } +/** + * Add / to the end of any URL if not present + * @param {String} url + * @returns {String} + */ +function wrapWithForwardSlash(url) { + const newUrl = addTrailingForwardSlash(url); + if (newUrl.startsWith('/')) { + return newUrl; + } + + return `/${newUrl}`; +} + + export { // eslint-disable-next-line import/prefer-default-export addTrailingForwardSlash, + wrapWithForwardSlash, }; From c0e8e8271c2290bba099af17112638af023371cb Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 21 Apr 2021 15:56:13 -1000 Subject: [PATCH 3/4] remove unneeded code. fix copy/paste comment; --- src/libs/Navigation/AppNavigator/ModalStackNavigators.js | 1 - src/libs/Url.js | 2 +- 2 files changed, 1 insertion(+), 2 deletions(-) diff --git a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js index ae0c19a805c4..e5a39c19549f 100644 --- a/src/libs/Navigation/AppNavigator/ModalStackNavigators.js +++ b/src/libs/Navigation/AppNavigator/ModalStackNavigators.js @@ -29,7 +29,6 @@ const IOUBillModalStack = createStackNavigator(); const defaultSubRouteOptions = { cardStyle: styles.navigationScreenCardStyle, headerShown: false, - cardOverlayEnabled: true, }; const IOUBillStackNavigator = () => ( diff --git a/src/libs/Url.js b/src/libs/Url.js index 8ad99e37c36b..004e9c5fe173 100644 --- a/src/libs/Url.js +++ b/src/libs/Url.js @@ -11,7 +11,7 @@ function addTrailingForwardSlash(url) { } /** - * Add / to the end of any URL if not present + * Add / to the beginning and end of any URL if not present * @param {String} url * @returns {String} */ From 1ba38af01ab17e831af924f89df74a6d3023c3b2 Mon Sep 17 00:00:00 2001 From: Marc Glasser Date: Wed, 21 Apr 2021 16:21:01 -1000 Subject: [PATCH 4/4] add an ipad-sm to make it easier to test things --- package.json | 1 + 1 file changed, 1 insertion(+) diff --git a/package.json b/package.json index 5d5f8842bed2..b8779eeeae7a 100644 --- a/package.json +++ b/package.json @@ -10,6 +10,7 @@ "android": "react-native run-android", "ios": "react-native run-ios", "ipad": "react-native run-ios --simulator=\"iPad Pro (12.9-inch) (4th generation)\"", + "ipad-sm": "react-native run-ios --simulator=\"iPad Pro (9.7-inch)\"", "desktop": "node desktop/start.js", "start": "react-native start", "web": "node web/proxy.js & webpack-dev-server --open --config config/webpack/webpack.dev.js",