Skip to content

Popover Fixes #30882

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

Merged
jasperhuangg merged 15 commits into from
Dec 14, 2023
Merged

Popover Fixes #30882

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
cfc058f
Add popover with overlay to confirm Bank Account deletion
neonbhai Nov 4, 2023
c098335
lint fix
neonbhai Nov 6, 2023
9f46423
Move onModalHide to ConfirmModal prop
neonbhai Nov 16, 2023
146570d
Improve Confirm Modal Visibility logic
neonbhai Nov 16, 2023
07ea059
Improve State Variable name
neonbhai Nov 16, 2023
9c43894
Merge branch 'Expensify:main' into popover-changes
neonbhai Nov 17, 2023
d7ead9f
Move ConfirmModal inside Popover
neonbhai Nov 26, 2023
fe6f5a9
Revert "Move ConfirmModal inside Popover"
neonbhai Nov 27, 2023
b80cbc7
Move Confirmation Modal component
neonbhai Nov 27, 2023
23f3865
Merge branch 'Expensify:main' into popover-changes
neonbhai Nov 27, 2023
228b349
Seperate closing logic for Popover and Confirm Modal
neonbhai Nov 29, 2023
1aa5fe0
Speed up Modal Visibility Time
neonbhai Dec 4, 2023
de41c2e
Fix Button onPress action
neonbhai Dec 4, 2023
34bf1da
Remove redundant state change.
neonbhai Dec 5, 2023
0ab3991
Merge branch 'Expensify:main' into popover-changes
neonbhai Dec 6, 2023
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
54 changes: 22 additions & 32 deletions src/pages/settings/Wallet/WalletPage/WalletPage.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import lodashGet from 'lodash/get';
import React, {useCallback, useEffect, useRef, useState} from 'react';
import {ActivityIndicator, InteractionManager, ScrollView, View} from 'react-native';
import {ActivityIndicator, ScrollView, View} from 'react-native';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import AddPaymentMethodMenu from '@components/AddPaymentMethodMenu';
import Button from '@components/Button';
import ConfirmContent from '@components/ConfirmContent';
import ConfirmModal from '@components/ConfirmModal';
import CurrentWalletBalance from '@components/CurrentWalletBalance';
import HeaderWithBackButton from '@components/HeaderWithBackButton';
import Icon from '@components/Icon';
Expand Down Expand Up @@ -62,7 +62,7 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
anchorPositionTop: 0,
anchorPositionRight: 0,
});
const [showConfirmDeleteContent, setShowConfirmDeleteContent] = useState(false);
const [showConfirmDeleteModal, setShowConfirmDeleteModal] = useState(false);

const hasBankAccount = !_.isEmpty(bankAccountList) || !_.isEmpty(fundList);
const hasWallet = !_.isEmpty(userWallet);
Expand Down Expand Up @@ -215,10 +215,8 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
*/
const hideDefaultDeleteMenu = useCallback(() => {
setShouldShowDefaultDeleteMenu(false);
InteractionManager.runAfterInteractions(() => {
setShowConfirmDeleteContent(false);
});
}, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteContent]);
setShowConfirmDeleteModal(false);
}, [setShouldShowDefaultDeleteMenu, setShowConfirmDeleteModal]);

const makeDefaultPaymentMethod = useCallback(() => {
const paymentCardList = fundList || {};
Expand Down Expand Up @@ -487,11 +485,9 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
top: anchorPosition.anchorPositionTop,
right: anchorPosition.anchorPositionRight,
}}
withoutOverlay
anchorRef={paymentMethodButtonRef}
onModalHide={resetSelectedPaymentMethodData}
>
{!showConfirmDeleteContent ? (
{!showConfirmDeleteModal && (
<View style={[styles.m5, !isSmallScreenWidth ? styles.sidebarPopover : '']}>
{isPopoverBottomMount && (
<MenuItem
Expand All @@ -512,34 +508,28 @@ function WalletPage({bankAccountList, cardList, fundList, isLoadingPaymentMethod
/>
)}
<Button
onPress={() => {
setShowConfirmDeleteContent(true);
}}
onPress={() => setShowConfirmDeleteModal(true)}
style={[shouldShowMakeDefaultButton ? styles.mt4 : {}]}
text={translate('common.delete')}
danger
/>
</View>
) : (
<ConfirmContent
onConfirm={() => {
deletePaymentMethod();
hideDefaultDeleteMenu();
}}
onCancel={hideDefaultDeleteMenu}
contentStyles={!isSmallScreenWidth ? [styles.sidebarPopover, styles.willChangeTransform] : undefined}
title={translate('walletPage.deleteAccount')}
prompt={translate('walletPage.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
anchorPosition={{
top: anchorPosition.anchorPositionTop,
right: anchorPosition.anchorPositionRight,
}}
shouldShowCancelButton
danger
/>
)}
<ConfirmModal
isVisible={showConfirmDeleteModal}
onConfirm={() => {
deletePaymentMethod();
hideDefaultDeleteMenu();
}}
onCancel={hideDefaultDeleteMenu}
title={translate('walletPage.deleteAccount')}
prompt={translate('walletPage.deleteConfirmation')}
confirmText={translate('common.delete')}
cancelText={translate('common.cancel')}
shouldShowCancelButton
danger
onModalHide={resetSelectedPaymentMethodData}
/>
</Popover>
</ScreenWrapper>
)}
Expand Down