From faf264a6ea4edc4045f6cfdd593a392468914aa2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Fri, 10 May 2019 15:57:57 +0800
Subject: [PATCH] [improvement] TreeSelect: add less vars

---
 packages/contact-card/index.less              |  2 -
 packages/goods-action-button/index.less       |  1 -
 packages/style/var.less                       | 12 +++
 packages/tree-select/index.less               | 79 +++++++------------
 packages/tree-select/index.tsx                |  2 +-
 .../test/__snapshots__/demo.spec.js.snap      |  8 +-
 6 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/packages/contact-card/index.less b/packages/contact-card/index.less
index 1540ef525..aa85e5633 100644
--- a/packages/contact-card/index.less
+++ b/packages/contact-card/index.less
@@ -4,10 +4,8 @@
   padding: 15px;
 
   &__value {
-    display: inline-block;
     margin-left: 5px;
     line-height: 20px;
-    vertical-align: middle;
   }
 
   &--add {
diff --git a/packages/goods-action-button/index.less b/packages/goods-action-button/index.less
index 1dd8cad84..f2e023870 100644
--- a/packages/goods-action-button/index.less
+++ b/packages/goods-action-button/index.less
@@ -2,7 +2,6 @@
 
 .van-goods-action-button {
   flex: 1;
-  padding: 0;
 
   @media (max-width: 321px) {
     font-size: 15px;
diff --git a/packages/style/var.less b/packages/style/var.less
index ad93a4b51..d8a146fae 100644
--- a/packages/style/var.less
+++ b/packages/style/var.less
@@ -327,3 +327,15 @@
 @stepper-button-disabled-color: #f7f8fa;
 @stepper-input-disabled-color: @active-color;
 @stepper-border-radius: 4px;
+
+// TreeSelect
+@tree-select-font-size: 14px;
+@tree-select-nav-background-color: @background-color-light;
+@tree-select-content-background-color: @white;
+@tree-select-nav-item-padding: 0 9px 0 12px;
+@tree-select-nav-item-active-border-color: @red;
+@tree-select-nav-item-active-background-color: @white;
+@tree-select-nav-item-disabled-color: @gray-dark;
+@tree-select-item-height: 44px;
+@tree-select-item-active-color: @red;
+@tree-select-item-disabled-color: @gray;
diff --git a/packages/tree-select/index.less b/packages/tree-select/index.less
index 26ced94d7..5c4424808 100644
--- a/packages/tree-select/index.less
+++ b/packages/tree-select/index.less
@@ -2,83 +2,60 @@
 
 .van-tree-select {
   position: relative;
-  font-size: 14px;
+  display: flex;
+  font-size: @tree-select-font-size;
   user-select: none;
 
   &__nav {
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: 35%;
-    min-width: 120px;
-    overflow: scroll;
-    background-color: @background-color-light;
+    flex: 1;
+    overflow-y: auto;
+    background-color: @tree-select-nav-background-color;
     -webkit-overflow-scrolling: touch;
-  }
 
-  &__nitem {
-    position: relative;
-    padding: 0 9px 0 15px;
-    line-height: 44px;
+    &-item {
+      position: relative;
+      padding: @tree-select-nav-item-padding;
+      line-height: @tree-select-item-height;
+      border-left: 3px solid transparent;
 
-    &--active::after {
-      position: absolute;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      width: 3.6px;
-      background-color: @red;
-      content: '';
-    }
+      &--active {
+        font-weight: bold;
+        background-color: @tree-select-nav-item-active-background-color;
+        border-color: @tree-select-nav-item-active-border-color;
+      }
 
-    &--active {
-      font-weight: bold;
-      background-color: @white;
-    }
-
-    &--disabled {
-      color: @gray-dark;
-    }
-
-    &--disabled:active::after {
-      display: none;
+      &--disabled {
+        color: @tree-select-nav-item-disabled-color;
+      }
     }
   }
 
   &__content {
-    box-sizing: border-box;
-    width: 65%;
-    height: 100%;
-    margin-left: 35%;
-    padding-left: 15px;
-    overflow: scroll;
-    background-color: @white;
+    flex: 2;
+    overflow-y: auto;
+    background-color: @tree-select-content-background-color;
     -webkit-overflow-scrolling: touch;
   }
 
   &__item {
     position: relative;
+    padding-left: 15px;
     font-weight: bold;
-    line-height: 44px;
+    line-height: @tree-select-item-height;
 
     &--active {
-      color: @red;
+      color: @tree-select-item-active-color;
     }
 
-    &--disabled,
-    &--disabled:active {
-      color: @gray;
+    &--disabled {
+      color: @tree-select-item-disabled-color;
     }
   }
 
   &__selected {
     position: absolute;
-    top: 0;
+    top: 50%;
     right: 15px;
-    bottom: 0;
-    height: 24px;
-    margin: auto 0;
-    line-height: 24px;
+    margin-top: -8px;
   }
 }
diff --git a/packages/tree-select/index.tsx b/packages/tree-select/index.tsx
index f31cda85c..e22db6a4d 100644
--- a/packages/tree-select/index.tsx
+++ b/packages/tree-select/index.tsx
@@ -46,7 +46,7 @@ function TreeSelect(
             key={index}
             class={[
               'van-ellipsis',
-              bem('nitem', {
+              bem('nav-item', {
                 active: mainActiveIndex === index,
                 disabled: item.disabled
               })
diff --git a/packages/tree-select/test/__snapshots__/demo.spec.js.snap b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
index 6a7d1d145..02eb7659f 100644
--- a/packages/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -5,10 +5,10 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-tree-select" style="height: 300px;">
       <div class="van-tree-select__nav">
-        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--active">所有城市</div>
-        <div class="van-ellipsis van-tree-select__nitem">浙江</div>
-        <div class="van-ellipsis van-tree-select__nitem">江苏</div>
-        <div class="van-ellipsis van-tree-select__nitem van-tree-select__nitem--disabled">福建</div>
+        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">所有城市</div>
+        <div class="van-ellipsis van-tree-select__nav-item">浙江</div>
+        <div class="van-ellipsis van-tree-select__nav-item">江苏</div>
+        <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--disabled">福建</div>
       </div>
       <div class="van-tree-select__content">
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">杭州<i class="van-icon van-icon-checked van-tree-select__selected" style="font-size: 16px;">