From f9a2e7a6e8cb86da0b926aa41068b9b7ef70a62a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marcos=20Rodriguez=20V=C3=A9lez?= Date: Sun, 3 Oct 2021 23:47:01 -0400 Subject: [PATCH] REF: Allow multiple submenus --- components/TooltipMenu.android.js | 16 +++++--- components/TooltipMenu.ios.js | 27 +++++++++++--- components/TransactionListItem.js | 43 +++++++++------------- components/TransactionsNavigationHeader.js | 14 ++----- screen/send/details.js | 37 ++++++++++--------- 5 files changed, 74 insertions(+), 63 deletions(-) diff --git a/components/TooltipMenu.android.js b/components/TooltipMenu.android.js index a2c9a4fdd..cd52eaba5 100644 --- a/components/TooltipMenu.android.js +++ b/components/TooltipMenu.android.js @@ -13,11 +13,18 @@ const ToolTipMenu = props => { }; const showMenu = () => { - let actions = props.actions.map(action => ({ id: action.id, label: action.text })); - if (props.submenu) { - actions = actions.concat(props.submenu.menuItems.map(action => ({ id: action.actionKey, label: action.actionTitle }))); + const menu = []; + for (const actions of props.actions) { + if (Array.isArray(actions)) { + for (const actionToMap of actions) { + menu.push({ id: actionToMap.id, label: actionToMap.text }); + } + } else { + menu.push({ id: actions.id, label: actions.text }); + } } - showPopupMenu(actions, handleToolTipSelection, ref.current); + + showPopupMenu(menu, handleToolTipSelection, ref.current); }; const child = (Array.isArray(props.children) ? props.children[0] : props.children) || null; @@ -36,7 +43,6 @@ export default ToolTipMenu; ToolTipMenu.propTypes = { actions: PropTypes.arrayOf(PropTypes.shape).isRequired, children: PropTypes.node.isRequired, - submenu: PropTypes.any, onPress: PropTypes.func.isRequired, isMenuPrimaryAction: PropTypes.bool, }; diff --git a/components/TooltipMenu.ios.js b/components/TooltipMenu.ios.js index 9a4405476..333fadbf2 100644 --- a/components/TooltipMenu.ios.js +++ b/components/TooltipMenu.ios.js @@ -4,13 +4,13 @@ import PropTypes from 'prop-types'; import QRCodeComponent from './QRCodeComponent'; const ToolTipMenu = props => { - const menuItems = props.actions.map(action => { + const menuItemMapped = ({ action, menuOptions }) => { const item = { actionKey: action.id, actionTitle: action.text, actionOnPress: action.onPress, icon: action.icon, - menuOptions: action.menuOptions, + menuOptions, menuTitle: action.menuTitle, }; item.menuState = action.menuStateOn ? 'on' : 'off'; @@ -19,9 +19,25 @@ const ToolTipMenu = props => { item.menuAttributes = ['disabled']; } return item; + }; + + const menuItems = props.actions.map(action => { + if (Array.isArray(action)) { + const mapped = []; + for (const actionToMap of action) { + mapped.push(menuItemMapped({ action: actionToMap })); + } + const submenu = { + menuOptions: ['displayInline'], + menuItems: mapped, + menuTitle: '', + }; + return submenu; + } else { + return menuItemMapped({ action }); + } }); const menuTitle = props.title ?? ''; - const submenu = props.submenu; const isButton = !!props.isButton; const isMenuPrimaryAction = props.isMenuPrimaryAction ? props.isMenuPrimaryAction : false; const previewQRCode = props.previewQRCode ?? false; @@ -36,7 +52,7 @@ const ToolTipMenu = props => { isMenuPrimaryAction={isMenuPrimaryAction} menuConfig={{ menuTitle, - menuItems: menuItems.concat(submenu), + menuItems, }} style={buttonStyle} > @@ -49,7 +65,7 @@ const ToolTipMenu = props => { }} menuConfig={{ menuTitle, - menuItems: menuItems.concat(submenu), + menuItems, }} {...(previewQRCode ? { @@ -70,7 +86,6 @@ export default ToolTipMenu; ToolTipMenu.propTypes = { actions: PropTypes.arrayOf(PropTypes.shape).isRequired, title: PropTypes.string, - submenu: PropTypes.object, children: PropTypes.node.isRequired, onPress: PropTypes.func.isRequired, isMenuPrimaryAction: PropTypes.bool, diff --git a/components/TransactionListItem.js b/components/TransactionListItem.js index 003a08b83..4e6e5c127 100644 --- a/components/TransactionListItem.js +++ b/components/TransactionListItem.js @@ -287,40 +287,33 @@ export const TransactionListItem = React.memo(({ item, itemPriceUnit = BitcoinUn text: loc.transactions.details_copy_block_explorer_link, icon: TransactionListItem.actionIcons.Clipboard, }, + [ + { + id: TransactionListItem.actionKeys.OpenInBlockExplorer, + text: loc.transactions.details_show_in_block_explorer, + icon: TransactionListItem.actionIcons.Link, + }, + ], ); } + if (subtitle && subtitleNumberOfLines === 1) { + actions.push([ + { + id: TransactionListItem.actionKeys.ExpandNote, + text: loc.transactions.expand_note, + icon: TransactionListItem.actionIcons.Note, + }, + ]); + } + return actions; // eslint-disable-next-line react-hooks/exhaustive-deps }, [item.hash, subtitle, rowTitle, subtitleNumberOfLines, txMetadata]); - const toolTipSubMenu = useMemo(() => { - const submenu = { - menuOptions: ['displayInline'], // <- set the `menuOptions` property - menuItems: [], - menuTitle: '', - }; - if (item.hash) { - submenu.menuItems.push({ - actionKey: TransactionListItem.actionKeys.OpenInBlockExplorer, - actionTitle: loc.transactions.details_show_in_block_explorer, - icon: TransactionListItem.actionIcons.Link, - }); - } - if (subtitle && subtitleNumberOfLines === 1) { - submenu.menuItems.push({ - actionKey: TransactionListItem.actionKeys.ExpandNote, - actionTitle: loc.transactions.expand_note, - icon: TransactionListItem.actionIcons.Note, - }); - } - return submenu; - // eslint-disable-next-line react-hooks/exhaustive-deps - }, [item.hash, subtitle, subtitleNumberOfLines]); - return ( - + {loc.lnd.title} diff --git a/screen/send/details.js b/screen/send/details.js index dcf1463be..cb05a3a19 100644 --- a/screen/send/details.js +++ b/screen/send/details.js @@ -873,10 +873,11 @@ const SendDetails = () => { actions.push([{ id: SendDetails.actionKeys.SendMax, text: loc.send.details_adv_full, disabled: balance === 0 || isSendMaxUsed }]); if (wallet.type === HDSegwitBech32Wallet.type) { - actions.push({ id: SendDetails.actionKeys.AllowRBF, text: loc.send.details_adv_fee_bump, menuStateOn: isTransactionReplaceable }); + actions.push([{ id: SendDetails.actionKeys.AllowRBF, text: loc.send.details_adv_fee_bump, menuStateOn: isTransactionReplaceable }]); } + const transactionActions = []; if (wallet.type === WatchOnlyWallet.type && wallet.isHd()) { - actions.push( + transactionActions.push( { id: SendDetails.actionKeys.ImportTransaction, text: loc.send.details_adv_import, @@ -890,34 +891,36 @@ const SendDetails = () => { ); } if (wallet.type === MultisigHDWallet.type) { - actions.push({ + transactionActions.push({ id: SendDetails.actionKeys.ImportTransactionMultsig, text: loc.send.details_adv_import, icon: SendDetails.actionIcons.ImportTransactionMultsig, }); } if (wallet.type === MultisigHDWallet.type && wallet.howManySignaturesCanWeMake() > 0) { - actions.push({ + transactionActions.push({ id: SendDetails.actionKeys.CoSignTransaction, text: loc.multisig.co_sign_transaction, icon: SendDetails.actionIcons.SignPSBT, }); } if (wallet.allowCosignPsbt()) { - actions.push({ id: SendDetails.actionKeys.SignPSBT, text: loc.send.psbt_sign, icon: SendDetails.actionIcons.SignPSBT }); + transactionActions.push({ id: SendDetails.actionKeys.SignPSBT, text: loc.send.psbt_sign, icon: SendDetails.actionIcons.SignPSBT }); } - actions.push({ - id: SendDetails.actionKeys.AddRecipient, - text: loc.send.details_add_rec_add, - icon: SendDetails.actionIcons.AddRecipient, - disabled: isSendMaxUsed, - }); - actions.push({ - id: SendDetails.actionKeys.RemoveRecipient, - text: loc.send.details_add_rec_rem, - disabled: addresses.length < 2, - icon: SendDetails.actionIcons.RemoveRecipient, - }); + actions.push(transactionActions, [ + { + id: SendDetails.actionKeys.AddRecipient, + text: loc.send.details_add_rec_add, + icon: SendDetails.actionIcons.AddRecipient, + disabled: isSendMaxUsed, + }, + { + id: SendDetails.actionKeys.RemoveRecipient, + text: loc.send.details_add_rec_rem, + disabled: addresses.length < 2, + icon: SendDetails.actionIcons.RemoveRecipient, + }, + ]); } actions.push({ id: SendDetails.actionKeys.CoinControl, text: loc.cc.header, icon: SendDetails.actionIcons.CoinControl });