feat(module:list): list empty style (#2365)

close #2362

components/list/demo/basic.ts

@@ -3,7 +3,8 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-list-basic',
   template: `
-  <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'">
+  <div style="margin-bottom: 8px;"><button nz-button (click)="change()">Switch Data</button></div>
+  <nz-list [nzDataSource]="data" [nzRenderItem]="item" [nzItemLayout]="'horizontal'" [nzLoading]="loading">
     <ng-template #item let-item>
       <nz-list-item>
         <nz-list-item-meta
@@ -20,6 +21,7 @@ import { Component } from '@angular/core';
   `
 })
 export class NzDemoListBasicComponent {
+  loading = false;
   data = [
     {
       title: 'Ant Design Title 1'
@@ -34,4 +36,32 @@ export class NzDemoListBasicComponent {
       title: 'Ant Design Title 4'
     }
   ];
+
+  change(): void {
+    this.loading = true;
+    if (this.data.length > 0) {
+      setTimeout(() => {
+        this.data = [];
+        this.loading = false;
+      }, 1000);
+    } else {
+      setTimeout(() => {
+        this.data = [
+          {
+            title: 'Ant Design Title 1'
+          },
+          {
+            title: 'Ant Design Title 2'
+          },
+          {
+            title: 'Ant Design Title 3'
+          },
+          {
+            title: 'Ant Design Title 4'
+          }
+        ];
+        this.loading = false;
+      }, 1000);
+    }
+  }
 }

components/list/list.spec.ts

@@ -1,9 +1,10 @@
 import { Component, DebugElement, TemplateRef, ViewChild } from '@angular/core';
-import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing';
+import { ComponentFixture, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 
 import { NzIconModule } from '../icon/nz-icon.module';
 
+import { NzListComponent } from './nz-list.component';
 import { NzListModule } from './nz-list.module';
 
 describe('list', () => {
@@ -21,6 +22,12 @@ describe('list', () => {
     fixture.detectChanges();
   });
 
+  afterEach(() => {
+    if (context.comp != null) {
+      context.comp.ngOnDestroy();
+    }
+  });
+
   describe('[fields]', () => {
 
     describe('#nzItemLayout', () => {
@@ -116,8 +123,17 @@ describe('list', () => {
       });
     });
 
-    it('#nzDataSource', () => {
-      expect(dl.queryAll(By.css('nz-list-item')).length).toBe(context.data.length);
+    describe('#nzDataSource', () => {
+      it('should working', () => {
+        expect(dl.queryAll(By.css('nz-list-item')).length).toBe(context.data.length);
+      });
+
+      it('should be render empty text when data source is empty', () => {
+        expect(dl.queryAll(By.css('.ant-list-empty-text')).length).toBe(0);
+        context.data = [];
+        fixture.detectChanges();
+        expect(dl.queryAll(By.css('.ant-list-empty-text')).length).toBe(1);
+      });
     });
 
     it('#nzGrid', () => {
@@ -204,6 +220,7 @@ describe('list', () => {
   `
 })
 class TestListComponent {
+  @ViewChild('comp') comp: NzListComponent;
   nzItemLayout = 'horizontal';
   nzBordered = false;
   nzFooter = 'footer';

components/list/nz-list.component.html

@@ -18,6 +18,9 @@
         [ngTemplateOutletContext]="{ $implicit: item, index: index }"></ng-template>
     </div>
   </div>
+  <div *ngIf="!nzLoading && nzDataSource.length === 0" class="ant-list-empty-text">
+    {{locale.emptyText}}
+  </div>
 </nz-spin>
 <ng-template [ngTemplateOutlet]="nzLoadMore"></ng-template>
 <ng-content></ng-content>

components/list/nz-list.component.ts

@@ -5,11 +5,15 @@ import {
   ElementRef,
   Input,
   OnChanges,
+  OnDestroy,
+  OnInit,
   TemplateRef
 } from '@angular/core';
+import { Subscription } from 'rxjs';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
 import { InputBoolean } from '../core/util/convert';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { ListSize, NzListGrid } from './interface';
 
@@ -29,7 +33,11 @@ import { ListSize, NzListGrid } from './interface';
     }
   ` ]
 })
-export class NzListComponent implements OnChanges {
+export class NzListComponent implements OnInit, OnChanges, OnDestroy {
+  /* tslint:disable-next-line:no-any */
+  locale: any = {};
+  private i18n$: Subscription;
+
   // #region fields
   // tslint:disable-next-line:no-any
   @Input() nzDataSource: any[] = [];
@@ -107,10 +115,21 @@ export class NzListComponent implements OnChanges {
 
   // #endregion
 
-  constructor(private el: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService) {
+  constructor(private el: ElementRef, private cd: ChangeDetectorRef, private updateHostClassService: NzUpdateHostClassService, private i18n: NzI18nService) {
+  }
+
+  ngOnInit(): void {
+    this.i18n$ = this.i18n.localeChange.subscribe(() => {
+      this.locale = this.i18n.getLocaleData('Table');
+      this.cd.detectChanges();
+    });
   }
 
   ngOnChanges(): void {
     this._setClassMap();
   }
+
+  ngOnDestroy(): void {
+    this.i18n$.unsubscribe();
+  }
 }

components/list/nz-list.module.ts

@@ -3,14 +3,15 @@ import { NgModule } from '@angular/core';
 
 import { NzAvatarModule } from '../avatar/nz-avatar.module';
 import { NzGridModule } from '../grid/nz-grid.module';
+import { NzI18nModule } from '../i18n/nz-i18n.module';
 import { NzSpinModule } from '../spin/nz-spin.module';
 
 import { NzListItemMetaComponent } from './nz-list-item-meta.component';
 import { NzListItemComponent } from './nz-list-item.component';
 import { NzListComponent } from './nz-list.component';
 
 @NgModule({
-    imports:        [ CommonModule, NzSpinModule, NzGridModule, NzAvatarModule ],
+    imports:        [ CommonModule, NzSpinModule, NzGridModule, NzAvatarModule, NzI18nModule ],
     declarations:   [ NzListComponent, NzListItemComponent, NzListItemMetaComponent ],
     exports:        [ NzListComponent, NzListItemComponent, NzListItemMetaComponent ]
 })