[improvement] PullRefresh: jsx (#2616)

packages/pull-refresh/index.js

@@ -1,42 +1,11 @@
-<template>
+import { use } from '../utils';
-  <div :class="b()">
+import Loading from '../loading';
-    <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 scrollUtils from '../utils/scroll';
 import Touch from '../mixins/touch';
 
-export default create({
+const [sfc, bem, t] = use('pull-refresh');
-  name: '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
+        ? 'loading'
-          ? 'normal' : height < this.headHeight
+        : height === 0
-            ? 'pulling' : 'loosing';
+          ? '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>

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 class="van-pull-refresh__head"></div>
-        <!---->
-        <!---->
-      </div>
       <div>
         <p>刷新次数: 0</p>
       </div>

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 class="van-pull-refresh__head"></div>
-      <!---->
-      <!---->
-    </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 class="van-pull-refresh__head"></div>
-      <!---->
-      <!---->
-    </div>
   </div>
 </div>
 `;