Merge pull request #2971 from react-cat/2860-account-switch-tooltip-s…

…hould-not-hide-user-menu 2860 account switch tooltip should not hide user menu
bitshares · Aug 8, 2019 · 22d9343 · 22d9343
2 parents 57486b1 + f0d5fc5
commit 22d9343
Showing 1 changed file with 24 additions and 2 deletions.
diff --git a/app/components/Layout/Header.jsx b/app/components/Layout/Header.jsx
@@ -55,6 +55,7 @@ class Header extends React.Component {
             hasWithdrawalModalBeenShown: false
         };
 
+        this._accountNotificationActiveKeys = [];
         this.unlisten = null;
         this._toggleAccountDropdownMenu = this._toggleAccountDropdownMenu.bind(
             this
@@ -67,6 +68,9 @@ class Header extends React.Component {
         this._closeAccountsListDropdown = this._closeAccountsListDropdown.bind(
             this
         );
+        this._closeAccountNotifications = this._closeAccountNotifications.bind(
+            this
+        );
 
         this.showDepositModal = this.showDepositModal.bind(this);
         this.hideDepositModal = this.hideDepositModal.bind(this);
@@ -197,6 +201,7 @@ class Header extends React.Component {
             }
         }
         this._closeDropdown();
+        this._closeAccountNotifications();
     }
 
     _onNavigate(route, e) {
@@ -258,11 +263,22 @@ class Header extends React.Component {
         ZfApi.publish("account_drop_down", "close");
         if (account_name !== this.props.currentAccount) {
             AccountActions.setCurrentAccount.defer(account_name);
+            const key = `account-notification-${Date.now()}`;
             Notification.success({
                 message: counterpart.translate("header.account_notify", {
                     account: account_name
-                })
+                }),
+                key,
+                onClose: () => {
+                    // Remove key of notification from notificationKeys array after close
+                    this._accountNotificationActiveKeys = this._accountNotificationActiveKeys.filter(
+                        el => el !== key
+                    );
+                }
             });
+
+            this._accountNotificationActiveKeys.push(key);
+
             this._closeDropdown();
         }
     }
@@ -273,7 +289,7 @@ class Header extends React.Component {
         const hasLocalWallet = !!WalletDb.getWallet();
 
         if (!hasLocalWallet) return false;
-
+        this._closeAccountNotifications();
         this.setState({
             accountsListDropdownActive: !this.state.accountsListDropdownActive
         });
@@ -292,6 +308,12 @@ class Header extends React.Component {
         this.setState({
             dropdownActive: !this.state.dropdownActive
         });
+        this._closeAccountNotifications();
+    }
+
+    _closeAccountNotifications() {
+        this._accountNotificationActiveKeys.map(key => Notification.close(key));
+        this._accountNotificationActiveKeys = [];
     }
 
     onBodyClick(e) {