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

src/tree-select/README.md

@@ -60,9 +60,15 @@ export default {
 
 | Event | Description | Arguments |
 |------|------|------|
-| click-nav | triggered when parent node is selected |  index: index of selected parent |
+| 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,59 +42,65 @@ function TreeSelect(
   const selectedItem: Partial<TreeSelectItem> = items[mainActiveIndex] || {};
   const subItems = selectedItem.children || [];
 
+  const Nav = items.map((item, index) => (
+    <div
+      key={index}
+      class={[
+        'van-ellipsis',
+        bem('nav-item', {
+          active: mainActiveIndex === index,
+          disabled: item.disabled
+        })
+      ]}
+      onClick={() => {
+        if (!item.disabled) {
+          emit(ctx, 'click-nav', index);
+
+          // compatible for old usage, should be removed in next major version
+          emit(ctx, 'navclick', index);
+        }
+      }}
+    >
+      {item.text}
+    </div>
+  ));
+
+  function Content() {
+    if (slots.content) {
+      return slots.content();
+    }
+
+    return subItems.map(item => (
+      <div
+        key={item.id}
+        class={[
+          'van-ellipsis',
+          bem('item', {
+            active: activeId === item.id,
+            disabled: item.disabled
+          })
+        ]}
+        onClick={() => {
+          if (!item.disabled) {
+            emit(ctx, 'click-item', item);
+
+            // compatible for old usage, should be removed in next major version
+            emit(ctx, 'itemclick', item);
+          }
+        }}
+      >
+        {item.text}
+        {activeId === item.id && (
+          <Icon name="checked" size="16px" class={bem('selected')} />
+        )}
+      </div>
+    ));
+  }
+
   return (
     <div class={bem()} style={{ height: `${height}px` }} {...inherit(ctx)}>
-      <div class={bem('nav')}>
-        {items.map((item, index) => (
-          <div
-            key={index}
-            class={[
-              'van-ellipsis',
-              bem('nav-item', {
-                active: mainActiveIndex === index,
-                disabled: item.disabled
-              })
-            ]}
-            onClick={() => {
-              if (!item.disabled) {
-                emit(ctx, 'click-nav', index);
-
-                // compatible for old usage, should be removed in next major version
-                emit(ctx, 'navclick', index);
-              }
-            }}
-          >
-            {item.text}
-          </div>
-        ))}
-      </div>
-      <div class={bem('content')}>
-        {subItems.map(item => (
-          <div
-            key={item.id}
-            class={[
-              'van-ellipsis',
-              bem('item', {
-                active: activeId === item.id,
-                disabled: item.disabled
-              })
-            ]}
-            onClick={() => {
-              if (!item.disabled) {
-                emit(ctx, 'click-item', item);
-
-                // compatible for old usage, should be removed in next major version
-                emit(ctx, 'itemclick', item);
-              }
-            }}
-          >
-            {item.text}
-            {activeId === item.id && (
-              <Icon name="checked" size="16px" class={bem('selected')} />
-            )}
-          </div>
-        ))}
-      </div>
+      <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();
+});