From 7dfeabf7c994c4b72ccbc001264542e6cb2f3c3c Mon Sep 17 00:00:00 2001
From: Ben Gotow <bengotow@gmail.com>
Date: Thu, 23 Jul 2015 14:12:14 -0700
Subject: [PATCH] fix(multiselect-bar): Do not render components inside action
 bar when it's hidden

---
 src/components/mail-label.cjsx             |  4 ++
 src/components/multiselect-action-bar.cjsx | 42 ++++++++++-------
 static/components/list-tabular.less        | 53 ++++++++++++----------
 3 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/src/components/mail-label.cjsx b/src/components/mail-label.cjsx
index fc970d34f..e88d4e214 100644
--- a/src/components/mail-label.cjsx
+++ b/src/components/mail-label.cjsx
@@ -20,6 +20,10 @@ class MailLabel extends React.Component
     label: React.PropTypes.object.isRequired
     onRemove: React.PropTypes.function
 
+  shouldComponentUpdate: (nextProps, nextState) ->
+    return false if nextProps.label.id is @props.label.id
+    true
+
   render: ->
     classname = 'mail-label'
     content = @props.label.displayName
diff --git a/src/components/multiselect-action-bar.cjsx b/src/components/multiselect-action-bar.cjsx
index c6c263b4d..9be8c4f67 100644
--- a/src/components/multiselect-action-bar.cjsx
+++ b/src/components/multiselect-action-bar.cjsx
@@ -1,12 +1,13 @@
 React = require "react/addons"
-classNames = require 'classnames'
 _ = require 'underscore'
 
 {Utils,
  Actions,
  WorkspaceStore} = require "nylas-exports"
 InjectedComponentSet = require './injected-component-set'
+TimeoutTransitionGroup = require './timeout-transition-group'
 RetinaImg = require './retina-img'
+Flexbox = require './flexbox'
 
 ###
 Public: MultiselectActionBar is a simple component that can be placed in a {Sheet} Toolbar.
@@ -80,19 +81,31 @@ class MultiselectActionBar extends React.Component
     not Utils.isEqualReact(nextState, @state)
 
   render: =>
-    <div className={@_classSet()}><div className="absolute"><div className="inner">
-      {@_renderActions()}
+    <TimeoutTransitionGroup
+      className={"selection-bar"}
+      transitionName="selection-bar-absolute"
+      component="div"
+      leaveTimeout={200}
+      enterTimeout={200}>
+      { if @state.items.length > 0 then @_renderBar() else [] }
+    </TimeoutTransitionGroup>
 
-      <div className="centered">
-        {@_label()}
+  _renderBar: =>
+    <div className="absolute" key="absolute">
+      <div className="inner">
+        {@_renderActions()}
+
+        <div className="centered">
+          {@_label()}
+        </div>
+
+        <button style={order:100}
+                className="btn btn-toolbar"
+                onClick={@_onClearSelection}>
+          Clear Selection
+        </button>
       </div>
-
-      <button style={order:100}
-              className="btn btn-toolbar"
-              onClick={@_onClearSelection}>
-        Clear Selection
-      </button>
-    </div></div></div>
+    </div>
 
   _renderActions: =>
     return <div></div> unless @state.view
@@ -107,11 +120,6 @@ class MultiselectActionBar extends React.Component
     else
       ""
 
-  _classSet: =>
-    classNames
-      "selection-bar": true
-      "enabled": @state.items.length > 0
-
   _getStateFromStores: (props) =>
     props ?= @props
     view = props.dataStore.view()
diff --git a/static/components/list-tabular.less b/static/components/list-tabular.less
index f615b98ae..e6788b4ae 100644
--- a/static/components/list-tabular.less
+++ b/static/components/list-tabular.less
@@ -1,5 +1,33 @@
 @import "ui-variables";
 
+.selection-bar-absolute-enter {
+  opacity: 0;
+  .inner {
+    top: -100%;
+  }
+}
+
+.selection-bar-absolute-enter.selection-bar-absolute-enter-active {
+  opacity: 1;
+  .inner {
+    top:0;
+  }
+}
+
+.selection-bar-absolute-leave {
+  opacity: 1;
+  .inner {
+    top:0;
+  }
+}
+
+.selection-bar-absolute-leave.selection-bar-absolute-leave-active {
+  opacity: 0;
+  .inner {
+    top: -100%;
+  }
+}
+
 .sheet-toolbar .selection-bar {
   // This item sits in the toolbar and takes up all the remaining
   // space from the toolbar-spacer divs, but flex-shrink means that
@@ -24,17 +52,14 @@
     border-left:1px solid @border-color-divider;
     border-right:1px solid @border-color-divider;
     background-color: @background-primary;
-    opacity:0;
     transition: opacity 0.2s ease-in-out;
-    pointer-events: none;
 
     .inner {
-      top: -100%;
       position: absolute;
       width: 100%;
       display:flex;
-      transition: top 0.2s ease-in-out;
       -webkit-app-region: no-drag;
+      transition: top 0.2s ease-in-out;
 
       .centered {
         flex: 1;
@@ -45,25 +70,7 @@
         text-overflow: ellipsis;
         overflow: hidden;
         white-space: nowrap;
-      }
-    }
-  }
-
-  // .absolute is positioned full-width over all the other items in the toolbar.
-  // when .enabled, it transitions to opacity:1, hiding other items beneath it.
-
-  // .inner contains the actual buttons and animates *down* while the opacity animation
-  // is running. This means the items beneath fade out as the new ones slide in.
-
-  &.enabled {
-    .absolute {
-      opacity: 1;
-      pointer-events: initial;
-      .inner {
-        top:0;
-        .centered {
-          -webkit-app-region: drag;
-        }
+        -webkit-app-region: drag;
       }
     }
   }