feat(ActionSheet): add closeable prop (#7099)

* feat(ActionSheet): add closeable prop

* feat(ActionSheet): add closeable prop

* Update index.tsx

Co-authored-by: neverland <chenjiahan@youzan.com>

src/action-sheet/README.md

@@ -155,6 +155,7 @@ export default {
 | title | Title | _string_ | - |
 | cancel-text | Text of cancel button | _string_ | - |
 | description | Description above the options | _string_ | - |
+| closeable `v2.10.5` | Whether to show close icon | _boolean_ | `true` |
 | close-icon | Close icon name | _string_ | `cross` |
 | duration | Transition duration, unit second | _number \| string_ | `0.3` |
 | round | Whether to show round corner | _boolean_ | `true` |

src/action-sheet/README.zh-CN.md

@@ -161,6 +161,7 @@ export default {
 | title | 顶部标题 | _string_ | - |
 | cancel-text | 取消按钮文字 | _string_ | - |
 | description | 选项上方的描述信息 | _string_ | - |
+| closeable `v2.10.5` | 是否显示关闭图标 | _boolean_ | `true` |
 | close-icon | 关闭[图标名称](#/zh-CN/icon)或图片链接 | _string_ | `cross` |
 | duration | 动画时长，单位秒 | _number \| string_ | `0.3` |
 | round | 是否显示圆角 | _boolean_ | `true` |

src/action-sheet/index.tsx

@@ -30,6 +30,7 @@ export type ActionSheetProps = PopupMixinProps & {
   title?: string;
   actions?: ActionSheetItem[];
   duration: number | string;
+  closeable?: boolean;
   closeIcon: string;
   cancelText?: string;
   description?: string;
@@ -50,7 +51,7 @@ function ActionSheet(
   slots: ActionSheetSlots,
   ctx: RenderContext<ActionSheetProps>
 ) {
-  const { title, cancelText } = props;
+  const { title, cancelText, closeable } = props;
 
   function onCancel() {
     emit(ctx, 'input', false);
@@ -62,11 +63,13 @@ function ActionSheet(
       return (
         <div class={bem('header')}>
           {title}
-          <Icon
-            name={props.closeIcon}
-            class={bem('close')}
-            onClick={onCancel}
-          />
+          {closeable && (
+            <Icon
+              name={props.closeIcon}
+              class={bem('close')}
+              onClick={onCancel}
+            />
+          )}
         </div>
       );
     }
@@ -179,6 +182,10 @@ ActionSheet.props = {
     type: Boolean,
     default: true,
   },
+  closeable: {
+    type: Boolean,
+    default: true,
+  },
   closeIcon: {
     type: String,
     default: 'cross',

src/action-sheet/test/index.spec.js

@@ -198,3 +198,15 @@ test('close-icon prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('closeable prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      title: 'Title',
+      closeable: false,
+    },
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});