From abe3e59bedb97bf6c5279ef4ff9e602525cd8011 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@youzan.com>
Date: Sat, 29 Jun 2019 11:31:53 +0800
Subject: [PATCH] [improvement] mixins typescript (#3690)

---
 src/circle/demo/index.vue                     |  4 +--
 .../test/__snapshots__/demo.spec.js.snap      |  8 ++---
 .../test/__snapshots__/index.spec.js.snap     | 16 +++++-----
 src/mixins/{bind-event.js => bind-event.ts}   | 10 ++++--
 src/mixins/click-outside.js                   | 20 ------------
 src/mixins/click-outside.ts                   | 31 +++++++++++++++++++
 src/mixins/popup/type.ts                      |  2 +-
 src/mixins/{portal.js => portal.ts}           | 17 +++++++---
 src/mixins/{relation.js => relation.ts}       | 18 +++++++----
 src/mixins/slots.js                           | 16 ----------
 src/mixins/slots.ts                           | 20 ++++++++++++
 src/mixins/{touch.js => touch.ts}             | 29 ++++++++++++-----
 src/utils/create/bem.ts                       |  2 ++
 src/utils/create/i18n.ts                      |  2 ++
 src/utils/create/index.ts                     |  8 ++---
 src/utils/dom/event.ts                        | 12 ++++---
 src/utils/types.ts                            |  2 +-
 17 files changed, 135 insertions(+), 82 deletions(-)
 rename src/mixins/{bind-event.js => bind-event.ts} (67%)
 delete mode 100644 src/mixins/click-outside.js
 create mode 100644 src/mixins/click-outside.ts
 rename src/mixins/{portal.js => portal.ts} (66%)
 rename src/mixins/{relation.js => relation.ts} (72%)
 delete mode 100644 src/mixins/slots.js
 create mode 100644 src/mixins/slots.ts
 rename src/mixins/{touch.js => touch.ts} (67%)

diff --git a/src/circle/demo/index.vue b/src/circle/demo/index.vue
index 67fc0cc66..828800bb1 100644
--- a/src/circle/demo/index.vue
+++ b/src/circle/demo/index.vue
@@ -54,8 +54,8 @@ export default {
   data() {
     return {
       rate: 30,
-      currentRate1: 0,
-      currentRate2: 0
+      currentRate1: 30,
+      currentRate2: 30
     };
   },
 
diff --git a/src/circle/test/__snapshots__/demo.spec.js.snap b/src/circle/test/__snapshots__/demo.spec.js.snap
index 412a16ec4..28fba2f17 100644
--- a/src/circle/test/__snapshots__/demo.spec.js.snap
+++ b/src/circle/test/__snapshots__/demo.spec.js.snap
@@ -5,15 +5,15 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: none; stroke: #fff; stroke-width: 40px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 3140px; stroke-width: 41px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #1989fa; stroke-dashoffset: 2198px; stroke-width: 41px;"></path>
       </svg>
-      <div class="van-circle__text">0%</div>
+      <div class="van-circle__text">30%</div>
     </div>
     <div class="van-circle" style="width: 120px; height: 120px;"><svg viewBox="0 0 1060 1060">
         <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__hover" style="fill: #fff; stroke: #ebedf0; stroke-width: 60px;"></path>
-        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 3140px; stroke-width: 61px;"></path>
+        <path d="M 530 530 m -500, 0 a 500, 500 0 1, 1 1000, 0 a 500, 500 0 1, 1 -1000, 0" class="van-circle__layer" style="stroke: #07c160; stroke-dashoffset: 4082px; stroke-width: 61px;"></path>
       </svg>
-      <div class="van-circle__text">0%</div>
+      <div class="van-circle__text">30%</div>
     </div>
     <div><button class="van-button van-button--primary van-button--small"><span class="van-button__text">增加</span></button> <button class="van-button van-button--danger van-button--small"><span class="van-button__text">减少</span></button></div>
   </div>
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index 35ac9efe9..35511d7f1 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -5,7 +5,7 @@ exports[`click option 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">B</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none; z-index: 2009;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s; z-index: 2009;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style=""><span>A</span></div>
       </div>
@@ -27,7 +27,7 @@ exports[`close on click outside 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -73,7 +73,7 @@ exports[`direction up 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--up" style="z-index: 10; bottom: 768px;">
-    <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
+    <div class="van-popup van-popup--bottom van-dropdown-item__content van-popup-slide-bottom-enter van-popup-slide-bottom-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -105,7 +105,7 @@ exports[`show dropdown item 1`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -128,7 +128,7 @@ exports[`show dropdown item 2`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down" style="color: rgb(25, 137, 250);">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -140,7 +140,7 @@ exports[`show dropdown item 2`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-enter van-popup-slide-top-enter-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -160,7 +160,7 @@ exports[`show dropdown item 3`] = `
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title" style="">A</span></div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
@@ -172,7 +172,7 @@ exports[`show dropdown item 3`] = `
     </div>
   </div>
   <div class="van-dropdown-item van-dropdown-item--down" style="z-index: 10; top: 0px;">
-    <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
+    <div class="van-popup van-popup--top van-dropdown-item__content van-popup-slide-top-leave van-popup-slide-top-leave-active" style="transition-duration: 0.2s;">
       <div class="van-cell van-cell--clickable">
         <div class="van-cell__title" style="color: rgb(25, 137, 250);"><span>A</span></div>
         <div class="van-cell__value"><i class="van-icon van-icon-success van-dropdown-item__icon" style="color: rgb(25, 137, 250);">
diff --git a/src/mixins/bind-event.js b/src/mixins/bind-event.ts
similarity index 67%
rename from src/mixins/bind-event.js
rename to src/mixins/bind-event.ts
index eb6a83321..a970d543c 100644
--- a/src/mixins/bind-event.js
+++ b/src/mixins/bind-event.ts
@@ -3,15 +3,19 @@
  */
 import { on, off } from '../utils/dom/event';
 
-export function BindEventMixin(handler) {
-  function bind() {
+type BindEventMixinThis = {
+  binded: boolean;
+};
+
+export function BindEventMixin(handler: Function) {
+  function bind(this: BindEventMixinThis) {
     if (!this.binded) {
       handler.call(this, on, true);
       this.binded = true;
     }
   }
 
-  function unbind() {
+  function unbind(this: BindEventMixinThis) {
     if (this.binded) {
       handler.call(this, off, false);
       this.binded = false;
diff --git a/src/mixins/click-outside.js b/src/mixins/click-outside.js
deleted file mode 100644
index e14860407..000000000
--- a/src/mixins/click-outside.js
+++ /dev/null
@@ -1,20 +0,0 @@
-/**
- * Listen to click outside event
- */
-import { on, off } from '../utils/dom/event';
-
-export const ClickOutsideMixin = config => ({
-  mounted() {
-    this.clickOutsideHandler = event => {
-      if (!this.$el.contains(event.target)) {
-        this[config.method]();
-      }
-    };
-
-    on(document, config.event, this.clickOutsideHandler);
-  },
-
-  beforeDestroy() {
-    off(document, config.event, this.clickOutsideHandler);
-  }
-});
diff --git a/src/mixins/click-outside.ts b/src/mixins/click-outside.ts
new file mode 100644
index 000000000..b3bb673bd
--- /dev/null
+++ b/src/mixins/click-outside.ts
@@ -0,0 +1,31 @@
+/**
+ * Listen to click outside event
+ */
+import Vue from 'vue';
+import { on, off } from '../utils/dom/event';
+
+export type ClickOutsideMixinConfig = {
+  event: string;
+  method: string;
+};
+
+export const ClickOutsideMixin = (config: ClickOutsideMixinConfig) =>
+  Vue.extend({
+    data() {
+      const clickOutsideHandler = (event: Event) => {
+        if (!this.$el.contains(event.target as Node)) {
+          (this as any)[config.method]();
+        }
+      };
+
+      return { clickOutsideHandler };
+    },
+
+    mounted() {
+      on(document, config.event, this.clickOutsideHandler);
+    },
+
+    beforeDestroy() {
+      off(document, config.event, this.clickOutsideHandler);
+    }
+  });
diff --git a/src/mixins/popup/type.ts b/src/mixins/popup/type.ts
index 9694ad6e7..dbde1cc66 100644
--- a/src/mixins/popup/type.ts
+++ b/src/mixins/popup/type.ts
@@ -1,4 +1,4 @@
-export type GetContainer = (container: HTMLElement) => void;
+export type GetContainer = () => HTMLElement;
 
 export type PopupMixinProps = {
   value: boolean;
diff --git a/src/mixins/portal.js b/src/mixins/portal.ts
similarity index 66%
rename from src/mixins/portal.js
rename to src/mixins/portal.ts
index 96f586b1b..5c2c5aaab 100644
--- a/src/mixins/portal.js
+++ b/src/mixins/portal.ts
@@ -1,4 +1,11 @@
-function getElement(selector) {
+import Vue, { PropType } from 'vue';
+import { GetContainer } from './popup/type';
+
+type PortalMixinOptions = {
+  afterPortal?: () => void;
+};
+
+function getElement(selector: string | GetContainer): Element | null {
   if (typeof selector === 'string') {
     return document.querySelector(selector);
   }
@@ -6,10 +13,10 @@ function getElement(selector) {
   return selector();
 }
 
-export function PortalMixin({ afterPortal }) {
-  return {
+export function PortalMixin({ afterPortal }: PortalMixinOptions) {
+  return Vue.extend({
     props: {
-      getContainer: [String, Function]
+      getContainer: [String, Function] as (PropType<string | GetContainer>)
     },
 
     watch: {
@@ -44,5 +51,5 @@ export function PortalMixin({ afterPortal }) {
         }
       }
     }
-  };
+  });
 }
diff --git a/src/mixins/relation.js b/src/mixins/relation.ts
similarity index 72%
rename from src/mixins/relation.js
rename to src/mixins/relation.ts
index 1ca3b3c86..693fb0b7e 100644
--- a/src/mixins/relation.js
+++ b/src/mixins/relation.ts
@@ -1,7 +1,13 @@
-export function ChildrenMixin(parent, options = {}) {
+import Vue from 'vue';
+
+type ChildrenMixinOptions = {
+  indexKey?: any;
+};
+
+export function ChildrenMixin(parent: string, options: ChildrenMixinOptions = {}) {
   const indexKey = options.indexKey || 'index';
 
-  return {
+  return Vue.extend({
     inject: {
       [parent]: {
         default: null
@@ -10,7 +16,7 @@ export function ChildrenMixin(parent, options = {}) {
 
     computed: {
       parent() {
-        return this[parent];
+        return (this as any)[parent];
       },
 
       [indexKey]() {
@@ -25,7 +31,7 @@ export function ChildrenMixin(parent, options = {}) {
 
     beforeDestroy() {
       if (this.parent) {
-        this.parent.children = this.parent.children.filter(item => item !== this);
+        this.parent.children = this.parent.children.filter((item: any) => item !== this);
       }
     },
 
@@ -48,10 +54,10 @@ export function ChildrenMixin(parent, options = {}) {
         }
       }
     }
-  };
+  });
 }
 
-export function ParentMixin(parent) {
+export function ParentMixin(parent: string) {
   return {
     provide() {
       return {
diff --git a/src/mixins/slots.js b/src/mixins/slots.js
deleted file mode 100644
index 0e46b6930..000000000
--- a/src/mixins/slots.js
+++ /dev/null
@@ -1,16 +0,0 @@
-/**
- * Use scopedSlots in Vue 2.6+
- * downgrade to slots in lower version
- */
-
-export const SlotsMixin = {
-  methods: {
-    slots(name = 'default', props) {
-      const { $slots, $scopedSlots } = this;
-      if ($scopedSlots[name]) {
-        return $scopedSlots[name](props);
-      }
-      return $slots[name];
-    }
-  }
-};
diff --git a/src/mixins/slots.ts b/src/mixins/slots.ts
new file mode 100644
index 000000000..a78d7802d
--- /dev/null
+++ b/src/mixins/slots.ts
@@ -0,0 +1,20 @@
+/**
+ * Use scopedSlots in Vue 2.6+
+ * downgrade to slots in lower version
+ */
+import Vue from 'vue';
+
+export const SlotsMixin = Vue.extend({
+  methods: {
+    slots(name = 'default', props: any) {
+      const { $slots, $scopedSlots } = this;
+      const scopedSlot = $scopedSlots[name];
+
+      if (scopedSlot) {
+        return scopedSlot(props);
+      }
+
+      return $slots[name];
+    }
+  }
+});
diff --git a/src/mixins/touch.js b/src/mixins/touch.ts
similarity index 67%
rename from src/mixins/touch.js
rename to src/mixins/touch.ts
index 375766969..5412a7465 100644
--- a/src/mixins/touch.js
+++ b/src/mixins/touch.ts
@@ -1,29 +1,42 @@
+import Vue from 'vue';
+
 const MIN_DISTANCE = 10;
-function getDirection(x, y) {
+
+function getDirection(x: number, y: number) {
   if (x > y && x > MIN_DISTANCE) {
     return 'horizontal';
   }
+
   if (y > x && y > MIN_DISTANCE) {
     return 'vertical';
   }
+
   return '';
 }
 
-export const TouchMixin = {
+type TouchMixinData = {
+  startX: number;
+  startY: number;
+  deltaX: number;
+  deltaY: number;
+  offsetX: number;
+  offsetY: number;
+  direction: string;
+};
+
+export const TouchMixin = Vue.extend({
   data() {
-    return {
-      direction: ''
-    };
+    return { direction: '' } as TouchMixinData;
   },
 
   methods: {
-    touchStart(event) {
+    touchStart(event: TouchEvent) {
       this.resetTouchStatus();
       this.startX = event.touches[0].clientX;
       this.startY = event.touches[0].clientY;
     },
 
-    touchMove(event) {
+    touchMove(event: TouchEvent) {
       const touch = event.touches[0];
       this.deltaX = touch.clientX - this.startX;
       this.deltaY = touch.clientY - this.startY;
@@ -40,4 +53,4 @@ export const TouchMixin = {
       this.offsetY = 0;
     }
   }
-};
+});
diff --git a/src/utils/create/bem.ts b/src/utils/create/bem.ts
index 137db92c3..cf4923451 100644
--- a/src/utils/create/bem.ts
+++ b/src/utils/create/bem.ts
@@ -47,3 +47,5 @@ export function createBEM(name: string) {
     return mods ? [el, prefix(el, mods)] : el;
   };
 }
+
+export type BEM = ReturnType<typeof createBEM>;
diff --git a/src/utils/create/i18n.ts b/src/utils/create/i18n.ts
index dc31f3fc3..d1fdbf387 100644
--- a/src/utils/create/i18n.ts
+++ b/src/utils/create/i18n.ts
@@ -10,3 +10,5 @@ export function createI18N(name: string) {
     return typeof message === 'function' ? message(...args) : message;
   };
 }
+
+export type Translate = ReturnType<typeof createI18N>;
diff --git a/src/utils/create/index.ts b/src/utils/create/index.ts
index 912080031..996fcc304 100644
--- a/src/utils/create/index.ts
+++ b/src/utils/create/index.ts
@@ -1,11 +1,11 @@
-import { createBEM } from './bem';
+import { createBEM, BEM } from './bem';
 import { createComponent } from './component';
-import { createI18N } from './i18n';
+import { createI18N, Translate } from './i18n';
 
 type CreateNamespaceReturn = [
   ReturnType<typeof createComponent>,
-  ReturnType<typeof createBEM>,
-  ReturnType<typeof createI18N>
+  BEM,
+  Translate
 ];
 
 export function createNamespace(name: string): CreateNamespaceReturn {
diff --git a/src/utils/dom/event.ts b/src/utils/dom/event.ts
index 1ea868c9a..67ed5eb95 100644
--- a/src/utils/dom/event.ts
+++ b/src/utils/dom/event.ts
@@ -2,7 +2,7 @@
 /* eslint-disable getter-return */
 /* eslint-disable import/no-mutable-exports */
 import { isServer } from '..';
-import { EventHanlder } from '../types';
+import { EventHandler } from '../types';
 
 export let supportsPassive = false;
 
@@ -20,9 +20,9 @@ if (!isServer) {
 }
 
 export function on(
-  target: HTMLElement,
+  target: HTMLElement | Document,
   event: string,
-  handler: EventHanlder,
+  handler: EventHandler,
   passive = false
 ) {
   if (!isServer) {
@@ -34,7 +34,11 @@ export function on(
   }
 }
 
-export function off(target: HTMLElement, event: string, handler: EventHanlder) {
+export function off(
+  target: HTMLElement | Document,
+  event: string,
+  handler: EventHandler
+) {
   if (!isServer) {
     target.removeEventListener(event, handler);
   }
diff --git a/src/utils/types.ts b/src/utils/types.ts
index c6850ef39..ab91395e2 100644
--- a/src/utils/types.ts
+++ b/src/utils/types.ts
@@ -1,7 +1,7 @@
 import { VNode, CreateElement, RenderContext } from 'vue';
 import { InjectOptions, PropsDefinition } from 'vue/types/options';
 
-export type EventHanlder = (eventName?: Event) => void;
+export type EventHandler = (event: Event) => void;
 
 export type ObjectIndex = {
   [key: string]: any;