docs(module:list): update the infinite load demo

close NG-ZORRO#4118
hsuanxyz · Oct 22, 2020 · 2a61de8 · 2a61de8
1 parent 34109f3
commit 2a61de8
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 22 deletions.
diff --git a/components/list/demo/infinite-load.ts b/components/list/demo/infinite-load.ts
@@ -1,7 +1,9 @@
 import { CollectionViewer, DataSource } from '@angular/cdk/collections';
 import { HttpClient } from '@angular/common/http';
-import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { BehaviorSubject, Observable, Subscription } from 'rxjs';
+import { ChangeDetectionStrategy, Component, OnDestroy, OnInit } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd/message';
+import { BehaviorSubject, Observable, Subject } from 'rxjs';
+import { takeUntil } from 'rxjs/operators';
 
 interface ItemData {
   gender: string;
@@ -52,39 +54,64 @@ interface Name {
   ],
   changeDetection: ChangeDetectionStrategy.OnPush
 })
-export class NzDemoListInfiniteLoadComponent {
+export class NzDemoListInfiniteLoadComponent implements OnInit, OnDestroy {
   ds = new MyDataSource(this.http);
 
-  constructor(private http: HttpClient) {}
+  private destroy$ = new Subject();
+  constructor(private http: HttpClient, private nzMessage: NzMessageService) {}
+
+  ngOnInit(): void {
+    this.ds
+      .completed()
+      .pipe(takeUntil(this.destroy$))
+      .subscribe(() => {
+        this.nzMessage.warning('Infinite List loaded all');
+      });
+  }
+
+  ngOnDestroy(): void {
+    this.destroy$.next();
+    this.destroy$.complete();
+  }
 }
 
 class MyDataSource extends DataSource<ItemData> {
-  private length = 100000;
   private pageSize = 10;
-  private cachedData = Array.from<ItemData>({ length: this.length });
+  private cachedData: ItemData[] = [];
   private fetchedPages = new Set<number>();
   private dataStream = new BehaviorSubject<ItemData[]>(this.cachedData);
-  private subscription = new Subscription();
+  private complete$ = new Subject<void>();
+  private disconnect$ = new Subject<void>();
 
   constructor(private http: HttpClient) {
     super();
   }
 
+  completed(): Observable<void> {
+    return this.complete$.asObservable();
+  }
+
   connect(collectionViewer: CollectionViewer): Observable<ItemData[]> {
-    this.subscription.add(
-      collectionViewer.viewChange.subscribe(range => {
-        const startPage = this.getPageForIndex(range.start);
-        const endPage = this.getPageForIndex(range.end - 1);
-        for (let i = startPage; i <= endPage; i++) {
-          this.fetchPage(i);
-        }
-      })
-    );
+    this.setup(collectionViewer);
     return this.dataStream;
   }
 
   disconnect(): void {
-    this.subscription.unsubscribe();
+    this.disconnect$.next();
+    this.disconnect$.complete();
+  }
+
+  private setup(collectionViewer: CollectionViewer): void {
+    this.fetchPage(0);
+    collectionViewer.viewChange.pipe(takeUntil(this.complete$), takeUntil(this.disconnect$)).subscribe(range => {
+      if (this.cachedData.length >= 50) {
+        this.complete$.next();
+        this.complete$.complete();
+      } else {
+        const endPage = this.getPageForIndex(range.end);
+        this.fetchPage(endPage + 1);
+      }
+    });
   }
 
   private getPageForIndex(index: number): number {

diff --git a/components/list/demo/module b/components/list/demo/module
@@ -1,10 +1,11 @@
-import { NzListModule } from 'ng-zorro-antd/list';
+import { NzButtonModule } from 'ng-zorro-antd/button';
 import { NzCardModule } from 'ng-zorro-antd/card';
-import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
+import { NzGridModule } from 'ng-zorro-antd/grid';
+import { NzListModule } from 'ng-zorro-antd/list';
+import { NzMessageModule } from 'ng-zorro-antd/message';
 import { NzPaginationModule } from 'ng-zorro-antd/pagination';
-import { NzButtonModule } from 'ng-zorro-antd/button';
+import { NzSkeletonModule } from 'ng-zorro-antd/skeleton';
 import { NzTypographyModule } from 'ng-zorro-antd/typography';
-import { NzGridModule } from 'ng-zorro-antd/grid';
 
 export const moduleList = [
   NzListModule,
@@ -13,5 +14,6 @@ export const moduleList = [
   NzPaginationModule,
   NzButtonModule,
   NzTypographyModule,
-  NzGridModule
+  NzGridModule,
+  NzMessageModule
 ];