Merge pull request #3977 from BlueWallet/tooltipinlioner

REF: Allow multiple submenus

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,
 };

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,

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 (
     <View style={styles.container}>
-      <ToolTipMenu actions={toolTipActions} submenu={toolTipSubMenu} onPress={onToolTipPress}>
+      <ToolTipMenu actions={toolTipActions} onPress={onToolTipPress}>
         <BlueListItem
           leftAvatar={avatar}
           title={title}

components/TransactionsNavigationHeader.js

@@ -168,19 +168,14 @@ export default class TransactionsNavigationHeader extends Component {
       text: loc.lnd.refill_card,
       icon: TransactionsNavigationHeader.actionIcons.RefillWithBank,
     },
-  ];
-
-  toolTipSubmenuActions = {
-    menuOptions: ['displayInline'], // <- set the `menuOptions` property
-    menuTitle: '',
-    menuItems: [
+    [
       {
-        actionKey: TransactionsNavigationHeader.actionKeys.Exchange,
-        actionTitle: loc.lnd.exchange,
+        id: TransactionsNavigationHeader.actionKeys.Exchange,
+        text: loc.lnd.exchange,
         icon: TransactionsNavigationHeader.actionIcons.Exchange,
       },
     ],
-  };
+  ];
 
   render() {
     const balance =
@@ -258,7 +253,6 @@ export default class TransactionsNavigationHeader extends Component {
             isButton
             onPress={this.manageFundsPressed}
             actions={this.toolTipMenuActions}
-            submenu={this.toolTipSubmenuActions}
             buttonStyle={styles.manageFundsButton}
           >
             <Text style={styles.manageFundsButtonText}>{loc.lnd.title}</Text>

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 });