feat(module:tabs): support forceRender in tabs (#2619)

NG-ZORRO · Dec 11, 2018 · fa9160c · fa9160c
1 parent 12a658c
commit fa9160c
Show file tree

Hide file tree

Showing 14 changed files with 67 additions and 110 deletions.
diff --git a/components/input-number/nz-input-number.component.ts b/components/input-number/nz-input-number.component.ts
@@ -1,5 +1,5 @@
 import { FocusMonitor } from '@angular/cdk/a11y';
-import { DOWN_ARROW, UP_ARROW } from '@angular/cdk/keycodes';
+import { DOWN_ARROW, ENTER, UP_ARROW } from '@angular/cdk/keycodes';
 import {
   forwardRef,
   AfterViewInit,
@@ -128,13 +128,16 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
     return Number(num);
   }
 
-  onBlur(): void {
-    this.onTouched();
-    this.isFocused = false;
+  setValidateValue(): void {
     const value = this.getCurrentValidValue(this.actualValue);
     this.setValue(value, `${this.value}` !== `${value}`);
   }
 
+  onBlur(): void {
+    this.isFocused = false;
+    this.setValidateValue();
+  }
+
   onFocus(): void {
     this.isFocused = true;
   }
@@ -292,6 +295,8 @@ export class NzInputNumberComponent implements ControlValueAccessor, AfterViewIn
       const ratio = this.getRatio(e);
       this.down(e, ratio);
       this.stop();
+    } else if (e.keyCode === ENTER) {
+      this.setValidateValue();
     }
   }
 

diff --git a/components/input-number/nz-input-number.spec.ts b/components/input-number/nz-input-number.spec.ts
@@ -1,5 +1,5 @@
 import { Component, ViewChild } from '@angular/core';
-import { fakeAsync, flush, TestBed } from '@angular/core/testing';
+import { fakeAsync, flush, tick, TestBed } from '@angular/core/testing';
 import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
 
@@ -37,18 +37,22 @@ describe('input number', () => {
       expect(inputNumber.nativeElement.classList).toContain('ant-input-number');
       expect(inputElement.getAttribute('placeholder')).toBe('placeholder');
     });
-    it('should focus className correct', () => {
+    it('should focus className correct', fakeAsync(() => {
       fixture.detectChanges();
       expect(inputNumber.nativeElement.classList).toContain('ng-untouched');
       dispatchFakeEvent(inputElement, 'focus');
       fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
       expect(inputNumber.nativeElement.classList).toContain('ng-untouched');
       expect(inputNumber.nativeElement.classList).toContain('ant-input-number-focused');
       dispatchFakeEvent(inputElement, 'blur');
       fixture.detectChanges();
+      tick();
+      fixture.detectChanges();
       expect(inputNumber.nativeElement.classList).not.toContain('ant-input-number-focused');
       expect(inputNumber.nativeElement.classList).toContain('ng-touched');
-    });
+    }));
     it('should nzSize work', () => {
       testComponent.size = 'large';
       fixture.detectChanges();

diff --git a/components/tabs/doc/index.en-US.md b/components/tabs/doc/index.en-US.md
@@ -41,6 +41,7 @@ Ant Design has 3 types of Tabs for different situations.
 | Property | Description | Type | Default |
 | -------- | ----------- | ---- | ------- |
 | `[nzTitle]` | Show text in tab's head | string｜`TemplateRef<void>` | - |
+| `[nzForceRender]` | Forced render of content in tabs, not lazy render after clicking on tabs | boolean | false |
 | `[nzDisabled]` | tab disable | boolean | - |
 | `(nzClick)` | title click callback | `EventEmitter<void>` | - |
 | `(nzSelect)` | title select callback | `EventEmitter<void>` | - |

diff --git a/components/tabs/doc/index.zh-CN.md b/components/tabs/doc/index.zh-CN.md
@@ -44,6 +44,7 @@ Ant Design 依次提供了三级选项卡，分别用于不同的场景。
 | 参数 | 说明 | 类型 | 默认值 |
 | --- | --- | --- | --- |
 | `[nzTitle]` | 选项卡头显示文字 | string ｜ `TemplateRef<void>` | - |
+| `[nzForceRender]` | 被隐藏时是否渲染 DOM 结构 | boolean | false |
 | `[nzDisabled]` | 是否禁用 | boolean | - |
 | `(nzClick)` | title被点击的回调函数 | `EventEmitter<void>` | - |
 | `(nzSelect)` | tab被选中的回调函数 | `EventEmitter<void>` | - |

diff --git a/components/tabs/nz-tab-body.component.html b/components/tabs/nz-tab-body.component.html
@@ -1 +1,3 @@
-<ng-template [ngTemplateOutlet]="content"></ng-template>
+<ng-container *ngIf="active || forceRender">
+  <ng-template [ngTemplateOutlet]="content"></ng-template>
+</ng-container>
diff --git a/components/tabs/nz-tab-body.component.ts b/components/tabs/nz-tab-body.component.ts
@@ -1,14 +1,17 @@
-import {
-  Component,
-  Input,
-  TemplateRef
-} from '@angular/core';
+import { Component, Input, TemplateRef, ViewEncapsulation } from '@angular/core';
 
 @Component({
   selector           : '[nz-tab-body]',
   preserveWhitespaces: false,
-  templateUrl        : './nz-tab-body.component.html'
+  encapsulation      : ViewEncapsulation.None,
+  templateUrl        : './nz-tab-body.component.html',
+  host               : {
+    '[class.ant-tabs-tabpane-active]'  : 'active',
+    '[class.ant-tabs-tabpane-inactive]': '!active'
+  }
 })
 export class NzTabBodyComponent {
   @Input() content: TemplateRef<void>;
+  @Input() active = false;
+  @Input() forceRender = false;
 }
diff --git a/components/tabs/nz-tab-label.directive.ts b/components/tabs/nz-tab-label.directive.ts
@@ -1,26 +1,16 @@
-import { Directive, ElementRef, HostBinding, Input } from '@angular/core';
+import { Directive, ElementRef, Input } from '@angular/core';
 
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
 
 @Directive({
   selector: '[nz-tab-label]',
   host    : {
-    '[class.ant-tabs-tab]': 'true'
+    '[class.ant-tabs-tab]'         : 'true',
+    '[class.ant-tabs-tab-disabled]': 'disabled'
   }
 })
 export class NzTabLabelDirective {
-
-  private _disabled = false;
-
-  @Input()
-  @HostBinding('class.ant-tabs-tab-disabled')
-  set disabled(value: boolean) {
-    this._disabled = toBoolean(value);
-  }
-
-  get disabled(): boolean {
-    return this._disabled;
-  }
+  @Input() @InputBoolean() disabled = false;
 
   constructor(public elementRef: ElementRef) {
   }

diff --git a/components/tabs/nz-tab.component.ts b/components/tabs/nz-tab.component.ts
@@ -6,52 +6,34 @@ import {
   OnInit,
   Output,
   TemplateRef,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
 
 import { NzTabSetComponent } from './nz-tabset.component';
 
 @Component({
   selector           : 'nz-tab',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-tab.component.html',
   host               : {
     '[class.ant-tabs-tabpane]': 'true'
   }
 })
 export class NzTabComponent implements OnDestroy, OnInit {
-  private _title: string | TemplateRef<void>;
-  private _disabled = false;
   position: number | null = null;
   origin: number | null = null;
-  isTitleString: boolean;
-
-  @Input()
-  set nzDisabled(value: boolean) {
-    this._disabled = toBoolean(value);
-  }
-
-  get nzDisabled(): boolean {
-    return this._disabled;
-  }
-
+  @Input() nzTitle: string | TemplateRef<void>;
+  @Input() @InputBoolean() nzForceRender = false;
+  @Input() @InputBoolean() nzDisabled = false;
   @Output() readonly nzClick = new EventEmitter<void>();
   @Output() readonly nzSelect = new EventEmitter<void>();
   @Output() readonly nzDeselect = new EventEmitter<void>();
   @ViewChild(TemplateRef) content: TemplateRef<void>;
 
-  @Input()
-  set nzTitle(value: string | TemplateRef<void>) {
-    this.isTitleString = !(value instanceof TemplateRef);
-    this._title = value;
-  }
-
-  get nzTitle(): string | TemplateRef<void> {
-    return this._title;
-  }
-
   constructor(private nzTabSetComponent: NzTabSetComponent) {
   }
 

diff --git a/components/tabs/nz-tabs-ink-bar.directive.ts b/components/tabs/nz-tabs-ink-bar.directive.ts
@@ -1,7 +1,7 @@
 import { Directive, ElementRef, Input, NgZone, Renderer2 } from '@angular/core';
 
 import { reqAnimFrame } from '../core/polyfill/request-animation';
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
 
 import { NzTabPositionMode } from './nz-tabset.component';
 
@@ -14,16 +14,8 @@ import { NzTabPositionMode } from './nz-tabset.component';
   }
 })
 export class NzTabsInkBarDirective {
-  private _animated = false;
 
-  @Input()
-  set nzAnimated(value: boolean) {
-    this._animated = toBoolean(value);
-  }
-
-  get nzAnimated(): boolean {
-    return this._animated;
-  }
+  @Input() @InputBoolean() nzAnimated = false;
 
   @Input() nzPositionMode: NzTabPositionMode = 'horizontal';
 

diff --git a/components/tabs/nz-tabs-nav.component.ts b/components/tabs/nz-tabs-nav.component.ts
@@ -14,30 +14,28 @@ import {
   QueryList,
   Renderer2,
   TemplateRef,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 import { fromEvent, merge, of as observableOf, Subscription } from 'rxjs';
 import { auditTime, startWith } from 'rxjs/operators';
 
-import { toBoolean } from '../core/util/convert';
+import { InputBoolean } from '../core/util/convert';
 
 import { NzTabLabelDirective } from './nz-tab-label.directive';
 import { NzTabsInkBarDirective } from './nz-tabs-ink-bar.directive';
+import { NzTabPositionMode } from './nz-tabset.component';
 
 const EXAGGERATED_OVERSCROLL = 64;
 export type ScrollDirection = 'after' | 'before';
 
-import { NzTabPositionMode } from './nz-tabset.component';
-
 @Component({
   selector           : '[nz-tabs-nav]',
   preserveWhitespaces: false,
+  encapsulation      : ViewEncapsulation.None,
   templateUrl        : './nz-tabs-nav.component.html'
 })
 export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit {
-  private _animated = true;
-  private _hideBar = false;
-  private _showPagination = true;
   private _type = 'line';
   private _tabPositionMode: NzTabPositionMode = 'horizontal';
   private _scrollDistance = 0;
@@ -56,24 +54,9 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
   @Output() readonly nzOnNextClick = new EventEmitter<void>();
   @Output() readonly nzOnPrevClick = new EventEmitter<void>();
   @Input() nzTabBarExtraContent: TemplateRef<void>;
-
-  @Input()
-  set nzAnimated(value: boolean) {
-    this._animated = toBoolean(value);
-  }
-
-  get nzAnimated(): boolean {
-    return this._animated;
-  }
-
-  @Input()
-  set nzHideBar(value: boolean) {
-    this._hideBar = toBoolean(value);
-  }
-
-  get nzHideBar(): boolean {
-    return this._hideBar;
-  }
+  @Input() @InputBoolean() nzAnimated = true;
+  @Input() @InputBoolean() nzHideBar = false;
+  @Input() @InputBoolean() nzShowPagination = true;
 
   @Input()
   set nzType(value: string) {
@@ -89,15 +72,6 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit
     return this._type;
   }
 
-  @Input()
-  set nzShowPagination(value: boolean) {
-    this._showPagination = toBoolean(value);
-  }
-
-  get nzShowPagination(): boolean {
-    return this._showPagination;
-  }
-
   @Input()
   set nzPositionMode(value: NzTabPositionMode) {
     this._tabPositionMode = value;

diff --git a/components/tabs/nz-tabs.module.ts b/components/tabs/nz-tabs.module.ts
@@ -1,6 +1,7 @@
 import { ObserversModule } from '@angular/cdk/observers';
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
+import { NzAddOnModule } from '../core/addon/addon.module';
 import { NzIconModule } from '../icon/nz-icon.module';
 
 import { NzTabBodyComponent } from './nz-tab-body.component';
@@ -13,7 +14,7 @@ import { NzTabSetComponent } from './nz-tabset.component';
 @NgModule({
   declarations: [ NzTabComponent, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ],
   exports     : [ NzTabComponent, NzTabSetComponent, NzTabsNavComponent, NzTabLabelDirective, NzTabsInkBarDirective, NzTabBodyComponent ],
-  imports     : [ CommonModule, ObserversModule, NzIconModule ]
+  imports     : [ CommonModule, ObserversModule, NzIconModule, NzAddOnModule ]
 })
 export class NzTabsModule {
 }
diff --git a/components/tabs/nz-tabs.spec.ts b/components/tabs/nz-tabs.spec.ts
@@ -497,10 +497,12 @@ describe('tabs', () => {
         [nzHideAll]="hideAll">
         <nz-tab
           nzTitle="title"
+          [nzForceRender]="true"
           (nzDeselect)="deselect00()"
           (nzSelect)="select00()"
           (nzClick)="click00()">Content 1<!----></nz-tab>
         <nz-tab
+          [nzForceRender]="true"
           [nzTitle]="titleTemplate"
           (nzDeselect)="deselect01()"
           (nzSelect)="select01()"
@@ -510,6 +512,7 @@ describe('tabs', () => {
           <button></button>
         </nz-tab>
         <nz-tab
+          [nzForceRender]="true"
           nzTitle="add"
           *ngIf="add"
           (nzDeselect)="deselect02()"

diff --git a/components/tabs/nz-tabset.component.html b/components/tabs/nz-tabset.component.html
@@ -1,4 +1,4 @@
-<div 
+<div
   class="ant-tabs-bar"
   nz-tabs-nav
   role="tablist"
@@ -21,10 +21,7 @@
     [disabled]="tab.nzDisabled"
     (click)="clickLabel(i,tab.nzDisabled)"
     *ngFor="let tab of listOfNzTabComponent; let i = index">
-    <ng-container *ngIf="tab.isTitleString; else titleTemplate">{{ tab.nzTitle }}</ng-container>
-    <ng-template #titleTemplate>
-      <ng-template [ngTemplateOutlet]="tab.nzTitle"></ng-template>
-    </ng-template>
+    <ng-container *nzStringTemplateOutlet="tab.nzTitle">{{ tab.nzTitle }}</ng-container>
   </div>
 </div>
 <div
@@ -34,10 +31,10 @@
   [class.ant-tabs-content-no-animated]="!tabPaneAnimated"
   [style.margin-left.%]="tabPaneAnimated&&(-nzSelectedIndex*100)">
   <div nz-tab-body
+    *ngFor="let tab of listOfNzTabComponent; let i = index"
     class="ant-tabs-tabpane"
-    [class.ant-tabs-tabpane-active]="(nzSelectedIndex == i) && !nzHideAll"
-    [class.ant-tabs-tabpane-inactive]="(nzSelectedIndex != i) || nzHideAll"
-    [content]="tab.content"
-    *ngFor="let tab of listOfNzTabComponent; let i = index">
+    [active]="(nzSelectedIndex == i) && !nzHideAll"
+    [forceRender]="tab.nzForceRender"
+    [content]="tab.content">
   </div>
 </div>