Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Fix: Missing PayPal account when trying to delete it #7571

Merged
merged 5 commits into from
Feb 9, 2022
Merged

Fix: Missing PayPal account when trying to delete it #7571

Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
50bd821
check web platform
ahmdshrif Feb 4, 2022
0c54037
check popover mount postion
ahmdshrif Feb 6, 2022
624aabb
fix isPopoverBottomMount
ahmdshrif Feb 6, 2022
e73f0b2
add comment to isPopoverBottomMount
ahmdshrif Feb 8, 2022
4673bf5
update comment
ahmdshrif Feb 8, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions src/pages/settings/Payments/PaymentsPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -290,7 +290,7 @@ class PaymentsPage extends React.Component {
!this.props.isSmallScreenWidth ? styles.sidebarPopover : '',
]}
>
{this.props.isSmallScreenWidth && (
{(Platform.OS !== 'web' || this.props.isSmallScreenWidth) && (
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please read the style guide. We don't do this. If you need to run something on native then created a index.native.js file.

Have you tested this on Ipad or Android Tab?

Copy link
Contributor Author

@ahmdshrif ahmdshrif Feb 4, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@parasharrajat yes test it and work fine on iPad.
I think of doing this change.

render() {
...
  const isPopoverBottomMounte = this.props.anchorPositionTop === 0 || this.props.isSmallScreenWidth
Suggested change
{(Platform.OS !== 'web' || this.props.isSmallScreenWidth) && (
{isPopoverBottomMounte && (

sense model comes from down in case of this value with 0 or issmalScreen true.

this value is 0 in native all time.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

this is the new change I mention from iPad

Screen Shot 2022-02-05 at 12 46 50 AM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do you think we can use props.isMediumScreenWidth here?

Copy link
Contributor Author

@ahmdshrif ahmdshrif Feb 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

not work with landscape on the tablet.

we need a Paypal account to appear when the Popover comes from the bottom

and in native it comes from a bottom in all cases.
on the web comes from a bottom when the screen is small only.

so that is why I go with this change

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. But depending on this condition is a hack. We should not depend on unrelated props. it can break easily.

If you want to show this on the native and Mobile web, then create a utility like canFocusInputOnScreenFocus.

a Name could be ShouldShowOnBottomDockedPopover

Copy link
Contributor Author

@ahmdshrif ahmdshrif Feb 7, 2022 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

it's not an unrelated state if you change the this.state.anchorPositionTop to not be 0 then
the popover will not be from the bottom and then we will need to disable the Paypal account view.
like on the web here.

so I don't prefer to make a new utility for it may be in the future we need to not render it from the bottom in some native cases.
we will just change the state anchorPositionTop this will render the popover from click place and will disable Paypal view as expected. on one change.

Screen Shot 2022-02-04 at 10 00 59 PM

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Ok. I don't mind this as well. Leaving this to @thienlnam.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't mind this solution, but can we get a better comment to clarify what this condition means? Variable name alone is not clear enough for me

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@thienlnam yes , i add it now

<MenuItem
title={this.state.formattedSelectedPaymentMethod.title}
icon={this.state.formattedSelectedPaymentMethod.icon}
Expand Down