[new feature] PullRefresh: add distance of slotProps (#3829)

src/pull-refresh/README.md

@@ -55,7 +55,7 @@ export default {
 | success-duration | Success text display duration(ms) | `Number` | `500` |
 | animation-duration | Animation duration | `Number` | `300` |
 | head-height | Height of head | `Number` | `50` |
-| disabled | Whether to disable | `Boolean` | `false` |
+| disabled | Whether to disable pull refresh | `Boolean` | `false` |
 
 ### Events
 
@@ -65,10 +65,10 @@ export default {
 
 ### Slots
 
-| Name | Description |
-|------|------|
-| default | Default slot |
-| normal | Content of head when at normal status |
-| pulling | Content of head when at pulling |
-| loosing | Content of head when at loosing |
-| loading | Content of head when at loading |
+| Name | Description | scoped-slot |
+|------|------|------|
+| default | Default slot | - |
+| normal | Content of head when at normal status | - |
+| pulling | Content of head when at pulling | { distance } |
+| loosing | Content of head when at loosing | { distance } |
+| loading | Content of head when at loading | { distance } |

src/pull-refresh/README.zh-CN.md

@@ -65,10 +65,10 @@ export default {
 
 ### Slots
 
-| 名称 | 说明 |
-|------|------|
-| default | 自定义内容 |
-| normal | 非下拉状态时顶部内容 |
-| pulling | 下拉过程中顶部内容 |
-| loosing | 释放过程中顶部内容 |
-| loading | 加载过程中顶部内容 |
+| 名称 | 说明 | scoped-slot 参数 |
+|------|------|------|
+| default | 自定义内容 | - |
+| normal | 非下拉状态时顶部内容 | - |
+| pulling | 下拉过程中顶部内容 | { distance: 当前下拉距离 } |
+| loosing | 释放过程中顶部内容 | { distance: 当前下拉距离 } |
+| loading | 加载过程中顶部内容 | { distance: 当前下拉距离 } |

src/pull-refresh/index.js

@@ -37,7 +37,7 @@ export default createComponent({
   data() {
     return {
       status: 'normal',
-      height: 0,
+      distance: 0,
       duration: 0
     };
   },
@@ -119,23 +119,25 @@ export default createComponent({
       return this.ceiling;
     },
 
-    ease(height) {
+    ease(distance) {
       const { headHeight } = this;
-      return height < headHeight
-        ? height
-        : height < headHeight * 2
-          ? Math.round(headHeight + (height - headHeight) / 2)
-          : Math.round(headHeight * 1.5 + (height - headHeight * 2) / 4);
+      return Math.round(
+        distance < headHeight
+          ? distance
+          : distance < headHeight * 2
+            ? headHeight + (distance - headHeight) / 2
+            : headHeight * 1.5 + (distance - headHeight * 2) / 4
+      );
     },
 
-    setStatus(height, isLoading) {
-      this.height = height;
+    setStatus(distance, isLoading) {
+      this.distance = distance;
 
       const status = isLoading
         ? 'loading'
-        : height === 0
+        : distance === 0
           ? 'normal'
-          : height < this.headHeight
+          : distance < this.headHeight
             ? 'pulling'
             : 'loosing';
 
@@ -146,14 +148,14 @@ export default createComponent({
   },
 
   render(h) {
-    const { status } = this;
+    const { status, distance } = this;
     const text = this[`${status}Text`] || t(status);
     const style = {
       transition: `${this.duration}ms`,
-      transform: this.height ? `translate3d(0,${this.height}px, 0)` : ''
+      transform: this.distance ? `translate3d(0,${this.distance}px, 0)` : ''
     };
 
-    const Status = this.slots(status) || [
+    const Status = this.slots(status, { distance }) || [
       TEXT_STATUS.indexOf(status) !== -1 && <div class={bem('text')}>{text}</div>,
       status === 'loading' && <Loading size="16">{text}</Loading>
     ];

src/pull-refresh/test/__snapshots__/index.spec.js.snap

@@ -48,6 +48,30 @@ exports[`change head content when pulling down 5`] = `
 </div>
 `;
 
+exports[`custom content by slots 1`] = `
+<div class="van-pull-refresh">
+  <div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,20px, 0);">
+    <div class="van-pull-refresh__head">pulling 20</div>
+  </div>
+</div>
+`;
+
+exports[`custom content by slots 2`] = `
+<div class="van-pull-refresh">
+  <div class="van-pull-refresh__track" style="transition: 0ms; transform: translate3d(0,75px, 0);">
+    <div class="van-pull-refresh__head">loosing 75</div>
+  </div>
+</div>
+`;
+
+exports[`custom content by slots 3`] = `
+<div class="van-pull-refresh">
+  <div class="van-pull-refresh__track" style="transition: 300ms; transform: translate3d(0,50px, 0);">
+    <div class="van-pull-refresh__head">loading 50</div>
+  </div>
+</div>
+`;
+
 exports[`not in page top 1`] = `
 <div class="van-pull-refresh">
   <div class="van-pull-refresh__track" style="transition: 0ms;">

src/pull-refresh/test/index.spec.js

@@ -42,6 +42,37 @@ test('change head content when pulling down', async () => {
   expect(wrapper).toMatchSnapshot();
 });
 
+test('custom content by slots', async () => {
+  const wrapper = mount(PullRefresh, {
+    scopedSlots: {
+      pulling({ distance }) {
+        return `pulling ${distance}`;
+      },
+      loosing({ distance }) {
+        return `loosing ${distance}`;
+      },
+      loading({ distance }) {
+        return `loading ${distance}`;
+      }
+    }
+  });
+
+  const track = wrapper.find('.van-pull-refresh__track');
+
+  // pulling
+  trigger(track, 'touchstart', 0, 0);
+  trigger(track, 'touchmove', 0, 20);
+  expect(wrapper).toMatchSnapshot();
+
+  // loosing
+  trigger(track, 'touchmove', 0, 100);
+  expect(wrapper).toMatchSnapshot();
+
+  // loading
+  trigger(track, 'touchend', 0, 100);
+  expect(wrapper).toMatchSnapshot();
+});
+
 test('pull a short distance', () => {
   const wrapper = mount(PullRefresh, {
     propsData: {