feat(module: pulltorefresh): feat support scrollendrefresh and suppor…

…t both up and down (#204)
NG-ZORRO · Dec 29, 2018 · 1d00f7c · 1d00f7c
1 parent 4ece267
commit 1d00f7c
Show file tree

Hide file tree

Showing 8 changed files with 237 additions and 81 deletions.
diff --git a/components/pull-to-refresh/demo/basic.ts b/components/pull-to-refresh/demo/basic.ts
@@ -7,10 +7,11 @@ import { Component, OnInit } from '@angular/core';
                style="margin-bottom: 10px"
                [option]="{'content':'该组件只支持Touch事件，请使用移动模式/设备打开此页。', 'marqueeProps': {fps: 100}}"
     ></NoticeBar>
-    <div Button style="marginBottom: 15px" (onClick)="onClick()">direction: {{this.state.down ? 'down' : 'up'}}</div>
+    <div Button (onClick)="onClick()">direction: {{state.directionName}}</div>
     <PullToRefresh [ngStyle]="dtPullToRefreshStyle"
-                   [direction]="this.state.down ? 'down' : 'up'"
-                   [indicator]="this.state.down ? {} : { deactivate: '上拉可以刷新' }"
+                   [direction]="state.direction"
+                   [(ngModel)]="state.refreshState"
+                   [endReachedRefresh]="state.endReachedRefresh"
                    (onRefresh)="pullToRefresh($event)"
     >
       <div *ngFor="let i of this.state.data" style="text-align: center; padding: 20px">{{i}}</div>
@@ -23,31 +24,68 @@ import { Component, OnInit } from '@angular/core';
 })
 export class DemoPullToRefreshBasicComponent implements OnInit {
   isMobile = /Android|webOS|iPhone|iPod|BlackBerry/i.test(window.navigator.userAgent);
-  pageLimit = 100;
+  pageLimit = 20;
+  public directionCount = 0;
   page = 0;
   state = {
-    refreshing: false,
-    down: true,
-    height: window.innerHeight - ((63 + 47) * window.devicePixelRatio) / 2,
-    data: []
+    refreshState: {
+      currentState: 'deactivate',
+      drag: false
+    },
+    direction: '',
+    endReachedRefresh: false,
+    height: 500,
+    data: [],
+    directionName: 'both up and down'
   };
   dtPullToRefreshStyle = { height: this.state.height + 'px' };
 
   constructor() {}
 
   onClick() {
-    this.state.down = !this.state.down;
+    this.directionCount ++;
+    switch (this.directionCount) {
+      case 0:
+        this.state.direction = '';
+        this.state.directionName = 'both up and down';
+      break;
+      case 1:
+        this.state.direction = 'down';
+        this.state.endReachedRefresh = true;
+        this.state.directionName = 'down';
+      break;
+      case 2:
+        this.state.direction = 'up';
+        this.state.directionName = 'up';
+      break;
+      default:
+      this.directionCount = 0;
+      this.state.direction = '';
+      this.state.directionName = 'both up and down';
+        break;
+    }
   }
 
   pullToRefresh(event) {
-    if (this.state.down) {
-      this.state.data = [];
-      this.page = 0;
-      this.addItems(0);
+    if (event === 'endReachedRefresh') {
+        if (this.page < 9) {
+          this.page++;
+          this.addItems(this.page * this.pageLimit);
+          this.state.refreshState.currentState = 'release';
+          setTimeout(() => {
+            this.state.refreshState.currentState = 'finish';
+          }, 1000);
+        }
     } else {
-      if (this.page < 9) {
-        this.page++;
-        this.addItems(this.page * this.pageLimit);
+       if (event === 'down') {
+        this.state.data = [];
+        this.page = 0;
+        this.addItems(0);
+      } else {
+        if (this.page < 9) {
+          this.page++;
+          this.addItems(this.page * this.pageLimit);
+        }
       }
     }
   }

diff --git a/components/pull-to-refresh/doc/index.en-US.md b/components/pull-to-refresh/doc/index.en-US.md
@@ -14,8 +14,12 @@ Instantly reload the content by triggering.
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
-| direction  | pull direction, can be `up` or `down` | String | `down` |
+| direction  | pull direction, can be `up` or `down` | String | - |
 | distanceToRefresh | distance to refresh | number | 25 |
 | refreshing | Whether the view should be indicating an active refresh | bool | false |
 | onRefresh | required, Called when the view starts refreshing. | () => void | - |
-| indicator  | indicator config `{ activate: any, deactivate: any, release: any, finish: any }` | Object | - |
+| ngModel | refresh state `{ currentState : deactivate , drag: false}` | Object | deactivate |
+| headerIndicator  | header indicator config `{ activate: any, deactivate: any, release: any, finish: any }` | Object | - |
+| footerIndicator  | footer indicator config `{ activate: any, deactivate: any, release: any, finish: any }` | Object | - |
+| endReachedRefresh| refresh reached end （direction=down） | bool | false | 
+> **Notice：** OnClose is invalid and Toast does not hide, If set duration = 0, toast will not auto hide, you have to manually do it.
diff --git a/components/pull-to-refresh/doc/index.zh-CN.md b/components/pull-to-refresh/doc/index.zh-CN.md
@@ -15,9 +15,14 @@ subtitle: 拉动刷新
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
-| direction  | 拉动方向，可以是 `up` 或 `down` | String | `down` |
+| direction  | 拉动方向，可以是 `up` 或 `down` | String | - |
 | distanceToRefresh | 刷新距离 | number | 25 |
 | refreshing | 是否显示刷新状态 | bool | false |
 | onRefresh | 必选, 刷新回调函数 | () => void | - |
-| indicator  | 指示器配置 `{ activate: any, deactivate: any, release: any, finish: any }` | Object | - |
+| ngModel | 刷新的状态 `{ currentState : deactivate , drag: false}` | Object | deactivate |
+| headerIndicator  | 头部指示器配置 `{ activate: any, deactivate: any, release: any, finish: any }` | Object | - |
+| footerIndicator  | 脚部指示器配置 `{ activate: any, deactivate: any, release: any, finish: any }` | Object | - |
+| endReachedRefresh| 滚动到底自动刷新（direction=down） | bool | false | 
+
+> **注：**  Need to set the height to use this component, otherwise it will not display correctly.
 
diff --git a/components/pull-to-refresh/pull-to-refresh.component.html b/components/pull-to-refresh/pull-to-refresh.component.html
@@ -1,15 +1,19 @@
 <div class="am-pull-to-refresh-content-wrapper">
   <div class="am-pull-to-refresh-content" [ngClass]="transtionCls" [ngStyle]="style">
-    <div *ngIf="direction === 'down'" class="am-pull-to-refresh-indicator">
-      <ng-template *ngIf="isTemplateRef(indicator[state.currSt])" [ngTemplateOutlet]="indicator[state.currSt]"></ng-template>
-      <ng-container *ngIf="!isTemplateRef(indicator[state.currSt])">{{indicator[state.currSt]}}</ng-container>
+    <div *ngIf="direction === 'down' || direction === ''" class="am-pull-to-refresh-indicator am-pull-to-refresh-header-indicator">
+      <ng-template *ngIf="isTemplateRef(headerIndicator[state.currentState])" [ngTemplateOutlet]="headerIndicator[state.currentState]"></ng-template>
+      <ng-container *ngIf="!isTemplateRef(headerIndicator[state.currentState])">{{headerIndicator[state.currentState]}}</ng-container>
     </div>
     <div #pullToRefresh>
       <ng-content></ng-content>
+      <div *ngIf="direction === 'down' && endReachedRefresh" class="am-pull-to-refresh-indicator am-pull-to-refresh-footer-indicator">
+        <ng-template *ngIf="isTemplateRef(footerIndicator[state.currentState])" [ngTemplateOutlet]="footerIndicator[state.currentState]"></ng-template>
+        <ng-container *ngIf="!isTemplateRef(footerIndicator[state.currentState])">{{footerIndicator[state.currentState]}}</ng-container>
+      </div>
     </div>
-    <div *ngIf="direction === 'up'" class="am-pull-to-refresh-indicator">
-      <ng-template *ngIf="isTemplateRef(indicator[state.currSt])" [ngTemplateOutlet]="indicator[state.currSt]"></ng-template>
-      <ng-container *ngIf="!isTemplateRef(indicator[state.currSt])">{{indicator[state.currSt]}}</ng-container>
+    <div *ngIf="direction === 'up' || direction === ''" class="am-pull-to-refresh-indicator am-pull-to-refresh-footer-indicator">
+      <ng-template *ngIf="isTemplateRef(footerIndicator[state.currentState])" [ngTemplateOutlet]="footerIndicator[state.currentState]"></ng-template>
+      <ng-container *ngIf="!isTemplateRef(footerIndicator[state.currentState])">{{footerIndicator[state.currentState]}}</ng-container>
     </div>
   </div>
 </div>
diff --git a/components/pull-to-refresh/pull-to-refresh.component.spec.ts b/components/pull-to-refresh/pull-to-refresh.component.spec.ts
@@ -1,9 +1,11 @@
 import { Component } from '@angular/core';
 import { By } from '@angular/platform-browser';
-import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+import { async, ComponentFixture, TestBed, tick } from '@angular/core/testing';
+import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { PullToRefreshModule } from './pull-to-refresh.module';
 import { IconModule } from '../icon/icon.module';
 import { dispatchTouchEvent } from '../core/testing';
+import { from } from 'rxjs';
 
 describe('PullToRefreshComponent', () => {
   let component: TestPullToRefreshComponent;
@@ -13,7 +15,7 @@ describe('PullToRefreshComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
       declarations: [TestPullToRefreshComponent],
-      imports: [PullToRefreshModule, IconModule]
+      imports: [PullToRefreshModule, IconModule, FormsModule, ReactiveFormsModule]
     }).compileComponents();
   }));
 
@@ -94,16 +96,16 @@ describe('PullToRefreshComponent', () => {
   });
 
   it('should scroll work', () => {
-    component.state.down = false;
+    component.state.down = true;
     component.state.scrollRefresh = true;
     fixture.detectChanges();
     dispatchTouchEvent(pullToRefreshEle.nativeElement, 'touchstart', 0, 300);
     fixture.detectChanges();
-    dispatchTouchEvent(pullToRefreshEle.nativeElement, 'touchmove', 0, 500);
+    dispatchTouchEvent(pullToRefreshEle.nativeElement, 'touchmove', 0, 1000);
     fixture.detectChanges();
-    dispatchTouchEvent(pullToRefreshEle.nativeElement, 'touchend', 0, 500);
+    dispatchTouchEvent(pullToRefreshEle.nativeElement, 'touchend', 0, 1000);
     fixture.detectChanges();
-    dispatchTouchEvent(pullToRefreshEle.nativeElement, 'scroll', 0, 500);
+    dispatchTouchEvent(pullToRefreshEle.nativeElement, 'scroll', 0, 1000);
     fixture.detectChanges();
     pullToRefreshEle.nativeElement.scroll();
     fixture.detectChanges();
@@ -130,9 +132,12 @@ describe('PullToRefreshComponent', () => {
   selector: 'demo-notice-bar-basic',
   template: `
   <PullToRefresh [ngStyle]="dtPullToRefreshStyle"
-                 [scrollRefresh]="state.scrollRefresh"
+                 [endReachedRefresh]="state.scrollRefresh"
+                 [(ngModel)]="state.refreshState"
                  [direction]="state.down ? 'down' : 'up'"
-                 [indicator]="state.down ? {} : { deactivate: '上拉可以刷新' }"
+                 [refreshing]="true"
+                 [headerIndicator]="state.down ? {} : { deactivate: '下拉可以刷新' }"
+                 [footerIndicator]="state.down ? {} : { deactivate: '上拉可以刷新' }"
                  (onRefresh)="pullToRefresh($event)"
   >
     <div *ngFor="let i of this.state.data" style="text-align: center; padding: 20px">{{i}}</div>
@@ -145,7 +150,10 @@ describe('PullToRefreshComponent', () => {
 })
 export class TestPullToRefreshComponent {
   state = {
-    refreshing: false,
+    refreshState: {
+      currSt: 'deactivate',
+      drag: false
+    },
     scrollRefresh: false,
     down: true,
     height: window.innerHeight - ((63 + 47) * window.devicePixelRatio) / 2,