From 6ab2b3bf1f53dabf272ae3a6d663221236eab47c Mon Sep 17 00:00:00 2001
From: chenjiahan <chenjiahan@youzan.com>
Date: Mon, 14 Sep 2020 17:36:58 +0800
Subject: [PATCH] refactor(ImagePreview): refactor with composition api

---
 package.json                      |   4 +-
 src/image-preview/ImagePreview.js | 242 +++++++++++++++---------------
 yarn.lock                         | 106 ++++++-------
 3 files changed, 174 insertions(+), 178 deletions(-)

diff --git a/package.json b/package.json
index 3034cb4a1..4e9ec2aa7 100644
--- a/package.json
+++ b/package.json
@@ -64,9 +64,9 @@
   "devDependencies": {
     "@ls-lint/ls-lint": "^1.8.0",
     "@vant/cli": "^3.0.0-alpha.9",
-    "@vue/compiler-sfc": "3.0.0-rc.5",
+    "@vue/compiler-sfc": "3.0.0-rc.10",
     "prettier": "^2.0.4",
-    "vue": "3.0.0-rc.5"
+    "vue": "3.0.0-rc.10"
   },
   "sideEffects": [
     "es/**/style/*",
diff --git a/src/image-preview/ImagePreview.js b/src/image-preview/ImagePreview.js
index 33e25da59..2f14ac819 100644
--- a/src/image-preview/ImagePreview.js
+++ b/src/image-preview/ImagePreview.js
@@ -1,10 +1,12 @@
+import { nextTick, onMounted, reactive, ref, watch } from 'vue';
+
 // Utils
 import { bem, createComponent } from './shared';
 import { callInterceptor } from '../utils/interceptor';
 
-// Mixins
-import { TouchMixin } from '../mixins/touch';
-import { BindEventMixin } from '../mixins/bind-event';
+// Composition
+import { useEventListener } from '@vant/use';
+import { usePublicApi } from '../composition/use-public-api';
 
 // Components
 import Icon from '../icon';
@@ -13,14 +15,6 @@ import Popup from '../popup';
 import ImagePreviewItem from './ImagePreviewItem';
 
 export default createComponent({
-  mixins: [
-    TouchMixin,
-    BindEventMixin(function (bind) {
-      bind(window, 'resize', this.resize, true);
-      bind(window, 'orientationchange', this.resize, true);
-    }),
-  ],
-
   props: {
     show: Boolean,
     className: null,
@@ -75,153 +69,155 @@ export default createComponent({
 
   emits: ['scale', 'close', 'closed', 'change', 'update:show'],
 
-  data() {
-    return {
+  setup(props, { emit, slots }) {
+    const rootRef = ref();
+    const swipeRef = ref();
+
+    const state = reactive({
       active: 0,
       rootWidth: 0,
       rootHeight: 0,
-      doubleClickTimer: null,
+    });
+
+    const resize = () => {
+      const root = rootRef.value;
+      if (root && root.getBoundingClientRect) {
+        const rect = root.getBoundingClientRect();
+        state.rootWidth = rect.width;
+        state.rootHeight = rect.height;
+      }
     };
-  },
 
-  mounted() {
-    this.resize();
-  },
+    const emitScale = (args) => {
+      emit('scale', args);
+    };
 
-  watch: {
-    startPosition: 'setActive',
-
-    show(val) {
-      if (val) {
-        this.setActive(+this.startPosition);
-        this.$nextTick(() => {
-          this.resize();
-          this.$refs.swipe.swipeTo(+this.startPosition, { immediate: true });
-        });
-      } else {
-        this.$emit('close', {
-          index: this.active,
-          url: this.images[this.active],
-        });
-      }
-    },
-  },
-
-  methods: {
-    resize() {
-      if (this.$el && this.$el.getBoundingClientRect) {
-        const rect = this.$el.getBoundingClientRect();
-        this.rootWidth = rect.width;
-        this.rootHeight = rect.height;
-      }
-    },
-
-    emitClose() {
+    const emitClose = () => {
       callInterceptor({
-        interceptor: this.beforeClose,
-        args: [this.active],
+        interceptor: props.beforeClose,
+        args: [state.active],
         done: () => {
-          this.$emit('update:show', false);
+          emit('update:show', false);
         },
       });
-    },
+    };
 
-    emitScale(args) {
-      this.$emit('scale', args);
-    },
-
-    setActive(active) {
-      if (active !== this.active) {
-        this.active = active;
-        this.$emit('change', active);
+    const setActive = (active) => {
+      if (active !== state.active) {
+        state.active = active;
+        emit('change', active);
       }
-    },
+    };
 
-    genIndex() {
-      if (this.showIndex) {
+    const renderIndex = () => {
+      if (props.showIndex) {
         return (
           <div class={bem('index')}>
-            {this.$slots.index
-              ? this.$slots.index()
-              : `${this.active + 1} / ${this.images.length}`}
+            {slots.index
+              ? slots.index()
+              : `${state.active + 1} / ${props.images.length}`}
           </div>
         );
       }
-    },
+    };
 
-    genCover() {
-      if (this.$slots.cover) {
-        return <div class={bem('cover')}>{this.$slots.cover()}</div>;
+    const renderCover = () => {
+      if (slots.cover) {
+        return <div class={bem('cover')}>{slots.cover()}</div>;
       }
-    },
+    };
 
-    genImages() {
-      return (
-        <Swipe
-          ref="swipe"
-          lazyRender
-          loop={this.loop}
-          class={bem('swipe')}
-          duration={this.swipeDuration}
-          initialSwipe={this.startPosition}
-          showIndicators={this.showIndicators}
-          indicatorColor="white"
-          onChange={this.setActive}
-        >
-          {this.images.map((image) => (
-            <ImagePreviewItem
-              src={image}
-              show={this.show}
-              active={this.active}
-              maxZoom={this.maxZoom}
-              minZoom={this.minZoom}
-              rootWidth={this.rootWidth}
-              rootHeight={this.rootHeight}
-              onScale={this.emitScale}
-              onClose={this.emitClose}
-            />
-          ))}
-        </Swipe>
-      );
-    },
+    const renderImages = () => (
+      <Swipe
+        ref={swipeRef}
+        lazyRender
+        loop={props.loop}
+        class={bem('swipe')}
+        duration={props.swipeDuration}
+        initialSwipe={props.startPosition}
+        showIndicators={props.showIndicators}
+        indicatorColor="white"
+        onChange={setActive}
+      >
+        {props.images.map((image) => (
+          <ImagePreviewItem
+            src={image}
+            show={props.show}
+            active={state.active}
+            maxZoom={props.maxZoom}
+            minZoom={props.minZoom}
+            rootWidth={state.rootWidth}
+            rootHeight={state.rootHeight}
+            onScale={emitScale}
+            onClose={emitClose}
+          />
+        ))}
+      </Swipe>
+    );
 
-    genClose() {
-      if (this.closeable) {
+    const renderClose = () => {
+      if (props.closeable) {
         return (
           <Icon
             role="button"
-            name={this.closeIcon}
-            class={bem('close-icon', this.closeIconPosition)}
-            onClick={this.emitClose}
+            name={props.closeIcon}
+            class={bem('close-icon', props.closeIconPosition)}
+            onClick={emitClose}
           />
         );
       }
-    },
+    };
 
-    onClosed() {
-      this.$emit('closed');
-    },
+    const onClosed = () => {
+      emit('closed');
+    };
 
-    // @exposed-api
-    swipeTo(index, options) {
-      if (this.$refs.swipe) {
-        this.$refs.swipe.swipeTo(index, options);
+    const swipeTo = (index, options) => {
+      if (swipeRef.value) {
+        swipeRef.value.swipeTo(index, options);
       }
-    },
-  },
+    };
 
-  render() {
-    return (
+    usePublicApi({ swipeTo });
+    useEventListener('resize', resize);
+    useEventListener('orientationchange', resize);
+
+    onMounted(resize);
+
+    watch(() => props.startPosition, setActive);
+
+    watch(
+      () => props.show,
+      (value) => {
+        const { images, startPosition } = props;
+        if (value) {
+          setActive(+startPosition);
+          nextTick(() => {
+            resize();
+            swipeRef.value.swipeTo(+startPosition, { immediate: true });
+          });
+        } else {
+          emit('close', {
+            index: state.active,
+            url: images[state.active],
+          });
+        }
+      }
+    );
+
+    return () => (
       <Popup
-        show={this.show}
-        class={[bem(), this.className]}
+        ref={rootRef}
+        show={props.show}
+        class={[bem(), props.className]}
         overlayClass={bem('overlay')}
-        onClosed={this.onClosed}
+        closeOnPopstate={props.closeOnPopstate}
+        onClosed={onClosed}
       >
-        {this.genClose()}
-        {this.genImages()}
-        {this.genIndex()}
-        {this.genCover()}
+        {renderClose()}
+        {renderImages()}
+        {renderIndex()}
+        {renderCover()}
       </Popup>
     );
   },
diff --git a/yarn.lock b/yarn.lock
index ac74f2e60..ee5444069 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2180,36 +2180,36 @@
     html-tags "^3.1.0"
     svg-tags "^1.0.0"
 
-"@vue/compiler-core@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/compiler-core/download/@vue/compiler-core-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065111625&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-core%2Fdownload%2F%40vue%2Fcompiler-core-3.0.0-rc.5.tgz#dd4f1816fcae34a81bc60e584f97993cad284d54"
-  integrity sha1-3U8YFvyuNKgbxg5YT5eZPK0oTVQ=
+"@vue/compiler-core@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/compiler-core/download/@vue/compiler-core-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111625&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-core%2Fdownload%2F%40vue%2Fcompiler-core-3.0.0-rc.10.tgz#a76f713fb0462429ec0ec10a472fff1f539c5772"
+  integrity sha1-p29xP7BGJCnsDsEKRy//H1OcV3I=
   dependencies:
     "@babel/parser" "^7.10.4"
     "@babel/types" "^7.10.4"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/shared" "3.0.0-rc.10"
     estree-walker "^2.0.1"
     source-map "^0.6.1"
 
-"@vue/compiler-dom@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/compiler-dom/download/@vue/compiler-dom-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065111635&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-dom%2Fdownload%2F%40vue%2Fcompiler-dom-3.0.0-rc.5.tgz#83905e8601123a3654b90fbd80708a16530ce21a"
-  integrity sha1-g5BehgESOjZUuQ+9gHCKFlMM4ho=
+"@vue/compiler-dom@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/compiler-dom/download/@vue/compiler-dom-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111635&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-dom%2Fdownload%2F%40vue%2Fcompiler-dom-3.0.0-rc.10.tgz#dd1380d1ee61170de76f9eb91e0d8ac7985f0ae0"
+  integrity sha1-3ROA0e5hFw3nb565Hg2Kx5hfCuA=
   dependencies:
-    "@vue/compiler-core" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/compiler-core" "3.0.0-rc.10"
+    "@vue/shared" "3.0.0-rc.10"
 
-"@vue/compiler-sfc@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.0-rc.5.tgz#374e52a6fbf8fb9aee1213026050a0f1c496fecf"
-  integrity sha1-N05Spvv4+5ruEhMCYFCg8cSW/s8=
+"@vue/compiler-sfc@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/compiler-sfc/download/@vue/compiler-sfc-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111795&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-sfc%2Fdownload%2F%40vue%2Fcompiler-sfc-3.0.0-rc.10.tgz#4351ece66cdf4d758877482f69421c43d994dbaf"
+  integrity sha1-Q1Hs5mzfTXWId0gvaUIcQ9mU268=
   dependencies:
     "@babel/parser" "^7.10.4"
     "@babel/types" "^7.10.4"
-    "@vue/compiler-core" "3.0.0-rc.5"
-    "@vue/compiler-dom" "3.0.0-rc.5"
-    "@vue/compiler-ssr" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/compiler-core" "3.0.0-rc.10"
+    "@vue/compiler-dom" "3.0.0-rc.10"
+    "@vue/compiler-ssr" "3.0.0-rc.10"
+    "@vue/shared" "3.0.0-rc.10"
     consolidate "^0.15.1"
     estree-walker "^2.0.1"
     hash-sum "^2.0.0"
@@ -2221,13 +2221,13 @@
     postcss-selector-parser "^6.0.2"
     source-map "^0.6.1"
 
-"@vue/compiler-ssr@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065111870&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-ssr%2Fdownload%2F%40vue%2Fcompiler-ssr-3.0.0-rc.5.tgz#878406c59daff362ecdcb199fb9467a769ca8de5"
-  integrity sha1-h4QGxZ2v82Ls3LGZ+5Rnp2nKjeU=
+"@vue/compiler-ssr@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/compiler-ssr/download/@vue/compiler-ssr-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065111870&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fcompiler-ssr%2Fdownload%2F%40vue%2Fcompiler-ssr-3.0.0-rc.10.tgz#95a5f6b65b19a514c94f056994ec144b3b1b03ae"
+  integrity sha1-laX2tlsZpRTJTwVplOwUSzsbA64=
   dependencies:
-    "@vue/compiler-dom" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/compiler-dom" "3.0.0-rc.10"
+    "@vue/shared" "3.0.0-rc.10"
 
 "@vue/component-compiler-utils@^3.1.2":
   version "3.1.2"
@@ -2245,34 +2245,34 @@
   optionalDependencies:
     prettier "^1.18.2"
 
-"@vue/reactivity@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065204064&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.0.0-rc.5.tgz#45cff8d839d7ad130b1e499239090050fdecff13"
-  integrity sha1-Rc/42DnXrRMLHkmSOQkAUP3s/xM=
+"@vue/reactivity@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/reactivity/download/@vue/reactivity-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065204064&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Freactivity%2Fdownload%2F%40vue%2Freactivity-3.0.0-rc.10.tgz#34d5f51bcc5a7c36e27d7a9c1bd7a3d25ffa7c56"
+  integrity sha1-NNX1G8xafDbifXqcG9ej0l/6fFY=
   dependencies:
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/shared" "3.0.0-rc.10"
 
-"@vue/runtime-core@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/runtime-core/download/@vue/runtime-core-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065204365&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-core%2Fdownload%2F%40vue%2Fruntime-core-3.0.0-rc.5.tgz#dd59af3a5fc089d1cdc05a657320c0dc17e5c362"
-  integrity sha1-3VmvOl/AidHNwFplcyDA3Bflw2I=
+"@vue/runtime-core@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/runtime-core/download/@vue/runtime-core-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065204365&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-core%2Fdownload%2F%40vue%2Fruntime-core-3.0.0-rc.10.tgz#9055aef5113cbc328aaec29760c2151e0ed3cf40"
+  integrity sha1-kFWu9RE8vDKKrsKXYMIVHg7Tz0A=
   dependencies:
-    "@vue/reactivity" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/reactivity" "3.0.0-rc.10"
+    "@vue/shared" "3.0.0-rc.10"
 
-"@vue/runtime-dom@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/runtime-dom/download/@vue/runtime-dom-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065204677&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-dom%2Fdownload%2F%40vue%2Fruntime-dom-3.0.0-rc.5.tgz#2fd75a1f29b23abf0ffe5ccdedabda11721c5b5b"
-  integrity sha1-L9daHymyOr8P/lzN7avaEXIcW1s=
+"@vue/runtime-dom@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/runtime-dom/download/@vue/runtime-dom-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065204677&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fruntime-dom%2Fdownload%2F%40vue%2Fruntime-dom-3.0.0-rc.10.tgz#50f95cb991483a4262163723320967ad17bb321f"
+  integrity sha1-UPlcuZFIOkJiFjcjMglnrRe7Mh8=
   dependencies:
-    "@vue/runtime-core" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/runtime-core" "3.0.0-rc.10"
+    "@vue/shared" "3.0.0-rc.10"
     csstype "^2.6.8"
 
-"@vue/shared@3.0.0-rc.5":
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0-rc.5.tgz?cache=0&sync_timestamp=1599065113122&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fshared%2Fdownload%2F%40vue%2Fshared-3.0.0-rc.5.tgz#cea2378e3e37363ddc1f5dd158edc9c9b5b3fff0"
-  integrity sha1-zqI3jj43Nj3cH13RWO3JybWz//A=
+"@vue/shared@3.0.0-rc.10":
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/@vue/shared/download/@vue/shared-3.0.0-rc.10.tgz?cache=0&sync_timestamp=1599065113122&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40vue%2Fshared%2Fdownload%2F%40vue%2Fshared-3.0.0-rc.10.tgz#e7ab62abcabbfc738545902b96a3aa78f59f3286"
+  integrity sha1-56tiq8q7/HOFRZArlqOqePWfMoY=
 
 "@vue/test-utils@2.0.0-beta.2":
   version "2.0.0-beta.2"
@@ -12458,14 +12458,14 @@ vue-template-es2015-compiler@^1.9.0:
   resolved "https://registry.yarnpkg.com/vue-template-es2015-compiler/-/vue-template-es2015-compiler-1.9.1.tgz#1ee3bc9a16ecbf5118be334bb15f9c46f82f5825"
   integrity sha512-4gDntzrifFnCEvyoO8PqyJDmguXgVPxKiIxrBKjIowvL9l+N66196+72XVYR8BBf1Uv1Fgt3bGevJ+sEmxfZzw==
 
-vue@3.0.0-rc.5:
-  version "3.0.0-rc.5"
-  resolved "https://registry.npm.taobao.org/vue/download/vue-3.0.0-rc.5.tgz#973175d45a892b3bd23ef5de7faa4add9c66275f"
-  integrity sha1-lzF11FqJKzvSPvXef6pK3ZxmJ18=
+vue@3.0.0-rc.10:
+  version "3.0.0-rc.10"
+  resolved "https://registry.npm.taobao.org/vue/download/vue-3.0.0-rc.10.tgz#31298a757b4fad6ee8973d0fa27c4fde8574bd01"
+  integrity sha1-MSmKdXtPrW7olz0PonxP3oV0vQE=
   dependencies:
-    "@vue/compiler-dom" "3.0.0-rc.5"
-    "@vue/runtime-dom" "3.0.0-rc.5"
-    "@vue/shared" "3.0.0-rc.5"
+    "@vue/compiler-dom" "3.0.0-rc.10"
+    "@vue/runtime-dom" "3.0.0-rc.10"
+    "@vue/shared" "3.0.0-rc.10"
 
 w3c-hr-time@^1.0.1:
   version "1.0.2"