From f0aabad2c4a9a3a36e07a8d4a8aa0c0637abb799 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Simon=20A=CC=81bris?= <abris.simon@shiwaforce.com>
Date: Sat, 14 Mar 2020 08:55:16 +0100
Subject: [PATCH] remove js tab hover tracking and do it from css

---
 lib/components/tab.tsx | 35 ++++++++---------------------------
 1 file changed, 8 insertions(+), 27 deletions(-)

diff --git a/lib/components/tab.tsx b/lib/components/tab.tsx
index 4c666034..af6e32e2 100644
--- a/lib/components/tab.tsx
+++ b/lib/components/tab.tsx
@@ -1,27 +1,11 @@
 import React from 'react';
 import {TabProps} from '../hyper';
 
-export default class Tab extends React.PureComponent<TabProps, {hovered: boolean}> {
+export default class Tab extends React.PureComponent<TabProps> {
   constructor(props: TabProps) {
     super(props);
-
-    this.state = {
-      hovered: false
-    };
   }
 
-  handleHover = () => {
-    this.setState({
-      hovered: true
-    });
-  };
-
-  handleBlur = () => {
-    this.setState({
-      hovered: false
-    });
-  };
-
   handleClick = (event: React.MouseEvent) => {
     const isLeftClick = event.nativeEvent.which === 1;
 
@@ -40,13 +24,10 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
 
   render() {
     const {isActive, isFirst, isLast, borderColor, hasActivity} = this.props;
-    const {hovered} = this.state;
 
     return (
       <React.Fragment>
         <li
-          onMouseEnter={this.handleHover}
-          onMouseLeave={this.handleBlur}
           onClick={this.props.onClick}
           style={{borderColor}}
           className={`tab_tab ${isFirst ? 'tab_first' : ''} ${isActive ? 'tab_active' : ''} ${
@@ -63,7 +44,7 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
               {this.props.text}
             </span>
           </span>
-          <i className={`tab_icon ${hovered ? 'tab_iconHovered' : ''}`} onClick={this.props.onClose}>
+          <i className="tab_icon" onClick={this.props.onClose}>
             <svg className="tab_shape">
               <use xlinkHref="./renderer/assets/icons.svg#close-tab" />
             </svg>
@@ -88,6 +69,12 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
             color: #ccc;
           }
 
+          .tab_tab:hover .tab_icon {
+            opacity: 1;
+            transform: none;
+            pointer-events: all;
+          }
+
           .tab_first {
             border-left-width: 0;
             padding-left: 1px;
@@ -160,12 +147,6 @@ export default class Tab extends React.PureComponent<TabProps, {hovered: boolean
             color: #909090;
           }
 
-          .tab_iconHovered {
-            opacity: 1;
-            transform: none;
-            pointer-events: all;
-          }
-
           .tab_shape {
             position: absolute;
             left: 4px;