From 50bd821d69a79b98434e3e3fd038f06c9d125750 Mon Sep 17 00:00:00 2001 From: AHMED Date: Fri, 4 Feb 2022 21:50:40 +0200 Subject: [PATCH 1/5] check web platform --- src/pages/settings/Payments/PaymentsPage.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index 138c30938801..b30c535b26a9 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, TouchableOpacity} from 'react-native'; +import {View, TouchableOpacity, Platform} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import PaymentMethodList from './PaymentMethodList'; @@ -290,7 +290,7 @@ class PaymentsPage extends React.Component { !this.props.isSmallScreenWidth ? styles.sidebarPopover : '', ]} > - {this.props.isSmallScreenWidth && ( + {(Platform.OS !== 'web' || this.props.isSmallScreenWidth) && ( Date: Sun, 6 Feb 2022 16:32:54 +0200 Subject: [PATCH 2/5] check popover mount postion --- src/pages/settings/Payments/PaymentsPage.js | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index b30c535b26a9..92270cc220f5 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -1,5 +1,5 @@ import React from 'react'; -import {View, TouchableOpacity, Platform} from 'react-native'; +import {View, TouchableOpacity} from 'react-native'; import {withOnyx} from 'react-native-onyx'; import PropTypes from 'prop-types'; import PaymentMethodList from './PaymentMethodList'; @@ -216,6 +216,7 @@ class PaymentsPage extends React.Component { render() { const isPayPalMeSelected = this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PAYPAL; + const isPopoverBottomMount = this.props.anchorPositionTop === 0 || this.props.isSmallScreenWidth; return ( @@ -290,7 +291,7 @@ class PaymentsPage extends React.Component { !this.props.isSmallScreenWidth ? styles.sidebarPopover : '', ]} > - {(Platform.OS !== 'web' || this.props.isSmallScreenWidth) && ( + {isPopoverBottomMount && ( Date: Sun, 6 Feb 2022 16:35:25 +0200 Subject: [PATCH 3/5] fix isPopoverBottomMount --- src/pages/settings/Payments/PaymentsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index 92270cc220f5..51f00a33c805 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -216,7 +216,7 @@ class PaymentsPage extends React.Component { render() { const isPayPalMeSelected = this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PAYPAL; - const isPopoverBottomMount = this.props.anchorPositionTop === 0 || this.props.isSmallScreenWidth; + const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth; return ( From e73f0b232283f75c18e6aec6f9c6844728925450 Mon Sep 17 00:00:00 2001 From: AHMED Date: Tue, 8 Feb 2022 07:49:08 +0200 Subject: [PATCH 4/5] add comment to isPopoverBottomMount --- src/pages/settings/Payments/PaymentsPage.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index 51f00a33c805..99f66399b9b4 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -216,6 +216,8 @@ class PaymentsPage extends React.Component { render() { const isPayPalMeSelected = this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PAYPAL; + + // determine if the popover appears from the bottom of the screen or not. const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth; return ( From 4673bf5183228ab220555d44fa5b9a357b7faa79 Mon Sep 17 00:00:00 2001 From: AHMED Date: Tue, 8 Feb 2022 20:54:59 +0200 Subject: [PATCH 5/5] update comment --- src/pages/settings/Payments/PaymentsPage.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/settings/Payments/PaymentsPage.js b/src/pages/settings/Payments/PaymentsPage.js index 99f66399b9b4..646a3f9b3e11 100644 --- a/src/pages/settings/Payments/PaymentsPage.js +++ b/src/pages/settings/Payments/PaymentsPage.js @@ -217,7 +217,7 @@ class PaymentsPage extends React.Component { render() { const isPayPalMeSelected = this.state.formattedSelectedPaymentMethod.type === CONST.PAYMENT_METHODS.PAYPAL; - // determine if the popover appears from the bottom of the screen or not. + // Determines whether or not the modal popup is mounted from the bottom of the screen instead of the side mount on Web or Desktop screens const isPopoverBottomMount = this.state.anchorPositionTop === 0 || this.props.isSmallScreenWidth; return (