From 8e2b0f42fc9df73c734b4fd158676f3d18f687d0 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Fri, 25 Jan 2019 21:02:03 +0800
Subject: [PATCH] [improvement] PullRefresh: jsx (#2616)

---
 packages/pull-refresh/{index.vue => index.js} | 95 +++++++++----------
 .../test/__snapshots__/demo.spec.js.snap      |  5 +-
 .../test/__snapshots__/index.spec.js.snap     | 20 +---
 3 files changed, 51 insertions(+), 69 deletions(-)
 rename packages/pull-refresh/{index.vue => index.js} (67%)

diff --git a/packages/pull-refresh/index.vue b/packages/pull-refresh/index.js
similarity index 67%
rename from packages/pull-refresh/index.vue
rename to packages/pull-refresh/index.js
index 6839a70ab..c9f91658e 100644
--- a/packages/pull-refresh/index.vue
+++ b/packages/pull-refresh/index.js
@@ -1,42 +1,11 @@
-<template>
-  <div :class="b()">
-    <div
-      :class="b('track')"
-      :style="style"
-      @touchstart="onTouchStart"
-      @touchmove="onTouchMove"
-      @touchend="onTouchEnd"
-      @touchcancel="onTouchEnd"
-    >
-      <div :class="b('head')">
-        <slot :name="status">
-          <div
-            v-if="status === 'pulling' || status === 'loosing'"
-            v-text="text"
-            :class="b('text')"
-          />
-          <div
-            v-if="status === 'loading'"
-            :class="b('loading')"
-          >
-            <loading />
-            <span v-text="text" />
-          </div>
-        </slot>
-      </div>
-      <slot />
-    </div>
-  </div>
-</template>
-
-<script>
-import create from '../utils/create';
+import { use } from '../utils';
+import Loading from '../loading';
 import scrollUtils from '../utils/scroll';
 import Touch from '../mixins/touch';
 
-export default create({
-  name: 'pull-refresh',
+const [sfc, bem, t] = use('pull-refresh');
 
+export default sfc({
   mixins: [Touch],
 
   props: {
@@ -67,19 +36,8 @@ export default create({
   },
 
   computed: {
-    style() {
-      return {
-        transition: `${this.duration}ms`,
-        transform: `translate3d(0,${this.height}px, 0)`
-      };
-    },
-
     untouchable() {
       return this.status === 'loading' || this.disabled;
-    },
-
-    text() {
-      return this[`${this.status}Text`] || this.$t(this.status);
     }
   },
 
@@ -154,14 +112,51 @@ export default create({
       this.height = height;
 
       const status = isLoading
-        ? 'loading' : height === 0
-          ? 'normal' : height < this.headHeight
-            ? 'pulling' : 'loosing';
+        ? 'loading'
+        : height === 0
+          ? 'normal'
+          : height < this.headHeight
+            ? 'pulling'
+            : 'loosing';
 
       if (status !== this.status) {
         this.status = status;
       }
     }
+  },
+
+  render(h) {
+    const { status } = this;
+    const text = this[`${status}Text`] || t(status);
+    const style = {
+      transition: `${this.duration}ms`,
+      transform: `translate3d(0,${this.height}px, 0)`
+    };
+
+    const Status = this.$slots[status] || [
+      (status === 'pulling' || status === 'loosing') && <div class={bem('text')}>{text}</div>,
+      status === 'loading' && (
+        <div class={bem('loading')}>
+          <Loading />
+          <span>{text}</span>
+        </div>
+      )
+    ];
+
+    return (
+      <div class={bem()}>
+        <div
+          class={bem('track')}
+          style={style}
+          onTouchstart={this.onTouchStart}
+          onTouchmove={this.onTouchMove}
+          onTouchend={this.onTouchEnd}
+          onTouchcancel={this.onTouchEnd}
+        >
+          <div class={bem('head')}>{Status}</div>
+          {this.$slots.default}
+        </div>
+      </div>
+    );
   }
 });
-</script>
diff --git a/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap b/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
index b6a95bb25..d2b343f62 100644
--- a/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
+++ b/packages/pull-refresh/test/__snapshots__/demo.spec.js.snap
@@ -4,10 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div class="van-pull-refresh">
     <div class="van-pull-refresh__track" style="transition:0ms;transform:translate3d(0,0px, 0);">
-      <div class="van-pull-refresh__head">
-        <!---->
-        <!---->
-      </div>
+      <div class="van-pull-refresh__head"></div>
       <div>
         <p>刷新次数: 0</p>
       </div>
diff --git a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
index 59d324503..910fd8839 100644
--- a/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
+++ b/packages/pull-refresh/test/__snapshots__/index.spec.js.snap
@@ -5,7 +5,6 @@ exports[`change head content when pulling down 1`] = `
   <div class="van-pull-refresh__track" style="transform: translate3d(0,20px, 0);">
     <div class="van-pull-refresh__head">
       <div class="van-pull-refresh__text">下拉即可刷新...</div>
-      <!---->
     </div>
   </div>
 </div>
@@ -15,8 +14,7 @@ exports[`change head content when pulling down 2`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,75px, 0);">
     <div class="van-pull-refresh__head">
-      <div class="van-pull-refresh__text">下拉即可刷新...</div>
-      <!---->
+      <div class="van-pull-refresh__text">释放即可刷新...</div>
     </div>
   </div>
 </div>
@@ -26,9 +24,8 @@ exports[`change head content when pulling down 3`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
-      <!---->
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>释放即可刷新...</span>
+        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
       </div>
     </div>
   </div>
@@ -39,9 +36,8 @@ exports[`change head content when pulling down 4`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,50px, 0);">
     <div class="van-pull-refresh__head">
-      <!---->
       <div class="van-pull-refresh__loading">
-        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div> <span>释放即可刷新...</span>
+        <div class="van-loading van-loading--circular van-loading" style="color: rgb(201, 201, 201);"><span class="van-loading__spinner van-loading__spinner--circular"><svg viewBox="25 25 50 50" class="van-loading__circular"><circle cx="50" cy="50" r="20" fill="none"></circle></svg></span></div><span>加载中...</span>
       </div>
     </div>
   </div>
@@ -51,10 +47,7 @@ exports[`change head content when pulling down 4`] = `
 exports[`change head content when pulling down 5`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,0px, 0);">
-    <div class="van-pull-refresh__head">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-pull-refresh__head"></div>
   </div>
 </div>
 `;
@@ -62,10 +55,7 @@ exports[`change head content when pulling down 5`] = `
 exports[`not in page top 1`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transform: translate3d(0,0px, 0);">
-    <div class="van-pull-refresh__head">
-      <!---->
-      <!---->
-    </div>
+    <div class="van-pull-refresh__head"></div>
   </div>
 </div>
 `;