FIX: Disable buttons if menu is visible (#6386)

This commit is contained in:
Marcos Rodriguez Vélez 2024-04-09 12:01:25 -04:00 committed by GitHub
parent 1f9e680413
commit 2a95f59201
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 89 additions and 15 deletions

View file

@ -12,9 +12,20 @@ interface SaveFileButtonProps {
style?: StyleProp<ViewStyle>;
afterOnPress?: () => void;
beforeOnPress?: () => Promise<void>; // Changed this line
onMenuWillHide?: () => void;
onMenuWillShow?: () => void;
}
const SaveFileButton: React.FC<SaveFileButtonProps> = ({ fileName, fileContent, children, style, beforeOnPress, afterOnPress }) => {
const SaveFileButton: React.FC<SaveFileButtonProps> = ({
fileName,
fileContent,
children,
style,
beforeOnPress,
afterOnPress,
onMenuWillHide,
onMenuWillShow,
}) => {
const actions = [
{ id: 'save', text: loc._.save, icon: actionIcons.Save },
{ id: 'share', text: loc.receive.details_share, icon: actionIcons.Share },
@ -39,7 +50,15 @@ const SaveFileButton: React.FC<SaveFileButtonProps> = ({ fileName, fileContent,
return (
// @ts-ignore: Tooltip must be refactored to use TSX}
<ToolTipMenu isButton isMenuPrimaryAction actions={actions} onPressMenuItem={handlePressMenuItem} buttonStyle={style}>
<ToolTipMenu
onMenuWillHide={onMenuWillHide}
onMenuWillShow={onMenuWillShow}
isButton
isMenuPrimaryAction
actions={actions}
onPressMenuItem={handlePressMenuItem}
buttonStyle={style}
>
{children}
</ToolTipMenu>
);

View file

@ -34,7 +34,13 @@ export const SecondButton = forwardRef<TouchableOpacity, SecondButtonProps>((pro
);
return props.onPress ? (
<TouchableOpacity accessibilityRole="button" style={[styles.button, { backgroundColor }]} {...props} ref={ref}>
<TouchableOpacity
disabled={props.disabled}
accessibilityRole="button"
style={[styles.button, { backgroundColor }]}
{...props}
ref={ref}
>
{buttonView}
</TouchableOpacity>
) : (

View file

@ -42,12 +42,16 @@ const BaseToolTipMenu = (props, ref) => {
const renderPreview = props.renderPreview ?? undefined;
const disabled = props.disabled ?? false;
const onPress = props.onPress ?? undefined;
const onMenuWillShow = props.onMenuWillShow ?? undefined;
const onMenuWillHide = props.onMenuWillHide ?? undefined;
const buttonStyle = props.buttonStyle;
return isButton ? (
<TouchableOpacity onPress={onPress} disabled={disabled} accessibilityRole="button" style={buttonStyle}>
<ContextMenuButton
ref={ref}
onMenuWillShow={onMenuWillShow}
onMenuWillHide={onMenuWillHide}
useActionSheetFallback={false}
onPressMenuItem={({ nativeEvent }) => {
props.onPressMenuItem(nativeEvent.actionKey);

View file

@ -97,7 +97,6 @@ const styles = StyleSheet.create({
justifyContent: 'space-between',
},
delete: {
color: '#d0021b',
fontSize: 15,
fontWeight: '500',
textAlign: 'center',
@ -147,6 +146,10 @@ const WalletDetails = () => {
}
}, [wallet]);
const [lightningWalletInfo, setLightningWalletInfo] = useState({});
const [isToolTipMenuVisible, setIsToolTipMenuVisible] = useState(false);
const onMenuWillShow = () => setIsToolTipMenuVisible(true);
const onMenuWillHide = () => setIsToolTipMenuVisible(false);
useEffect(() => {
if (isAdvancedModeEnabledRender && wallet.allowMasterFingerprint()) {
@ -177,6 +180,9 @@ const WalletDetails = () => {
saveText: {
color: colors.buttonTextColor,
},
delete: {
color: isToolTipMenuVisible ? colors.buttonDisabledTextColor : '#d0021b',
},
});
useEffect(() => {
if (wallet.type === LightningLdkWallet.type) {
@ -216,7 +222,7 @@ const WalletDetails = () => {
<TouchableOpacity
accessibilityRole="button"
testID="Save"
disabled={isLoading}
disabled={isLoading || isToolTipMenuVisible}
style={[styles.save, stylesHook.save]}
onPress={save}
>
@ -225,7 +231,7 @@ const WalletDetails = () => {
),
});
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [isLoading, colors, walletName, useWithHardwareWallet, hideTransactionsInWalletsList, isBIP47Enabled]);
}, [isLoading, colors, walletName, useWithHardwareWallet, hideTransactionsInWalletsList, isBIP47Enabled, isToolTipMenuVisible]);
useEffect(() => {
if (wallets.some(w => w.getID() === walletID)) {
@ -594,7 +600,11 @@ const WalletDetails = () => {
</Text>
<View style={styles.hardware}>
<BlueText onPress={() => setBackdoorBip47Pressed(prevState => prevState + 1)}>{loc.wallets.details_display}</BlueText>
<Switch value={hideTransactionsInWalletsList} onValueChange={setHideTransactionsInWalletsList} />
<Switch
disabled={isToolTipMenuVisible}
value={hideTransactionsInWalletsList}
onValueChange={setHideTransactionsInWalletsList}
/>
</View>
</>
<>
@ -647,17 +657,27 @@ const WalletDetails = () => {
</View>
</BlueCard>
{(wallet instanceof AbstractHDElectrumWallet || (wallet.type === WatchOnlyWallet.type && wallet.isHd())) && (
<ListItem onPress={navigateToAddresses} title={loc.wallets.details_show_addresses} chevron />
<ListItem disabled={isToolTipMenuVisible} onPress={navigateToAddresses} title={loc.wallets.details_show_addresses} chevron />
)}
{wallet.allowBIP47() && isBIP47Enabled && <ListItem onPress={navigateToPaymentCodes} title="Show payment codes" chevron />}
<BlueCard style={styles.address}>
<View>
<BlueSpacing20 />
<Button onPress={navigateToWalletExport} testID="WalletExport" title={loc.wallets.details_export_backup} />
<Button
disabled={isToolTipMenuVisible}
onPress={navigateToWalletExport}
testID="WalletExport"
title={loc.wallets.details_export_backup}
/>
{walletTransactionsLength > 0 && (
<>
<BlueSpacing20 />
<SaveFileButton fileName={fileName} fileContent={exportHistoryContent()}>
<SaveFileButton
onMenuWillHide={onMenuWillHide}
onMenuWillShow={onMenuWillShow}
fileName={fileName}
fileContent={exportHistoryContent()}
>
<SecondButton title={loc.wallets.details_export_history} />
</SaveFileButton>
</>
@ -666,6 +686,7 @@ const WalletDetails = () => {
<>
<BlueSpacing20 />
<SecondButton
disabled={isToolTipMenuVisible}
onPress={navigateToMultisigCoordinationSetup}
testID="MultisigCoordinationSetup"
title={loc.multisig.export_coordination_setup.replace(/^\w/, c => c.toUpperCase())}
@ -677,6 +698,7 @@ const WalletDetails = () => {
<>
<BlueSpacing20 />
<SecondButton
disabled={isToolTipMenuVisible}
onPress={navigateToViewEditCosigners}
testID="ViewEditCosigners"
title={loc.multisig.view_edit_cosigners}
@ -687,25 +709,48 @@ const WalletDetails = () => {
{wallet.allowXpub() && (
<>
<BlueSpacing20 />
<SecondButton onPress={navigateToXPub} testID="XPub" title={loc.wallets.details_show_xpub} />
<SecondButton
disabled={isToolTipMenuVisible}
onPress={navigateToXPub}
testID="XPub"
title={loc.wallets.details_show_xpub}
/>
</>
)}
{wallet.allowSignVerifyMessage() && (
<>
<BlueSpacing20 />
<SecondButton onPress={navigateToSignVerify} testID="SignVerify" title={loc.addresses.sign_title} />
<SecondButton
disabled={isToolTipMenuVisible}
onPress={navigateToSignVerify}
testID="SignVerify"
title={loc.addresses.sign_title}
/>
</>
)}
{wallet.type === LightningLdkWallet.type && (
<>
<BlueSpacing20 />
<SecondButton onPress={navigateToLdkViewLogs} testID="LdkLogs" title={loc.lnd.view_logs} />
<SecondButton
disabled={isToolTipMenuVisible}
onPress={navigateToLdkViewLogs}
testID="LdkLogs"
title={loc.lnd.view_logs}
/>
</>
)}
<BlueSpacing20 />
<BlueSpacing20 />
<TouchableOpacity accessibilityRole="button" onPress={handleDeleteButtonTapped} testID="DeleteButton">
<Text textBreakStrategy="simple" style={styles.delete}>{`${loc.wallets.details_delete}${' '}`}</Text>
<TouchableOpacity
disabled={isToolTipMenuVisible}
accessibilityRole="button"
onPress={handleDeleteButtonTapped}
testID="DeleteButton"
>
<Text
textBreakStrategy="simple"
style={[styles.delete, stylesHook.delete]}
>{`${loc.wallets.details_delete}${' '}`}</Text>
</TouchableOpacity>
<BlueSpacing20 />
<BlueSpacing20 />