[new feature] TreeSelect: add content slot (#4105)

src/tree-select/README.md

@@ -63,6 +63,12 @@ export default {
 | click-nav | triggered when parent node is selected | index: index of selected parent |
 | click-item | triggered when item is selected | data: selected item |
 
+### Slots
+
+| Name | Description |
+|------|------|
+| content | Custom right content |
+
 ### Data Structure of Item
 
 `items` should be an array contains specified tree objects.

src/tree-select/README.zh-CN.md

@@ -63,6 +63,12 @@ export default {
 | click-nav | 点击左侧导航时触发 | index：被点击的导航的索引 |
 | click-item | 点击右侧选择项时触发 | data: 该点击项的数据 |
 
+### Slots
+
+| 名称 | 说明 |
+|------|------|
+| content | 自定义右侧区域内容 |
+
 ### Item 数据结构
 
 `items` 整体为一个数组，数组内包含一系列描述分类的对象。

src/tree-select/index.tsx

@@ -4,7 +4,7 @@ import Icon from '../icon';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
+import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type TreeSelectItem = {
   text: string;
@@ -25,12 +25,16 @@ export type TreeSelectProps = {
   mainActiveIndex: number;
 };
 
+export type TreeSelectSlots = DefaultSlots & {
+  content?: ScopedSlot;
+};
+
 const [createComponent, bem] = createNamespace('tree-select');
 
 function TreeSelect(
   h: CreateElement,
   props: TreeSelectProps,
-  slots: DefaultSlots,
+  slots: TreeSelectSlots,
   ctx: RenderContext<TreeSelectProps>
 ) {
   const { height, items, mainActiveIndex, activeId } = props;
@@ -38,10 +42,7 @@ function TreeSelect(
   const selectedItem: Partial<TreeSelectItem> = items[mainActiveIndex] || {};
   const subItems = selectedItem.children || [];
 
-  return (
+  const Nav = items.map((item, index) => (
-    <div class={bem()} style={{ height: `${height}px` }} {...inherit(ctx)}>
-      <div class={bem('nav')}>
-        {items.map((item, index) => (
     <div
       key={index}
       class={[
@@ -62,10 +63,14 @@ function TreeSelect(
     >
       {item.text}
     </div>
-        ))}
+  ));
-      </div>
+
-      <div class={bem('content')}>
+  function Content() {
-        {subItems.map(item => (
+    if (slots.content) {
+      return slots.content();
+    }
+
+    return subItems.map(item => (
       <div
         key={item.id}
         class={[
@@ -89,8 +94,13 @@ function TreeSelect(
           <Icon name="checked" size="16px" class={bem('selected')} />
         )}
       </div>
-        ))}
+    ));
-      </div>
+  }
+
+  return (
+    <div class={bem()} style={{ height: `${height}px` }} {...inherit(ctx)}>
+      <div class={bem('nav')}>{Nav}</div>
+      <div class={bem('content')}>{Content()}</div>
     </div>
   );
 }

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

@@ -1,5 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`content slot 1`] = `
+<div class="van-tree-select" style="height: 300px;">
+  <div class="van-tree-select__nav">
+    <div class="van-ellipsis van-tree-select__nav-item van-tree-select__nav-item--active">group1</div>
+  </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>

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

@@ -124,3 +124,20 @@ test('click disabled item', () => {
   items.at(0).trigger('click');
   expect(onClickItem).toHaveBeenCalledTimes(0);
 });
+
+test('content slot', () => {
+  const wrapper = mount(TreeSelect, {
+    propsData: {
+      items: [
+        {
+          text: 'group1'
+        }
+      ]
+    },
+    scopedSlots: {
+      content: () => 'Custom Content'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});