From 2961384530ea04bb06d71bf43f1bde0e3ccab706 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sun, 14 Mar 2021 11:24:48 +0800
Subject: [PATCH] feat(ShareSheet): add cancel slot (#8335)
---
src/share-sheet/README.md | 9 +++++----
src/share-sheet/README.zh-CN.md | 9 +++++----
src/share-sheet/ShareSheet.tsx | 10 +++++-----
.../test/__snapshots__/index.spec.ts.snap | 8 ++++++++
src/share-sheet/test/index.spec.ts | 13 +++++++++++++
5 files changed, 36 insertions(+), 13 deletions(-)
diff --git a/src/share-sheet/README.md b/src/share-sheet/README.md
index f835b5ba8..7493e8ac9 100644
--- a/src/share-sheet/README.md
+++ b/src/share-sheet/README.md
@@ -197,10 +197,11 @@ export default {
### Slots
-| Name | Description |
-| ----------- | ------------------ |
-| title | Custom title |
-| description | Custom description |
+| Name | Description |
+| ---------------- | ----------------------------------- |
+| title | Custom title |
+| description | Custom description |
+| cancel `v3.0.10` | Custom the content of cancel button |
### Less Variables
diff --git a/src/share-sheet/README.zh-CN.md b/src/share-sheet/README.zh-CN.md
index cbf29ccb8..e5ac96a17 100644
--- a/src/share-sheet/README.zh-CN.md
+++ b/src/share-sheet/README.zh-CN.md
@@ -215,10 +215,11 @@ export default {
### Slots
-| 名称 | 说明 |
-| ----------- | -------------- |
-| title | 自定义顶部标题 |
-| description | 自定义描述文字 |
+| 名称 | 说明 |
+| ---------------- | ------------------ |
+| title | 自定义顶部标题 |
+| description | 自定义描述文字 |
+| cancel `v3.0.10` | 自定义取消按钮内容 |
### 样式变量
diff --git a/src/share-sheet/ShareSheet.tsx b/src/share-sheet/ShareSheet.tsx
index 110d4a601..c4f578e9b 100644
--- a/src/share-sheet/ShareSheet.tsx
+++ b/src/share-sheet/ShareSheet.tsx
@@ -127,12 +127,12 @@ export default defineComponent({
return renderOptions(options as ShareSheetOption[]);
};
- const renderCancelText = () => {
- const text = props.cancelText ?? t('cancel');
- if (text) {
+ const renderCancelButton = () => {
+ const cancelText = props.cancelText ?? t('cancel');
+ if (slots.cancel || cancelText) {
return (
<button type="button" class={bem('cancel')} onClick={onCancel}>
- {text}
+ {slots.cancel ? slots.cancel() : cancelText}
</button>
);
}
@@ -150,7 +150,7 @@ export default defineComponent({
>
{renderHeader()}
{renderRows()}
- {renderCancelText()}
+ {renderCancelButton()}
</Popup>
);
},
diff --git a/src/share-sheet/test/__snapshots__/index.spec.ts.snap b/src/share-sheet/test/__snapshots__/index.spec.ts.snap
index 405b3a012..6321350f5 100644
--- a/src/share-sheet/test/__snapshots__/index.spec.ts.snap
+++ b/src/share-sheet/test/__snapshots__/index.spec.ts.snap
@@ -1,5 +1,13 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
+exports[`should render cancel slot correctly 1`] = `
+<button type="button"
+ class="van-share-sheet__cancel"
+>
+ Custom Cancel
+</button>
+`;
+
exports[`should render cancel text when using cancel-text prop 1`] = `
<button type="button"
class="van-share-sheet__cancel"
diff --git a/src/share-sheet/test/index.spec.ts b/src/share-sheet/test/index.spec.ts
index 457b1ea14..5e38dd805 100644
--- a/src/share-sheet/test/index.spec.ts
+++ b/src/share-sheet/test/index.spec.ts
@@ -104,3 +104,16 @@ test('should emit click-overlay event when overlay is clicked', async () => {
expect(onClickOverlay).toHaveBeenCalledTimes(1);
expect(wrapper.emitted('update:show')![0]).toEqual([false]);
});
+
+test('should render cancel slot correctly', async () => {
+ const wrapper = mount(ShareSheet, {
+ props: {
+ show: true,
+ },
+ slots: {
+ cancel: () => 'Custom Cancel',
+ },
+ });
+
+ expect(wrapper.find('.van-share-sheet__cancel').html()).toMatchSnapshot();
+});