feat(ActionSheet): add close-icon prop (#5016)

src/action-sheet/index.tsx

@@ -26,6 +26,7 @@ export type ActionSheetProps = PopupMixinProps & {
   title?: string;
   actions?: ActionSheetItem[];
   duration: number;
+  closeIcon: string;
   cancelText?: string;
   description?: string;
   closeOnClickAction?: boolean;
@@ -52,7 +53,7 @@ function ActionSheet(
       return (
         <div class={[bem('header'), BORDER_BOTTOM]}>
           {title}
-          <Icon name="close" class={bem('close')} onClick={onCancel} />
+          <Icon name={props.closeIcon} class={bem('close')} onClick={onCancel} />
         </div>
       );
     }
@@ -158,6 +159,10 @@ ActionSheet.props = {
     type: Boolean,
     default: true
   },
+  closeIcon: {
+    type: String,
+    default: 'close'
+  },
   safeAreaInsetBottom: {
     type: Boolean,
     default: true

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

@@ -6,6 +6,13 @@ exports[`callback events 1`] = `
   </button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span><span class="van-action-sheet__subname">Subname</span></button><button class="van-action-sheet__cancel">Cancel</button></div>
 `;
 
+exports[`close-icon prop 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__header van-hairline--bottom">Title<i class="van-icon van-icon-cross van-action-sheet__close">
+      <!----></i></div>
+</div>
+`;
+
 exports[`color option 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top" style="color: red;"><span class="van-action-sheet__name">Option</span></button></div>`;
 
 exports[`description prop 1`] = `
@@ -16,6 +23,12 @@ exports[`description prop 1`] = `
 
 exports[`disable lazy-render 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" style="display: none;" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button><button class="van-action-sheet__cancel">Cancel</button></div>`;
 
-exports[`render title and default slot 1`] = ``;
+exports[`render title and default slot 1`] = `
+<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom">
+  <div class="van-action-sheet__header van-hairline--bottom">Title<i class="van-icon van-icon-close van-action-sheet__close">
+      <!----></i></div>
+  <div class="van-action-sheet__content">Default</div>
+</div>
+`;
 
 exports[`round prop 1`] = `<div class="van-popup van-popup--round van-popup--bottom van-popup--safe-area-inset-bottom van-action-sheet" name="van-popup-slide-bottom"><button class="van-action-sheet__item van-hairline--top"><span class="van-action-sheet__name">Option</span></button></div>`;

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

@@ -96,6 +96,7 @@ test('disable lazy-render', () => {
 test('render title and default slot', () => {
   const wrapper = mount(ActionSheet, {
     propsData: {
+      value: true,
       title: 'Title'
     },
     scopedSlots: {
@@ -174,3 +175,15 @@ test('description prop', () => {
 
   expect(wrapper).toMatchSnapshot();
 });
+
+test('close-icon prop', () => {
+  const wrapper = mount(ActionSheet, {
+    propsData: {
+      value: true,
+      title: 'Title',
+      closeIcon: 'cross'
+    }
+  });
+
+  expect(wrapper).toMatchSnapshot();
+});