From fab090bef9e71da58941ad22e43f538162db7836 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Sat, 26 Jan 2019 09:43:46 +0800
Subject: [PATCH] [improvement] Swipe: jsx (#2626)

---
 .../test/__snapshots__/index.spec.js.snap     |  2 -
 packages/number-keyboard/index.js             |  5 +-
 packages/picker/index.js                      |  5 +-
 packages/swipe/{index.vue => index.js}        | 81 ++++++++++---------
 .../test/__snapshots__/demo.spec.js.snap      |  5 --
 packages/utils/event.js                       |  8 ++
 6 files changed, 56 insertions(+), 50 deletions(-)
 rename packages/swipe/{index.vue => index.js} (80%)

diff --git a/packages/image-preview/test/__snapshots__/index.spec.js.snap b/packages/image-preview/test/__snapshots__/index.spec.js.snap
index 4b9780461..10ea50a71 100644
--- a/packages/image-preview/test/__snapshots__/index.spec.js.snap
+++ b/packages/image-preview/test/__snapshots__/index.spec.js.snap
@@ -9,7 +9,6 @@ exports[`render image 1`] = `
       <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/2.png" class="van-image-preview__image"></div>
       <div class="van-swipe-item" style="width: 0px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/3.png" class="van-image-preview__image"></div>
     </div>
-    <!---->
   </div>
 </div>
 `;
@@ -23,7 +22,6 @@ exports[`zoom 1`] = `
       <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/2.png" class="van-image-preview__image"></div>
       <div class="van-swipe-item" style="width: 100px; height: 100%; transform: translateX(0px);"><img src="https://img.yzcdn.cn/3.png" class="van-image-preview__image"></div>
     </div>
-    <!---->
   </div>
 </div>
 `;
diff --git a/packages/number-keyboard/index.js b/packages/number-keyboard/index.js
index 5d7782e7c..150c1385c 100644
--- a/packages/number-keyboard/index.js
+++ b/packages/number-keyboard/index.js
@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { stop } from '../utils/event';
 import Key from './Key';
 
 const [sfc, bem, t] = use('number-keyboard');
@@ -140,9 +141,7 @@ export default sfc({
           v-show={this.show}
           style={{ zIndex: this.zIndex }}
           class={bem([theme])}
-          onTouchstart={event => {
-            event.stopPropagation();
-          }}
+          onTouchstart={stop}
           onAnimationend={this.onAnimationEnd}
           onWebkitAnimationEnd={this.onAnimationEnd}
         >
diff --git a/packages/picker/index.js b/packages/picker/index.js
index 365e2df14..a17f8b0df 100644
--- a/packages/picker/index.js
+++ b/packages/picker/index.js
@@ -1,4 +1,5 @@
 import { use } from '../utils';
+import { prevent } from '../utils/event';
 import Loading from '../loading';
 import PickerColumn from './PickerColumn';
 import deepClone from '../utils/deep-clone';
@@ -171,9 +172,7 @@ export default sfc({
         <div
           class={bem('columns')}
           style={columnsStyle}
-          onTouchmove={event => {
-            event.preventDefault();
-          }}
+          onTouchmove={prevent}
         >
           {columns.map((item, index) => (
             <PickerColumn
diff --git a/packages/swipe/index.vue b/packages/swipe/index.js
similarity index 80%
rename from packages/swipe/index.vue
rename to packages/swipe/index.js
index 3a15a47ec..deaf0cfcc 100644
--- a/packages/swipe/index.vue
+++ b/packages/swipe/index.js
@@ -1,40 +1,10 @@
-<template>
-  <div :class="b()">
-    <div
-      :style="trackStyle"
-      :class="b('track')"
-      @touchstart="onTouchStart"
-      @touchmove="onTouchMove"
-      @touchend="onTouchEnd"
-      @touchcancel="onTouchEnd"
-      @transitionend.stop="$emit('change', activeIndicator)"
-    >
-      <slot />
-    </div>
-    <slot name="indicator">
-      <div
-        v-if="showIndicators && count > 1"
-        :class="b('indicators', { vertical })"
-        @transitionend.stop
-      >
-        <i
-          v-for="index in count"
-          :class="b('indicator', { active: index - 1 === activeIndicator })"
-          :style="index - 1 === activeIndicator ? indicatorStyle : null"
-        />
-      </div>
-    </slot>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
+import { use } from '../utils';
 import Touch from '../mixins/touch';
-import { on, off } from '../utils/event';
+import { on, off, stop } from '../utils/event';
 
-export default create({
-  name: 'swipe',
+const [sfc, bem] = use('swipe');
 
+export default sfc({
   mixins: [Touch],
 
   props: {
@@ -222,8 +192,7 @@ export default create({
       const atLast = active === count - 1;
       const outOfBounds =
         !this.loop &&
-        ((atFirst && (offset > 0 || move < 0)) ||
-          (atLast && (offset < 0 || move > 0)));
+        ((atFirst && (offset > 0 || move < 0)) || (atLast && (offset < 0 || move > 0)));
 
       if (outOfBounds || count <= 1) {
         return;
@@ -284,7 +253,45 @@ export default create({
           }, 30);
         }, autoplay);
       }
+    },
+
+    onTransitionend(event) {
+      event.stopPropagation();
+      this.$emit('change', this.activeIndicator);
     }
+  },
+
+  render(h) {
+    const { count, activeIndicator } = this;
+
+    const Indicator =
+      this.$slots.indicator ||
+      (this.showIndicators && count > 1 && (
+        <div class={bem('indicators', { vertical: this.vertical })} onTransitionend={stop}>
+          {Array(...Array(count)).map((empty, index) => (
+            <i
+              class={bem('indicator', { active: index === activeIndicator })}
+              style={index === activeIndicator ? this.indicatorStyle : null}
+            />
+          ))}
+        </div>
+      ));
+
+    return (
+      <div class={bem()}>
+        <div
+          style={this.trackStyle}
+          class={bem('track')}
+          onTouchstart={this.onTouchStart}
+          onTouchmove={this.onTouchMove}
+          onTouchend={this.onTouchEnd}
+          onTouchcancel={this.onTouchEnd}
+          onTransitionend={this.onTransitionend}
+        >
+          {this.$slots.default}
+        </div>
+        {Indicator}
+      </div>
+    );
   }
 });
-</script>
diff --git a/packages/swipe/test/__snapshots__/demo.spec.js.snap b/packages/swipe/test/__snapshots__/demo.spec.js.snap
index 35347ad19..8b5f3d7a3 100644
--- a/packages/swipe/test/__snapshots__/demo.spec.js.snap
+++ b/packages/swipe/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,6 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
@@ -21,7 +20,6 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);"><img></div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
@@ -32,7 +30,6 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
@@ -43,7 +40,6 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">3</div>
         <div class="van-swipe-item" style="width:0px;height:0px;transform:translateY(0px);">4</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
@@ -54,7 +50,6 @@ exports[`renders demo correctly 1`] = `
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">3</div>
         <div class="van-swipe-item" style="width:0px;height:100%;transform:translateX(0px);">4</div>
       </div>
-      <!---->
     </div>
   </div>
   <div>
diff --git a/packages/utils/event.js b/packages/utils/event.js
index a4910108b..45106afab 100644
--- a/packages/utils/event.js
+++ b/packages/utils/event.js
@@ -30,3 +30,11 @@ export function on(target, event, handler, passive = false) {
 export function off(target, event, handler) {
   !isServer && target.removeEventListener(event, handler);
 }
+
+export function stop(event) {
+  event.stopPropagation();
+}
+
+export function prevent(event) {
+  event.preventDefault();
+}