From dc6a3c4243853765930525c01974bc37055ac9e0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 25 Aug 2019 10:55:01 +0800
Subject: [PATCH] feat(CellGroup): add title slot (#4227)

---
 src/cell-group/index.tsx                      | 19 ++++++++++---------
 src/cell/README.md                            |  7 +++++++
 src/cell/README.zh-CN.md                      |  7 +++++++
 .../test/__snapshots__/index.spec.js.snap     |  7 +++++++
 src/cell/test/index.spec.js                   | 11 +++++++++++
 5 files changed, 42 insertions(+), 9 deletions(-)

diff --git a/src/cell-group/index.tsx b/src/cell-group/index.tsx
index a54ea593d..6284790d6 100644
--- a/src/cell-group/index.tsx
+++ b/src/cell-group/index.tsx
@@ -4,11 +4,15 @@ import { BORDER_TOP_BOTTOM } from '../utils/constant';
 
 // Types
 import { CreateElement, RenderContext } from 'vue/types';
-import { DefaultSlots } from '../utils/types';
+import { DefaultSlots, ScopedSlot } from '../utils/types';
 
 export type CellGroupProps = {
   title?: string;
-  border: boolean
+  border: boolean;
+};
+
+export type CellGroupSlots = DefaultSlots & {
+  title?: ScopedSlot;
 };
 
 const [createComponent, bem] = createNamespace('cell-group');
@@ -16,22 +20,19 @@ const [createComponent, bem] = createNamespace('cell-group');
 function CellGroup(
   h: CreateElement,
   props: CellGroupProps,
-  slots: DefaultSlots,
+  slots: CellGroupSlots,
   ctx: RenderContext<CellGroupProps>
 ) {
   const Group = (
-    <div
-      class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]}
-      {...inherit(ctx, true)}
-    >
+    <div class={[bem(), { [BORDER_TOP_BOTTOM]: props.border }]} {...inherit(ctx, true)}>
       {slots.default && slots.default()}
     </div>
   );
 
-  if (props.title) {
+  if (props.title || slots.title) {
     return (
       <div>
-        <div class={bem('title')}>{props.title}</div>
+        <div class={bem('title')}>{slots.title ? slots.title() : props.title}</div>
         {Group}
       </div>
     );
diff --git a/src/cell/README.md b/src/cell/README.md
index 7c3580c2a..14386fd88 100644
--- a/src/cell/README.md
+++ b/src/cell/README.md
@@ -132,6 +132,13 @@ Vue.use(Cell).use(CellGroup);
 |------|------|------|
 | click | Triggered when click cell | event: Event |
 
+### CellGroup Slots
+
+| Name | Description |
+|------|------|
+| default | Default slot |
+| title | Custom title |
+
 ### Cell Slots
 
 | Name | Description |
diff --git a/src/cell/README.zh-CN.md b/src/cell/README.zh-CN.md
index 22e05d1b0..507302995 100644
--- a/src/cell/README.zh-CN.md
+++ b/src/cell/README.zh-CN.md
@@ -147,3 +147,10 @@ Vue.use(Cell).use(CellGroup);
 | label | 自定义标题下方描述显示内容 |
 | icon | 自定义左侧图标 |
 | right-icon | 自定义右侧按钮，默认为`arrow` |
+
+### CellGroup Slots
+
+| 名称 | 说明 |
+|------|------|
+| default | 默认插槽 |
+| title | 自定义分组标题 |
diff --git a/src/cell/test/__snapshots__/index.spec.js.snap b/src/cell/test/__snapshots__/index.spec.js.snap
index b3889144a..28d08e12d 100644
--- a/src/cell/test/__snapshots__/index.spec.js.snap
+++ b/src/cell/test/__snapshots__/index.spec.js.snap
@@ -1,5 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`CellGroup title slot 1`] = `
+<div>
+  <div class="van-cell-group__title">CustomTitle</div>
+  <div class="van-cell-group van-hairline--top-bottom"></div>
+</div>
+`;
+
 exports[`arrow direction 1`] = `
 <div class="van-cell van-cell--clickable"><i class="van-icon van-icon-arrow-down van-cell__right-icon">
     <!----></i></div>
diff --git a/src/cell/test/index.spec.js b/src/cell/test/index.spec.js
index 21e44c60a..b049d184c 100644
--- a/src/cell/test/index.spec.js
+++ b/src/cell/test/index.spec.js
@@ -1,4 +1,5 @@
 import Cell from '..';
+import CellGroup from '../../cell-group';
 import { mount } from '../../../test/utils';
 
 test('click event', () => {
@@ -56,3 +57,13 @@ test('title-style prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('CellGroup title slot', () => {
+  const wrapper = mount(CellGroup, {
+    scopedSlots: {
+      title: () => 'CustomTitle'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});