From 3a768e78cb27558d20a669a9c3543ac22f25dad4 Mon Sep 17 00:00:00 2001
From: Pete Miller <miller.pete+commit@gmail.com>
Date: Wed, 11 Oct 2017 00:45:05 -0700
Subject: [PATCH] Add transition animation to tab width when returning to
 normal after a mouseover tab close button followed by a mouseout

Fix #7001
---
 app/renderer/components/tabs/tab.js | 29 +++++++++++++++++++++++++++--
 1 file changed, 27 insertions(+), 2 deletions(-)

diff --git a/app/renderer/components/tabs/tab.js b/app/renderer/components/tabs/tab.js
index c38d73858a6..3c9a755fb82 100644
--- a/app/renderer/components/tabs/tab.js
+++ b/app/renderer/components/tabs/tab.js
@@ -240,7 +240,7 @@ class Tab extends React.Component {
       return 0
     }
 
-    const rect = this.tabNode.parentNode.getBoundingClientRect()
+    const rect = this.elementRef.getBoundingClientRect()
     return rect && rect.width
   }
 
@@ -280,6 +280,29 @@ class Tab extends React.Component {
     return props
   }
 
+  componentWillReceiveProps (nextProps) {
+    if (this.props.tabWidth && !nextProps.tabWidth) {
+      // remember the width so we can transition from it
+      this.originalWidth = this.elementRef.getBoundingClientRect().width
+    }
+  }
+
+  componentDidUpdate (prevProps) {
+    if (prevProps.tabWidth && !this.props.tabWidth) {
+      window.requestAnimationFrame(() => {
+        const newWidth = this.elementRef.getBoundingClientRect().width
+        this.elementRef.animate([
+          { flexBasis: `${this.originalWidth}px`, flexGrow: 0, flexShrink: 0 },
+          { flexBasis: `${newWidth}px`, flexGrow: 0, flexShrink: 0 }
+        ], {
+          duration: 250,
+          iterations: 1,
+          easing: 'ease-in-out'
+        })
+      })
+    }
+  }
+
   render () {
     // we don't want themeColor if tab is private
     const perPageStyles = !this.props.isPrivateTab && StyleSheet.create({
@@ -307,7 +330,9 @@ class Tab extends React.Component {
       onMouseEnter={this.onMouseEnter}
       onMouseLeave={this.onMouseLeave}
       data-test-id='tab-area'
-      data-frame-key={this.props.frameKey}>
+      data-frame-key={this.props.frameKey}
+      ref={elementRef => { this.elementRef = elementRef }}
+      >
       {
         this.props.isActive && this.props.notificationBarActive
           ? <NotificationBarCaret />