From 3691cc409cf8302cead437aad2116a44c38d6702 Mon Sep 17 00:00:00 2001
From: rex <rexkaneki@gmail.com>
Date: Tue, 27 Aug 2019 15:38:52 +0800
Subject: [PATCH] [bugfix] TreeSelect: fix error when type of activeId is
 string or number

fix #1912
---
 example/pages/tree-select/index.js   | 67 ++++++++++++++--------------
 example/pages/tree-select/index.wxml | 11 +++++
 packages/tree-select/README.md       | 66 ++++++++++++++++++---------
 packages/tree-select/index.wxml      | 23 ++--------
 packages/tree-select/index.wxs       | 12 +++++
 5 files changed, 106 insertions(+), 73 deletions(-)
 create mode 100644 packages/tree-select/index.wxs

diff --git a/example/pages/tree-select/index.js b/example/pages/tree-select/index.js
index 67d900fa..07b6d0c8 100644
--- a/example/pages/tree-select/index.js
+++ b/example/pages/tree-select/index.js
@@ -3,27 +3,25 @@ import config from './config';
 
 Page({
   data: {
-    items: [
-      {
-        // 导航名称
-        text: '所有城市',
-        // 该导航下所有的可选项
-        children: [...config.pro1, ...config.pro2]
-      }, {
-        // 导航名称
-        text: config.pro1Name,
-        // 该导航下所有的可选项
-        children: config.pro1
-      }, {
-        text: config.pro2Name,
-        children: config.pro2
-      }, {
-        text: config.pro3Name,
-        disabled: true,
-        children: config.pro3
-      }
+    items: [{
+      text: '所有城市',
+      children: [...config.pro1, ...config.pro2]
+    }, {
+      text: config.pro1Name,
+      children: config.pro1
+    }, {
+      text: config.pro2Name,
+      children: config.pro2
+    }, {
+      text: config.pro3Name,
+      disabled: true,
+      children: config.pro3
+    }
     ],
-    mainActiveIndex: 0
+    mainActiveIndex: 0,
+    activeId: 0,
+    mainActiveIndexMulti: 0,
+    activeIdMulti: []
   },
 
   onClickNav({ detail }) {
@@ -33,23 +31,26 @@ Page({
   },
 
   onClickItem({ detail }) {
-    // 多选
-    if (!this.data.activeId) this.data.activeId = [];
+    const activeId = this.data.activeId === detail.id ? null : detail.id;
 
-    const idx = this.data.activeId.indexOf(detail.id);
+    this.setData({ activeId });
+  },
+
+  onClickNavMulti({ detail }) {
+    this.setData({
+      mainActiveIndexMulti: detail.index || 0
+    });
+  },
+
+  onClickItemMulti({ detail }) {
+    const { activeIdMulti } = this.data;
+    const idx = activeIdMulti.indexOf(detail.id);
     if (idx > -1) {
-      this.data.activeId.splice(idx, 1);
+      activeIdMulti.splice(idx, 1);
     } else {
-      this.data.activeId.push(detail.id);
+      activeIdMulti.push(detail.id);
     }
 
-/*
-    // 单选
-    this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
-*/
-
-    this.setData({
-      activeId: this.data.activeId
-    });
+    this.setData({ activeIdMulti });
   }
 });
diff --git a/example/pages/tree-select/index.wxml b/example/pages/tree-select/index.wxml
index ab6cb2fc..db1af7ac 100644
--- a/example/pages/tree-select/index.wxml
+++ b/example/pages/tree-select/index.wxml
@@ -8,3 +8,14 @@
     content-item-class="content-item-class"
   ></van-tree-select>
 </demo-block>
+
+<demo-block title="多选">
+  <van-tree-select
+    items="{{ items }}"
+    main-active-index="{{ mainActiveIndexMulti }}"
+    active-id="{{ activeIdMulti }}"
+    bind:click-item="onClickItemMulti"
+    bind:click-nav="onClickNavMulti"
+    content-item-class="content-item-class"
+  ></van-tree-select>
+</demo-block>
diff --git a/packages/tree-select/README.md b/packages/tree-select/README.md
index f9d5d2f3..b94a327b 100644
--- a/packages/tree-select/README.md
+++ b/packages/tree-select/README.md
@@ -29,7 +29,8 @@
 ```javascript
 Page({
   data: {
-    // ...
+    mainActiveIndex: 0,
+    activeId: null
   },
 
   onClickNav({ detail = {} }) {
@@ -39,35 +40,60 @@ Page({
   },
 
   onClickItem({ detail = {} }) {
-    // 多选
-    if (!this.data.activeId) this.data.activeId = [];
+    const activeId = this.data.activeId === detail.id ? null : detail.id;
 
-    const idx = this.data.activeId.indexOf(detail.id);
-    if (idx > -1) {
-      this.data.activeId.splice(idx, 1);
+    this.setData({ activeId });
+  }
+});
+```
+
+### 多选
+
+```html
+<van-tree-select
+  items="{{ items }}"
+  main-active-index="{{ mainActiveIndex }}"
+  active-id="{{ activeId }}"
+  bind:click-nav="onClickNav"
+  bind:click-item="onClickItem"
+/>
+```
+
+```javascript
+Page({
+  data: {
+    mainActiveIndex: 0,
+    activeId: []
+  },
+
+  onClickNav({ detail = {} }) {
+    this.setData({
+      mainActiveIndex: detail.index || 0
+    });
+  },
+
+  onClickItem({ detail = {} }) {
+    const { activeId } = this.data;
+
+    const index = activeId.indexOf(detail.id);
+    if (index > -1) {
+      activeId.splice(index, 1);
     } else {
-      this.data.activeId.push(detail.id);
+      activeId.push(detail.id);
     }
 
-/*
-    // 单选
-    this.data.activeId = this.data.activeId === detail.id ? null : detail.id;
-*/
-
-    this.setData({
-      activeId: this.data.activeId
-    });
+    this.setData({ activeId });
   }
 });
 ```
 
 ### Props
 
-| 参数       | 说明      | 类型       | 默认值       | 必须      |
-|-----------|-----------|-----------|-------------|-------------|
-| items | 分类显示所需的数据，具体数据结构可看 数据结构	 | Array | [] | |
-| main-active-index | 左侧导航高亮的索引	 | Number | 0 | |
-| active-id	 | 右侧选择项，高亮的数据id	 | String / Number / Array	 | 0 | |
+| 参数       | 说明      | 类型       | 默认值       |
+|-----------|-----------|-----------|-------------|
+| items | 分类显示所需的数据，具体数据结构可看 数据结构	 | `Array` | [] |
+| main-active-index | 左侧导航高亮的索引	 | `Number` | 0 | |
+| active-id	 | 右侧选择项，高亮的数据id	 | `String | Number | Array` | 0 |
 
 ### Events
 
diff --git a/packages/tree-select/index.wxml b/packages/tree-select/index.wxml
index b5e73dbb..9ada9149 100644
--- a/packages/tree-select/index.wxml
+++ b/packages/tree-select/index.wxml
@@ -1,22 +1,5 @@
 <wxs src="../wxs/utils.wxs" module="utils" />
-
-<wxs module="tsUtil">
-// 判断子项是否被选中
-function isArray (array) {
-  return array instanceof Array;
-}
-function isActive (activeList, itemId) {
-  if (typeof activeList === 'undefined' || activeList == null) return false;
-  if (isArray(activeList)) {
-    return activeList.indexOf(itemId) > -1;
-  }
-  else {
-    return activeList === itemId;
-  }
-}
-
-module.exports.isActive = isActive;
-</wxs>
+<wxs src="./index.wxs" module="wxs" />
 
 <view
   class="van-tree-select"
@@ -41,13 +24,13 @@ module.exports.isActive = isActive;
     <view
       wx:for="{{ subItems }}"
       wx:key="id"
-      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: tsUtil.isActive(activeId, item.id), disabled: item.disabled }) }} {{ tsUtil.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
+      class="van-ellipsis van-hairline--bottom content-item-class {{ utils.bem('tree-select__item', { active: wxs.isActive(activeId, item.id), disabled: item.disabled }) }} {{ wxs.isActive(activeId, item.id) ? 'content-active-class' : '' }} {{ item.disabled ? 'content-disabled-class' : '' }}"
       data-item="{{ item }}"
       bind:tap="onSelectItem"
     >
       {{ item.text }}
       <van-icon
-        wx:if="{{ tsUtil.isActive(activeId, item.id) }}"
+        wx:if="{{ wxs.isActive(activeId, item.id) }}"
         name="checked"
         size="16px"
         class="van-tree-select__selected"
diff --git a/packages/tree-select/index.wxs b/packages/tree-select/index.wxs
new file mode 100644
index 00000000..b1cbb39b
--- /dev/null
+++ b/packages/tree-select/index.wxs
@@ -0,0 +1,12 @@
+/* eslint-disable */
+var array = require('../wxs/array.wxs');
+
+function isActive (activeList, itemId) {
+  if (array.isArray(activeList)) {
+    return activeList.indexOf(itemId) > -1;
+  }
+
+  return activeList === itemId;
+}
+
+module.exports.isActive = isActive;