From 4529bd6b308b012fc884be4c63288358016affb4 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Fri, 6 Sep 2019 10:46:08 +0800
Subject: [PATCH] feat(TreeSelect): support show info (#4384)

---
 src/tree-select/README.md                         |  2 ++
 src/tree-select/README.zh-CN.md                   |  2 ++
 src/tree-select/index.tsx                         |  6 ++++--
 .../test/__snapshots__/index.spec.js.snap         | 10 ++++++++++
 src/tree-select/test/index.spec.js                | 15 +++++++++++++++
 5 files changed, 33 insertions(+), 2 deletions(-)

diff --git a/src/tree-select/README.md b/src/tree-select/README.md
index eb48bfed5..dcb2bc352 100644
--- a/src/tree-select/README.md
+++ b/src/tree-select/README.md
@@ -123,6 +123,8 @@ In every tree object, `text` property defines `id` stands for the unique key whi
   {
     // name of the parent node
     text: 'Group 1',
+    // info
+    info: 3,
     // leaves of this parent node
     children: [
       {
diff --git a/src/tree-select/README.zh-CN.md b/src/tree-select/README.zh-CN.md
index 2183eac5f..09ffe1b5a 100644
--- a/src/tree-select/README.zh-CN.md
+++ b/src/tree-select/README.zh-CN.md
@@ -129,6 +129,8 @@ export default {
   {
     // 导航名称
     text: '所有城市',
+    // 导航名称右上角徽标
+    info: 3,
     // 该导航下所有的可选项
     children: [
       {
diff --git a/src/tree-select/index.tsx b/src/tree-select/index.tsx
index 3fa75430c..6a02b3772 100644
--- a/src/tree-select/index.tsx
+++ b/src/tree-select/index.tsx
@@ -10,6 +10,7 @@ import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type TreeSelectItem = {
   text: string;
+  info?: string | number;
   disabled?: boolean;
   children: TreeSelectChildren[];
 };
@@ -54,8 +55,9 @@ function TreeSelect(
       : activeId === id;
   }
 
-  const Nav = items.map(item => (
+  const Navs = items.map(item => (
     <SidebarItem
+      info={item.info}
       title={item.text}
       disabled={item.disabled}
       class={bem('nav-item')}
@@ -121,7 +123,7 @@ function TreeSelect(
           emit(ctx, 'navclick', index);
         }}
       >
-        {Nav}
+        {Navs}
       </Sidebar>
       <div class={bem('content')}>{Content()}</div>
     </div>
diff --git a/src/tree-select/test/__snapshots__/index.spec.js.snap b/src/tree-select/test/__snapshots__/index.spec.js.snap
index 4980183b1..5ddc82df5 100644
--- a/src/tree-select/test/__snapshots__/index.spec.js.snap
+++ b/src/tree-select/test/__snapshots__/index.spec.js.snap
@@ -24,3 +24,13 @@ exports[`height prop 1`] = `
   <div class="van-tree-select__content"></div>
 </div>
 `;
+
+exports[`nav info 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-sidebar van-tree-select__nav"><a class="van-sidebar-item van-sidebar-item--select van-tree-select__nav-item">
+      <div class="van-sidebar-item__text">group1<div class="van-info van-sidebar-item__info">3</div>
+      </div>
+    </a></div>
+  <div class="van-tree-select__content"></div>
+</div>
+`;
diff --git a/src/tree-select/test/index.spec.js b/src/tree-select/test/index.spec.js
index dfe1582de..4c68339f6 100644
--- a/src/tree-select/test/index.spec.js
+++ b/src/tree-select/test/index.spec.js
@@ -150,6 +150,21 @@ test('height prop', () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('nav info', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1',
+          info: 3
+        }
+      ]
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('use sync modifier in main-active-index', () => {
   const wrapper = mount({
     template: `