From 0288fb35a4e5b42e49ac50491601a93dac0b2755 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E9=99=88=E5=98=89=E6=B6=B5?= <chenjiahan@youzan.com>
Date: Sun, 5 May 2019 16:43:12 +0800
Subject: [PATCH] [new feature] ActionSheet: add close-on-click-action prop

---
 docs/markdown/v2-progress-tracking.md    |  1 +
 packages/action-sheet/en-US.md           |  1 +
 packages/action-sheet/index.tsx          | 34 ++++++++++++++++--------
 packages/action-sheet/test/index.spec.js | 21 +++++++++++++++
 packages/action-sheet/zh-CN.md           |  1 +
 5 files changed, 47 insertions(+), 11 deletions(-)

diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index bb0413b46..f0a73bdee 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -55,6 +55,7 @@
 
 ### ActionSheet
 
+- 新增`close-on-click-action`属性
 - 支持同时使用`title`和`actions`属性
 
 ### Button
diff --git a/packages/action-sheet/en-US.md b/packages/action-sheet/en-US.md
index 99a6e5323..bbfb87e21 100644
--- a/packages/action-sheet/en-US.md
+++ b/packages/action-sheet/en-US.md
@@ -95,6 +95,7 @@ export default {
 | title | Title | `String` | - |
 | cancel-text | Text of cancel button | `String` | - |
 | overlay | Whether to show overlay | `Boolean` | `true` |
+| close-on-click-action | Whether to close when click action | `Boolean` | `false` |
 | close-on-click-overlay | Whether to close when click overlay | `Boolean` | `true` |
 | lazy-render | Whether to lazy render util appeared | `Boolean` | `true` |
 | get-container | Return the mount node for action-sheet | `String | () => HTMLElement` | - |
diff --git a/packages/action-sheet/index.tsx b/packages/action-sheet/index.tsx
index 156ecde3e..a525a7afb 100644
--- a/packages/action-sheet/index.tsx
+++ b/packages/action-sheet/index.tsx
@@ -23,6 +23,7 @@ export type ActionSheetProps = PopupMixinProps & {
   title?: string;
   actions: ActionSheetItem[];
   cancelText?: string;
+  closeOnClickAction?: boolean;
   safeAreaInsetBottom?: boolean;
 };
 
@@ -52,6 +53,26 @@ function ActionSheet(
     }
   }
 
+  function onClickOption(item: ActionSheetItem, index: number) {
+    return function (event: Event) {
+      event.stopPropagation();
+
+      if (item.disabled || item.loading) {
+        return;
+      }
+
+      if (item.callback) {
+        item.callback(item);
+      }
+
+      emit(ctx, 'select', item, index);
+
+      if (props.closeOnClickAction) {
+        emit(ctx, 'input', false);
+      }
+    };
+  }
+
   const Option = (item: ActionSheetItem, index: number) => (
     <div
       class={[
@@ -59,17 +80,7 @@ function ActionSheet(
         item.className,
         'van-hairline--top'
       ]}
-      onClick={(event: Event) => {
-        event.stopPropagation();
-
-        if (!item.disabled && !item.loading) {
-          if (item.callback) {
-            item.callback(item);
-          }
-
-          emit(ctx, 'select', item, index);
-        }
-      }}
+      onClick={onClickOption(item, index)}
     >
       {item.loading ? (
         <Loading class={bem('loading')} size="20px" />
@@ -113,6 +124,7 @@ ActionSheet.props = {
   title: String,
   actions: Array,
   cancelText: String,
+  closeOnClickAction: Boolean,
   safeAreaInsetBottom: Boolean,
   overlay: {
     type: Boolean,
diff --git a/packages/action-sheet/test/index.spec.js b/packages/action-sheet/test/index.spec.js
index 63a784a12..23d25ff8a 100644
--- a/packages/action-sheet/test/index.spec.js
+++ b/packages/action-sheet/test/index.spec.js
@@ -64,3 +64,24 @@ test('get container', () => {
 
   expect(wrapper.vm.$el.parentNode).toEqual(document.body);
 });
+
+test('close-on-click-action prop', () => {
+  const onInput = jest.fn();
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      actions: [{ name: 'Option' }],
+      closeOnClickAction: true
+    },
+    context: {
+      on: {
+        input: onInput
+      }
+    }
+  });
+
+  const option = wrapper.find('.van-action-sheet__item');
+  option.trigger('click');
+
+  expect(onInput).toHaveBeenCalledWith(false);
+});
diff --git a/packages/action-sheet/zh-CN.md b/packages/action-sheet/zh-CN.md
index b0a5b2221..55c2df420 100644
--- a/packages/action-sheet/zh-CN.md
+++ b/packages/action-sheet/zh-CN.md
@@ -102,6 +102,7 @@ export default {
 | title | 标题 | `String` | - | - |
 | cancel-text | 取消按钮文字 | `String` | - | - |
 | overlay | 是否显示遮罩层 | `Boolean` | `true` | - |
+| close-on-click-action | 是否在点击选项后关闭 | `Boolean` | `false` | 2.0.0 |
 | close-on-click-overlay | 是否在点击蒙层后关闭 | `Boolean` | `true` | - |
 | lazy-render | 是否在显示弹层时才渲染节点 | `Boolean` | `true` | 1.1.11 |
 | get-container | 指定挂载的节点，可以传入选择器，<br>或一个返回节点的函数 | `String | () => HTMLElement` | - | - |