Merge 61cab48 into 8a6b03d

components/i18n/nz-i18n.service.ts

@@ -1,21 +1,29 @@
 import { DatePipe } from '@angular/common';
 import { Inject, Injectable, Optional, Provider, SkipSelf } from '@angular/core';
+import { BehaviorSubject } from 'rxjs/BehaviorSubject';
+import { Observable } from 'rxjs/Observable';
 
 import { LoggerService } from '../core/util/logger/logger.service';
 
 import * as parse from 'date-fns/parse';
 
+import zh_CN from './languages/zh_CN';
 import { NzI18nInterface } from './nz-i18n.interface';
 import { NZ_I18N } from './nz-i18n.token';
 
 @Injectable()
 export class NzI18nService {
-  private _locale: NzI18nInterface;
+  private _locale: NzI18nInterface = zh_CN;
+  private _change = new BehaviorSubject<NzI18nInterface>(this._locale);
 
   constructor(@Inject(NZ_I18N) locale: NzI18nInterface, private _logger: LoggerService, private datePipe: DatePipe) {
     this.setLocale(locale);
   }
 
+  get localeChange(): Observable<NzI18nInterface> {
+    return this._change.asObservable();
+  }
+
   // [NOTE] Performance issue: this method may called by every change detections
   // TODO: cache more deeply paths for performance
   /* tslint:disable-next-line:no-any */
@@ -37,7 +45,11 @@ export class NzI18nService {
    * @param locale The translating letters
    */
   setLocale(locale: NzI18nInterface): void {
+    if (this._locale.locale === locale.locale) {
+      return ;
+    }
     this._locale = locale;
+    this._change.next(locale);
   }
 
   getLocale(): NzI18nInterface {

components/modal/nz-modal.component.html

@@ -75,12 +75,10 @@
       </ng-container>
       <ng-container *ngSwitchDefault>
         <button *ngIf="nzCancelText!==null" nz-button (click)="onClickOkCancel('cancel')" [nzLoading]="nzCancelLoading">
-          <ng-container *ngIf="nzCancelText">{{ nzCancelText }}</ng-container>
-          <ng-container *ngIf="!nzCancelText">{{ 'Modal.cancelText' | nzI18n }}</ng-container>
+          {{ cancelText }}
         </button>
         <button *ngIf="nzOkText!==null" nz-button [nzType]="nzOkType" (click)="onClickOkCancel('ok')" [nzLoading]="nzOkLoading">
-          <ng-container *ngIf="nzOkText">{{ nzOkText }}</ng-container>
-          <ng-container *ngIf="!nzOkText">{{ 'Modal.okText' | nzI18n }}</ng-container>
+          {{ okText }}
         </button>
       </ng-container>
     </ng-container>
@@ -112,12 +110,10 @@
       </div>
       <div class="ant-confirm-btns">
         <button nz-button *ngIf="nzCancelText!==null" (click)="onClickOkCancel('cancel')" [nzLoading]="nzCancelLoading">
-          <ng-container *ngIf="nzCancelText">{{ nzCancelText }}</ng-container>
-          <ng-container *ngIf="!nzCancelText">{{ 'Modal.cancelText' | nzI18n }}</ng-container>
+          {{ cancelText }}
         </button>
         <button *ngIf="nzOkText!==null" #autoFocusButtonOk nz-button [nzType]="nzOkType" (click)="onClickOkCancel('ok')" [nzLoading]="nzOkLoading">
-          <ng-container *ngIf="nzOkText">{{ nzOkText }}</ng-container>
-          <ng-container *ngIf="!nzOkText">{{ 'Modal.okText' | nzI18n }}</ng-container>
+          {{ okText }}
         </button>
       </div>
     </div> <!-- /.ant-confirm-body-wrapper -->

components/modal/nz-modal.component.ts

@@ -22,6 +22,7 @@ import {
   ViewContainerRef
 } from '@angular/core';
 import { Observable } from 'rxjs/Observable';
+import { Subscription } from 'rxjs/Subscription';
 import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 
 import { InputBoolean } from '../core/util/convert';
@@ -47,6 +48,9 @@ type AnimationState = 'enter' | 'leave' | null;
 
 // tslint:disable-next-line:no-any
 export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> implements OnInit, OnChanges, AfterViewInit, OnDestroy, ModalOptions {
+  private i18n$: Subscription;
+  // tslint:disable-next-line:no-any
+  locale: any = {};
   @Input() nzModalType: ModalType = 'default';
   @Input() nzContent: string | TemplateRef<{}> | Type<T>; // [STATIC] If not specified, will use <ng-content>
   @Input() nzComponentParams: object; // [STATIC] ONLY avaliable when nzContent is a component
@@ -81,11 +85,17 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
 
   // --- Predefined OK & Cancel buttons
   @Input() nzOkText: string;
+  get okText(): string {
+    return this.nzOkText || this.locale.okText;
+  }
   @Input() nzOkType = 'primary';
   @Input() @InputBoolean() nzOkLoading: boolean = false;
   @Input() @Output() nzOnOk: EventEmitter<T> | OnClickCallback<T> = new EventEmitter<T>();
   @ViewChild('autoFocusButtonOk', { read: ElementRef }) autoFocusButtonOk: ElementRef; // Only aim to focus the ok button that needs to be auto focused
   @Input() nzCancelText: string;
+  get cancelText(): string {
+    return this.nzCancelText || this.locale.cancelText;
+  }
   @Input() @InputBoolean() nzCancelLoading: boolean = false;
   @Input() @Output() nzOnCancel: EventEmitter<T> | OnClickCallback<T> = new EventEmitter<T>();
   @ViewChild('modalContainer') modalContainer: ElementRef;
@@ -104,7 +114,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
 
   constructor(
     private overlay: Overlay,
-    private locale: NzI18nService,
+    i18n: NzI18nService,
     private renderer: Renderer2,
     private cfr: ComponentFactoryResolver,
     private elementRef: ElementRef,
@@ -114,6 +124,8 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
     @Inject(DOCUMENT) private document: any) { // tslint:disable-line:no-any
 
     super();
+
+    this.i18n$ = i18n.localeChange.subscribe(() => this.locale = i18n.getLocaleData('Modal'));
   }
 
   ngOnInit(): void {
@@ -162,6 +174,7 @@ export class NzModalComponent<T = any, R = any> extends NzModalRef<T, R> impleme
     if (this.container instanceof OverlayRef) {
       this.container.dispose();
     }
+    this.i18n$.unsubscribe();
   }
 
   open(): void {

components/modal/nz-modal.spec.ts

@@ -10,6 +10,8 @@ import { NzButtonComponent } from '../button/nz-button.component';
 import { NzButtonModule } from '../button/nz-button.module';
 import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
 
+import en_US from '../i18n/languages/en_US';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 import { CssUnitPipe } from './css-unit.pipe';
 import { NzModalControlService } from './nz-modal-control.service';
 import { NzModalRef } from './nz-modal-ref.class';
@@ -295,6 +297,24 @@ describe('modal testing (legacy)', () => {
       expect(testElement.style.top).toBe('100pt');
     });
   });
+
+  it('#i18n', () => {
+    const injector = TestBed.configureTestingModule({
+      imports: [ NzButtonModule, NzModalModule ],
+      declarations: [ NzDemoModalAsyncComponent ],
+      providers   : [ NzMeasureScrollbarService ]
+    });
+    fixture = TestBed.createComponent(NzDemoModalAsyncComponent);
+    const comp = fixture.componentInstance as NzDemoModalAsyncComponent;
+    comp.showModal();
+    fixture.detectChanges();
+    injector.get(NzI18nService).setLocale(en_US);
+    fixture.detectChanges();
+    const cancelText = (fixture.debugElement.query(By.css('nz-modal .ant-btn')).nativeElement as HTMLElement).textContent.trim();
+    expect(cancelText).toBe(en_US.Modal.cancelText);
+    const okText = (fixture.debugElement.query(By.css('nz-modal .ant-btn-primary')).nativeElement as HTMLElement).textContent.trim();
+    expect(okText).toBe(en_US.Modal.okText);
+  });
 });
 
 describe('NzModal', () => {

components/pagination/nz-pagination.component.ts

@@ -2,13 +2,16 @@ import {
   Component,
   EventEmitter,
   Input,
+  OnDestroy,
   Output,
   TemplateRef,
   ViewChild
 } from '@angular/core';
 
+import { Subscription } from 'rxjs/Subscription';
 import { isInteger } from '../core/util/check';
 import { toBoolean } from '../core/util/convert';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 @Component({
   selector           : 'nz-pagination',
@@ -24,7 +27,7 @@ import { toBoolean } from '../core/util/convert';
         [class.ant-table-pagination]="nzInTable"
         class="ant-pagination ant-pagination-simple">
         <li
-          title="{{ 'Pagination.prev_page' | nzI18n }}"
+          title="{{ locale.prev_page }}"
           class="ant-pagination-prev"
           (click)="jumpPreOne()"
           [class.ant-pagination-disabled]="isFirstIndex">
@@ -40,7 +43,7 @@ import { toBoolean } from '../core/util/convert';
           {{ lastIndex }}
         </li>
         <li
-          title="{{ 'Pagination.next_page' | nzI18n }}"
+          title="{{ locale.next_page }}"
           class="ant-pagination-next"
           (click)="jumpNextOne()"
           [class.ant-pagination-disabled]="isLastIndex">
@@ -59,7 +62,7 @@ import { toBoolean } from '../core/util/convert';
         </ng-template>
       </span>
         <li
-          title="{{ 'Pagination.prev_page' | nzI18n }}"
+          title="{{ locale.prev_page }}"
           class="ant-pagination-prev"
           (click)="jumpPreOne()"
           [class.ant-pagination-disabled]="isFirstIndex">
@@ -73,7 +76,7 @@ import { toBoolean } from '../core/util/convert';
           <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: firstIndex }"></ng-template>
         </li>
         <li
-          [attr.title]="'Pagination.prev_5' | nzI18n"
+          [attr.title]="locale.prev_5"
           (click)="jumpPreFive()"
           class="ant-pagination-jump-prev"
           *ngIf="(lastIndex >9)&&(nzPageIndex-3>firstIndex)">
@@ -88,7 +91,7 @@ import { toBoolean } from '../core/util/convert';
           <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: page.index }"></ng-template>
         </li>
         <li
-          [attr.title]="'Pagination.next_5' | nzI18n"
+          [attr.title]="locale.next_5"
           (click)="jumpNextFive()"
           class="ant-pagination-jump-next"
           *ngIf="(lastIndex >9)&&(nzPageIndex+3<lastIndex)">
@@ -103,7 +106,7 @@ import { toBoolean } from '../core/util/convert';
           <ng-template [ngTemplateOutlet]="nzItemRender" [ngTemplateOutletContext]="{ $implicit: 'page',page: lastIndex }"></ng-template>
         </li>
         <li
-          title="{{ 'Pagination.next_page' | nzI18n }}"
+          title="{{ locale.next_page }}"
           class="ant-pagination-next"
           (click)="jumpNextOne()"
           [class.ant-pagination-disabled]="isLastIndex">
@@ -118,28 +121,30 @@ import { toBoolean } from '../core/util/convert';
             (ngModelChange)="onPageSizeChange($event)">
             <nz-option
               *ngFor="let option of nzPageSizeOptions"
-              [nzLabel]="option + ('Pagination.items_per_page' | nzI18n)"
+              [nzLabel]="option + locale.items_per_page"
               [nzValue]="option">
             </nz-option>
             <nz-option
               *ngIf="nzPageSizeOptions.indexOf(nzPageSize)==-1"
-              [nzLabel]="nzPageSize + ('Pagination.items_per_page' | nzI18n)"
+              [nzLabel]="nzPageSize + locale.items_per_page"
               [nzValue]="nzPageSize">
             </nz-option>
           </nz-select>
           <div class="ant-pagination-options-quick-jumper"
             *ngIf="nzShowQuickJumper">
-            {{ 'Pagination.jump_to' | nzI18n }}
+            {{ locale.jump_to }}
             <input #quickJumperInput (keydown.enter)="handleKeyDown($event,quickJumperInput,true)">
-            {{ 'Pagination.page' | nzI18n }}
+            {{ locale.page }}
           </div>
         </div>
       </ul>
     </ng-container>
 
   `
 })
-export class NzPaginationComponent {
+export class NzPaginationComponent implements OnDestroy {
+  private i18n$: Subscription;
+  locale: {} = {};
   @ViewChild('renderItemTemplate') private _itemRender: TemplateRef<{ $implicit: 'page' | 'prev' | 'next', page: number }>;
   private _showSizeChanger = false;
   private _showQuickJumper = false;
@@ -379,6 +384,11 @@ export class NzPaginationComponent {
     return this.nzPageIndex === this.firstIndex;
   }
 
-  constructor() {
+  constructor(i18n: NzI18nService) {
+    this.i18n$ = i18n.localeChange.subscribe(() => this.locale = i18n.getLocaleData('Pagination'));
+  }
+
+  ngOnDestroy(): void {
+    this.i18n$.unsubscribe();
   }
 }

components/pagination/nz-pagination.spec.ts

@@ -1,15 +1,18 @@
-import { Component, ViewChild } from '@angular/core';
+import { Component, Injector, ViewChild } from '@angular/core';
 import { async, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
+import en_US from '../i18n/languages/en_US';
+import { NzI18nService } from '../i18n/nz-i18n.service';
 
 import { NoopAnimationsModule } from '@angular/platform-browser/animations';
 import { NzPaginationComponent } from './nz-pagination.component';
 import { NzPaginationModule } from './nz-pagination.module';
 
 describe('pagination', () => {
+  let injector: Injector;
 
   beforeEach(async(() => {
-    TestBed.configureTestingModule({
+    injector = TestBed.configureTestingModule({
       imports     : [ NzPaginationModule, NoopAnimationsModule ],
       declarations: [ NzTestPaginationComponent, NzTestPaginationRenderComponent, NzTestPaginationTotalComponent ]
     });
@@ -273,6 +276,18 @@ describe('pagination', () => {
       expect(paginationElement.firstElementChild.innerText).toBe('21-40 of 85 items');
     });
   });
+
+  it('#i18n', () => {
+    const fixture = TestBed.createComponent(NzTestPaginationComponent);
+    const dl = fixture.debugElement;
+    fixture.detectChanges();
+    injector.get(NzI18nService).setLocale(en_US);
+    fixture.detectChanges();
+    const prevText = (dl.query(By.css('.ant-pagination-prev')).nativeElement as HTMLElement).title;
+    expect(prevText).toBe(en_US.Pagination.prev_page);
+    const nextText = (dl.query(By.css('.ant-pagination-next')).nativeElement as HTMLElement).title;
+    expect(nextText).toBe(en_US.Pagination.next_page);
+  });
 });
 
 @Component({

components/table/demo/dynamic-settings.ts

@@ -89,6 +89,14 @@ import { Component, OnInit } from '@angular/core';
             </nz-radio-group>
           </nz-form-control>
         </nz-form-item>
+        <nz-form-item>
+          <nz-form-label>
+            <label>No Result</label>
+          </nz-form-label>
+          <nz-form-control>
+            <nz-switch [(ngModel)]="noResult" (ngModelChange)="noResultChange($event)" name="noResult"></nz-switch>
+          </nz-form-control>
+        </nz-form-item>
       </form>
     </div>
     <nz-table
@@ -162,15 +170,17 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit {
   allChecked = false;
   indeterminate = false;
   displayData = [];
+  noResult = false;
 
   currentPageDataChange($event: Array<{ name: string; age: number; address: string; checked: boolean; expand: boolean; description: string; }>): void {
     this.displayData = $event;
     this.refreshStatus();
   }
 
   refreshStatus(): void {
-    const allChecked = this.displayData.filter(value => !value.disabled).every(value => value.checked === true);
-    const allUnChecked = this.displayData.filter(value => !value.disabled).every(value => !value.checked);
+    const validData = this.displayData.filter(value => !value.disabled);
+    const allChecked = validData.length > 0 && validData.every(value => value.checked === true);
+    const allUnChecked = validData.every(value => !value.checked);
     this.allChecked = allChecked;
     this.indeterminate = (!allChecked) && (!allUnChecked);
   }
@@ -196,4 +206,11 @@ export class NzDemoTableDynamicSettingsComponent implements OnInit {
       });
     }
   }
+
+  noResultChange(status: boolean): void {
+    this.dataSet = [];
+    if (!status) {
+      this.ngOnInit();
+    }
+  }
 }