From 396819c35536e1adfa179aed177b0fbc8b6c30e8 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Tue, 9 Oct 2018 17:08:57 +0800
Subject: [PATCH] [improvement] TreeSelect: add height prop (#1905)

---
 packages/tree-select/demo/index.vue            |  1 -
 packages/tree-select/en-US.md                  |  2 ++
 packages/tree-select/index.vue                 | 18 ++++++------------
 .../test/__snapshots__/demo.spec.js.snap       |  2 +-
 .../test/__snapshots__/index.spec.js.snap      |  4 ++--
 packages/tree-select/zh-CN.md                  |  3 ++-
 packages/vant-css/src/tree-select.css          | 13 ++++++++++---
 7 files changed, 23 insertions(+), 20 deletions(-)

diff --git a/packages/tree-select/demo/index.vue b/packages/tree-select/demo/index.vue
index b479e49b3..b6724e107 100644
--- a/packages/tree-select/demo/index.vue
+++ b/packages/tree-select/demo/index.vue
@@ -106,7 +106,6 @@ export default {
       this.mainActiveIndex = index;
     },
     onItemClick(data) {
-      console.log(data);
       this.activeId = data.id;
     }
   }
diff --git a/packages/tree-select/en-US.md b/packages/tree-select/en-US.md
index acf55b393..ce59581b0 100644
--- a/packages/tree-select/en-US.md
+++ b/packages/tree-select/en-US.md
@@ -50,10 +50,12 @@ export default {
 | Attribute | Description | Type | Default |
 |-----------|-----------|-----------|-------------|
 | items | Required datasets for the component, see Data Structure for detail. | `Array` | `[]` |
+| height | Height (px) | `Number` | `300` |
 | main-Active-index | The index of selected parent node | `Number` | `0` |
 | active-id | Id of selected item | `String | Number` | `0` |
 
 #### Event
+
 | Event | Description | Arguments |
 |-----------|-----------|-----------|
 | navclick | triggered when parent node is selected |  index: index of selected parent |
diff --git a/packages/tree-select/index.vue b/packages/tree-select/index.vue
index 9e63cc508..8410e0edc 100644
--- a/packages/tree-select/index.vue
+++ b/packages/tree-select/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <div :class="b()" :style="{ height: mainHeight + 'px' }">
+  <div :class="b()" :style="{ height: height + 'px' }">
     <div :class="b('nav')">
       <div
         v-for="(item, index) in items"
@@ -9,13 +9,14 @@
         {{ item.text }}
       </div>
     </div>
-    <div :class="b('content')" :style="{ height: itemHeight + 'px' }">
+    <div :class="b('content')">
       <div
         v-for="item in subItems"
         :key="item.id"
         class="van-ellipsis"
         :class="b('item', { active: activeId === item.id })"
-        @click="onItemSelect(item)">
+        @click="onItemSelect(item)"
+      >
         {{ item.text }}
         <icon
           v-if="activeId === item.id"
@@ -46,7 +47,7 @@ export default create({
       type: [Number, String],
       default: 0
     },
-    maxHeight: {
+    height: {
       type: Number,
       default: 300
     }
@@ -56,19 +57,12 @@ export default create({
     subItems() {
       const selectedItem = this.items[this.mainActiveIndex] || {};
       return selectedItem.children || [];
-    },
-    mainHeight() {
-      const maxHeight = Math.max(this.items.length * 44, this.subItems.length * 44);
-      return Math.min(maxHeight, this.maxHeight);
-    },
-    itemHeight() {
-      return Math.min(this.subItems.length * 44, this.maxHeight);
     }
   },
 
   methods: {
     onItemSelect(data) {
-      this.$emit('itemclick', { ...data });
+      this.$emit('itemclick', data);
     }
   }
 });
diff --git a/packages/tree-select/test/__snapshots__/demo.spec.js.snap b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
index 9c3eb9322..1d2f837f2 100644
--- a/packages/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
           江苏
         </div>
       </div>
-      <div class="van-tree-select__content" style="height:300px;">
+      <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-success van-tree-select__selected" style="color:undefined;font-size:undefined;">
diff --git a/packages/tree-select/test/__snapshots__/index.spec.js.snap b/packages/tree-select/test/__snapshots__/index.spec.js.snap
index c0c3f7d31..5dd66e72c 100644
--- a/packages/tree-select/test/__snapshots__/index.spec.js.snap
+++ b/packages/tree-select/test/__snapshots__/index.spec.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`empty list 1`] = `
-<div class="van-tree-select" style="height: 0px;">
+<div class="van-tree-select" style="height: 300px;">
   <div class="van-tree-select__nav"></div>
-  <div class="van-tree-select__content" style="height: 0px;"></div>
+  <div class="van-tree-select__content"></div>
 </div>
 `;
diff --git a/packages/tree-select/zh-CN.md b/packages/tree-select/zh-CN.md
index d983b1bbe..16dd2fe59 100644
--- a/packages/tree-select/zh-CN.md
+++ b/packages/tree-select/zh-CN.md
@@ -50,7 +50,8 @@ export default {
 
 | 参数 | 说明 | 类型 | 默认值 |
 |-----------|-----------|-----------|-------------|
-| items | 分类显示所需的数据，具体数据结构可看 数据结构 | `Array` | `[]` |
+| items | 分类显示所需的数据，结构参见下方 | `Array` | `[]` |
+| height | 高度，单位为 px | `Number` | `300` |
 | main-active-index | 左侧导航高亮的索引 | `Number` | `0` |
 | active-id | 右侧选择项，高亮的数据id | `String | Number` | `0` |
 
diff --git a/packages/vant-css/src/tree-select.css b/packages/vant-css/src/tree-select.css
index 45572749f..e73b3e2d2 100644
--- a/packages/vant-css/src/tree-select.css
+++ b/packages/vant-css/src/tree-select.css
@@ -5,7 +5,7 @@
   position: relative;
 
   &__nav {
-    width: 143px;
+    width: 35%;
     position: absolute;
     left: 0;
     top: 0;
@@ -20,14 +20,20 @@
     padding: 0 15px;
     background-color: $white;
 
+    &:active,
     &--active {
       background-color: $background-color;
     }
+
+    &--active {
+      font-weight: 500;
+    }
   }
 
   &__content {
+    height: 100%;
     padding: 0 15px;
-    margin-left: 143px;
+    margin-left: 35%;
     overflow: scroll;
     -webkit-overflow-scrolling: touch;
   }
@@ -38,8 +44,9 @@
     padding-left: 5px;
     padding-right: 18px;
 
+    &:active,
     &--active {
-      color: $button-danger-background-color;
+      color: $red;
     }
   }