refactor(TreeSelect): use Sidebar as nav (#4383)

src/style/var.less

@@ -483,7 +483,7 @@
 
 // SidebarItem
 @sidebar-font-size: @font-size-md;
-@sidebar-line-height: 1.4;
+@sidebar-line-height: 20px;
 @sidebar-text-color: @text-color;
 @sidebar-disabled-text-color: @gray;
 @sidebar-padding: 20px @padding-sm 20px @padding-xs;
@@ -648,10 +648,7 @@
 @tree-select-font-size: @font-size-md;
 @tree-select-nav-background-color: @background-color-light;
 @tree-select-content-background-color: @white;
-@tree-select-nav-item-padding: 0 @padding-xs 0 @padding-sm;
+@tree-select-nav-item-padding: @padding-sm @padding-xs @padding-sm @padding-sm;
-@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;

src/tree-select/index.less

@@ -13,20 +13,7 @@
     -webkit-overflow-scrolling: touch;
 
     &-item {
-      position: relative;
       padding: @tree-select-nav-item-padding;
-      line-height: @tree-select-item-height;
-      border-left: 3px solid transparent;
-
-      &--active {
-        font-weight: bold;
-        background-color: @tree-select-nav-item-active-background-color;
-        border-color: @tree-select-nav-item-active-border-color;
-      }
-
-      &--disabled {
-        color: @tree-select-nav-item-disabled-color;
-      }
     }
   }
 
@@ -39,7 +26,7 @@
 
   &__item {
     position: relative;
-    padding-left: @padding-md;
+    padding: 0 32px 0 @padding-md;
     font-weight: bold;
     line-height: @tree-select-item-height;
 

src/tree-select/index.tsx

@@ -1,6 +1,8 @@
 import { createNamespace, addUnit } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import Icon from '../icon';
+import Sidebar from '../sidebar';
+import SidebarItem from '../sidebar-item';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
@@ -52,28 +54,12 @@ function TreeSelect(
       : activeId === id;
   }
 
-  const Nav = items.map((item, index) => (
+  const Nav = items.map(item => (
-    <div
+    <SidebarItem
-      key={index}
+      title={item.text}
-      class={[
+      disabled={item.disabled}
-        'van-ellipsis',
+      class={bem('nav-item')}
-        bem('nav-item', {
+    />
-          active: mainActiveIndex === index,
-          disabled: item.disabled
-        })
-      ]}
-      onClick={() => {
-        if (!item.disabled) {
-          emit(ctx, 'click-nav', index);
-          emit(ctx, 'update:main-active-index', index);
-
-          // compatible for old usage, should be removed in next major version
-          emit(ctx, 'navclick', index);
-        }
-      }}
-    >
-      {item.text}
-    </div>
   ));
 
   function Content() {
@@ -124,7 +110,19 @@ function TreeSelect(
 
   return (
     <div class={bem()} style={{ height: addUnit(height) }} {...inherit(ctx)}>
-      <div class={bem('nav')}>{Nav}</div>
+      <Sidebar
+        class={bem('nav')}
+        activeKey={mainActiveIndex}
+        onChange={(index: number) => {
+          emit(ctx, 'click-nav', index);
+          emit(ctx, 'update:main-active-index', index);
+
+          // compatible for old usage, should be removed in next major version
+          emit(ctx, 'navclick', index);
+        }}
+      >
+        {Nav}
+      </Sidebar>
       <div class={bem('content')}>{Content()}</div>
     </div>
   );

src/tree-select/test/__snapshots__/demo.spec.js.snap

@@ -4,11 +4,19 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-tree-select" style="height: 300px;">
-      <div class="van-tree-select__nav">
+      <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-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">浙江</div>
+          <div class="van-sidebar-item__text">浙江
-        <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>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">江苏
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">福建
+            <!---->
+          </div>
+        </a></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;">
             <!----></i></div>
@@ -20,11 +28,19 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-tree-select" style="height: 300px;">
-      <div class="van-tree-select__nav">
+      <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-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">浙江</div>
+          <div class="van-sidebar-item__text">浙江
-        <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>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">江苏
+            <!---->
+          </div>
+        </a><a class="van-sidebar-item van-sidebar-item--disabled van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">福建
+            <!---->
+          </div>
+        </a></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;">
             <!----></i></div>
@@ -37,10 +53,15 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-tree-select" style="height: 55vw;">
-      <div class="van-tree-select__nav">
+      <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-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">分组 1</div>
+          <div class="van-sidebar-item__text">分组 1
-        <div class="van-ellipsis van-tree-select__nav-item">分组 2</div>
+            <!---->
           </div>
+        </a><a class="van-sidebar-item van-tree-select__nav-item">
+          <div class="van-sidebar-item__text">分组 2
+            <!---->
+          </div>
+        </a></div>
       <div class="van-tree-select__content">
         <div class="van-image"><img src="https://img.yzcdn.cn/vant/apple-1.jpg" class="van-image__img">
           <div class="van-image__loading"><i class="van-icon van-icon-photo-o" style="font-size: 22px;">

src/tree-select/test/__snapshots__/index.spec.js.snap

@@ -2,23 +2,25 @@
 
 exports[`content slot 1`] = `
 <div class="van-tree-select" style="height: 300px;">
-  <div class="van-tree-select__nav">
+  <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-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">group1</div>
+      <div class="van-sidebar-item__text">group1
+        <!---->
       </div>
+    </a></div>
   <div class="van-tree-select__content">Custom Content</div>
 </div>
 `;
 
 exports[`empty list 1`] = `
 <div class="van-tree-select" style="height: 300px;">
-  <div class="van-tree-select__nav"></div>
+  <div class="van-sidebar van-tree-select__nav"></div>
   <div class="van-tree-select__content"></div>
 </div>
 `;
 
 exports[`height prop 1`] = `
 <div class="van-tree-select" style="height: 100vh;">
-  <div class="van-tree-select__nav"></div>
+  <div class="van-sidebar van-tree-select__nav"></div>
   <div class="van-tree-select__content"></div>
 </div>
 `;