fix(ImagePreview): close event triggered twice (#5411)

src/action-sheet/index.tsx

@@ -1,7 +1,7 @@
 import { createNamespace } from '../utils';
 import { emit, inherit } from '../utils/functional';
 import { BORDER_TOP, BORDER_BOTTOM } from '../utils/constant';
-import { PopupMixin } from '../mixins/popup';
+import { popupMixinProps } from '../mixins/popup';
 import Icon from '../icon';
 import Popup from '../popup';
 import Loading from '../loading';
@@ -152,7 +152,7 @@ function ActionSheet(
 }
 
 ActionSheet.props = {
-  ...PopupMixin.props,
+  ...popupMixinProps,
   title: String,
   actions: Array,
   duration: Number,

src/dialog/Dialog.js

@@ -6,7 +6,7 @@ import Button from '../button';
 const [createComponent, bem, t] = createNamespace('dialog');
 
 export default createComponent({
-  mixins: [PopupMixin],
+  mixins: [PopupMixin()],
 
   props: {
     title: String,

src/image-preview/ImagePreview.js

@@ -18,7 +18,12 @@ function getDistance(touches) {
 }
 
 export default createComponent({
-  mixins: [PopupMixin, TouchMixin],
+  mixins: [
+    PopupMixin({
+      skipToggleEvent: true
+    }),
+    TouchMixin
+  ],
 
   props: {
     className: null,
@@ -83,8 +88,8 @@ export default createComponent({
       };
 
       if (scale !== 1) {
-        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this.moveX /
+        style.transform = `scale3d(${scale}, ${scale}, 1) translate(${this
-          scale}px, ${this.moveY / scale}px)`;
+          .moveX / scale}px, ${this.moveY / scale}px)`;
       }
 
       return style;
@@ -92,8 +97,15 @@ export default createComponent({
   },
 
   watch: {
-    value() {
+    value(val) {
       this.setActive(this.startPosition);
+
+      if (!val) {
+        this.$emit('close', {
+          index: this.active,
+          url: this.images[this.active]
+        });
+      }
     },
 
     startPosition(active) {
@@ -116,14 +128,7 @@ export default createComponent({
       if (deltaTime < 300 && offsetX < 10 && offsetY < 10) {
         if (!this.doubleClickTimer) {
           this.doubleClickTimer = setTimeout(() => {
-            const index = this.active;
-
             if (!this.asyncClose) {
-              this.$emit('close', {
-                index,
-                url: this.images[index]
-              });
-
               this.$emit('input', false);
             }
 
@@ -248,7 +253,8 @@ export default createComponent({
       if (this.showIndex) {
         return (
           <div class={bem('index')}>
-            {this.slots('index') || `${this.active + 1} / ${this.images.length}`}
+            {this.slots('index') ||
+              `${this.active + 1} / ${this.images.length}`}
           </div>
         );
       }

src/image-preview/demo/index.vue

@@ -1,37 +1,25 @@
 <template>
   <demo-section>
     <demo-block :title="$t('basicUsage')">
-      <van-button
+      <van-button type="primary" @click="showImagePreview">
-        type="primary"
-        @click="showImagePreview"
-      >
         {{ $t('button1') }}
       </van-button>
     </demo-block>
 
     <demo-block :title="$t('button2')">
-      <van-button
+      <van-button type="primary" @click="showImagePreview(1)">
-        type="primary"
-        @click="showImagePreview(1)"
-      >
         {{ $t('button2') }}
       </van-button>
     </demo-block>
 
     <demo-block :title="$t('button3')">
-      <van-button
+      <van-button type="primary" @click="showImagePreview(0, 3000)">
-        type="primary"
-        @click="showImagePreview(0, 1000)"
-      >
         {{ $t('button3') }}
       </van-button>
     </demo-block>
 
     <demo-block :title="$t('componentCall')">
-      <van-button
+      <van-button type="primary" @click="componentCall">
-        type="primary"
-        @click="componentCall"
-      >
         {{ $t('componentCall') }}
       </van-button>
       <van-image-preview
@@ -112,7 +100,7 @@ export default {
 </script>
 
 <style lang="less">
-@import "../../style/var";
+@import '../../style/var';
 
 .demo-image-preview {
   background-color: @white;

src/image-preview/test/index.spec.js

@@ -92,7 +92,7 @@ test('double click', async done => {
   done();
 });
 
-test('onClose option', async done => {
+test('onClose option', () => {
   const onClose = jest.fn();
   const instance = ImagePreview({
     images,
@@ -100,37 +100,10 @@ test('onClose option', async done => {
     onClose
   });
 
-  instance.$emit('input', true);
-  expect(onClose).toHaveBeenCalledTimes(0);
-
-  await later(300);
-
-  const wrapper = document.querySelector('.van-image-preview');
-  const swipe = wrapper.querySelector('.van-swipe__track');
-  triggerDrag(swipe, 0, 0);
-  expect(onClose).toHaveBeenCalledTimes(1);
-  expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' });
-  done();
-});
-
-test('onClose should only trigger once', async done => {
-  const onClose = jest.fn();
-  const instance = ImagePreview({
-    images,
-    startPostion: 1,
-    onClose
-  });
-
-  ImagePreview({
-    images,
-    startPostion: 1,
-    onClose
-  });
-
   instance.close();
 
   expect(onClose).toHaveBeenCalledTimes(1);
-  done();
+  expect(onClose).toHaveBeenCalledWith({ index: 0, url: 'https://img.yzcdn.cn/1.png' });
 });
 
 test('onChange option', async done => {

src/mixins/popup/index.js

@@ -6,20 +6,7 @@ import { on, off, preventDefault } from '../../utils/dom/event';
 import { openOverlay, closeOverlay, updateOverlay } from './overlay';
 import { getScrollEventTarget } from '../../utils/dom/scroll';
 
-export const PopupMixin = {
+export const popupMixinProps = {
-  mixins: [
-    TouchMixin,
-    CloseOnPopstateMixin,
-    PortalMixin({
-      afterPortal() {
-        if (this.overlay) {
-          updateOverlay();
-        }
-      }
-    })
-  ],
-
-  props: {
   // whether to show popup
   value: Boolean,
   // whether to show overlay
@@ -42,7 +29,23 @@ export const PopupMixin = {
     type: Boolean,
     default: true
   }
-  },
+};
+
+export function PopupMixin(options = {}) {
+  return {
+    mixins: [
+      TouchMixin,
+      CloseOnPopstateMixin,
+      PortalMixin({
+        afterPortal() {
+          if (this.overlay) {
+            updateOverlay();
+          }
+        }
+      })
+    ],
+
+    props: popupMixinProps,
 
     data() {
       return {
@@ -61,7 +64,10 @@ export const PopupMixin = {
         const type = val ? 'open' : 'close';
         this.inited = this.inited || this.value;
         this[type]();
+
+        if (!options.skipToggleEvent) {
           this.$emit(type);
+        }
       },
 
       overlay: 'renderOverlay'
@@ -193,3 +199,4 @@ export const PopupMixin = {
       }
     }
   };
+}

src/mixins/popup/overlay.ts

@@ -31,8 +31,7 @@ function onClickOverlay(): void {
   }
 }
 
-export function updateOverlay(): void {
+function mountOverlay() {
-  if (!overlay) {
   overlay = mount(Overlay, {
     on: {
       click: onClickOverlay
@@ -40,6 +39,11 @@ export function updateOverlay(): void {
   });
 }
 
+export function updateOverlay(): void {
+  if (!overlay) {
+    mountOverlay();
+  }
+
   if (context.top) {
     const { vm, config } = context.top;
 

src/notify/Notify.tsx

@@ -1,7 +1,7 @@
 import { createNamespace } from '../utils';
 import { WHITE } from '../utils/constant';
 import { inherit } from '../utils/functional';
-import { PopupMixin } from '../mixins/popup';
+import { popupMixinProps } from '../mixins/popup';
 import Popup from '../popup';
 
 // Types
@@ -48,7 +48,7 @@ function Notify(
 }
 
 Notify.props = {
-  ...PopupMixin.props,
+  ...popupMixinProps,
   background: String,
   className: null as any,
   message: [Number, String],

src/popup/index.js

@@ -5,7 +5,7 @@ import Icon from '../icon';
 const [createComponent, bem] = createNamespace('popup');
 
 export default createComponent({
-  mixins: [PopupMixin],
+  mixins: [PopupMixin()],
 
   props: {
     round: Boolean,

src/toast/Toast.js

@@ -7,7 +7,7 @@ import Loading from '../loading';
 const [createComponent, bem] = createNamespace('toast');
 
 export default createComponent({
-  mixins: [PopupMixin],
+  mixins: [PopupMixin()],
 
   props: {
     icon: String,

types/image-preview.d.ts

@@ -19,7 +19,9 @@ export type ImagePreviewOptions = string[] | {
 
 export class VanImagePreview extends VanPopupMixin {
   images: string[];
+
   showIndex: boolean;
+
   startPosition: number;
 }