refactor(module:all): support Angular 7.0 (#2372)

* refactor(module:all): refactor component to support onPush & SSR * refactor(module:badge): refactor badge * refactor(module:button & card): refactor * test(module:button): fix test case * fix(module:avatar): fix avatar * fix(module:tree): fix tree tslint * fix(module:tree): fix tree module * fix(module:all): fix tslint config * refactor(module:all): upgrade to angular 7.0 * fix(module:all): fix typescript error * fix(module:build): fix build less options * fix(module:integration): fix webpack test * build: rm unused package * build: fix build & ci * test(module:spin): fix test error * docs: update readme
NG-ZORRO · Oct 29, 2018 · 3b8f9ea · 3b8f9ea · Svetomechc · Oct 29, 2018
1 parent 7cb8548
commit 3b8f9ea
Show file tree

Hide file tree

Showing 103 changed files with 764 additions and 790 deletions.
diff --git a/README-zh_CN.md b/README-zh_CN.md
@@ -38,7 +38,7 @@ Ant Design 的 Angular 实现，开发和服务于企业级后台产品。
 
 ## 🖥 支持环境
 
-- Angular `^6.0.0`
+- Angular `^7.0.0`
 - 现代浏览器，以及 Internet Explorer 11+ （使用 [polyfills](https://angular.io/guide/browser-support)）
 - [Electron](http://electron.atom.io/)
 

diff --git a/README.md b/README.md
@@ -39,7 +39,7 @@ English | [简体中文](README-zh_CN.md)
 
 ## 🖥 Environment Support
 
-* Angular `^6.0.0`
+* Angular `^7.0.0`
 * Modern browsers and Internet Explorer 11+ (with [polyfills](https://angular.io/guide/browser-support))
 * [Electron](http://electron.atom.io/)
 

diff --git a/components/affix/nz-affix.component.ts b/components/affix/nz-affix.component.ts
@@ -29,23 +29,6 @@ import { throttleByAnimationFrameDecorator } from '../core/util/throttleByAnimat
 })
 export class NzAffixComponent implements OnInit, OnDestroy {
 
-  private timeout: any;
-  private events = [
-    'resize',
-    'scroll',
-    'touchstart',
-    'touchmove',
-    'touchend',
-    'pageshow',
-    'load'
-  ];
-  private affixStyle: any;
-  private placeholderStyle: any;
-
-  @ViewChild('wrap') private wrap: ElementRef;
-
-  private _target: Element | Window = window;
-
   @Input()
   set nzTarget(value: Element | Window) {
     this.clearEventListeners();
@@ -54,8 +37,6 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     this.updatePosition({});
   }
 
-  private _offsetTop: number;
-
   @Input()
   set nzOffsetTop(value: number) {
     if (typeof value === 'undefined') {
@@ -68,8 +49,6 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     return this._offsetTop;
   }
 
-  private _offsetBottom: number;
-
   @Input()
   set nzOffsetBottom(value: number) {
     if (typeof value === 'undefined') {
@@ -78,43 +57,46 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     this._offsetBottom = toNumber(value, null);
   }
 
-  @Output() nzChange: EventEmitter<boolean> = new EventEmitter();
+  @Output()
+  readonly nzChange: EventEmitter<boolean> = new EventEmitter();
 
   constructor(private scrollSrv: NzScrollService, private _el: ElementRef, private cd: ChangeDetectorRef) {
   }
 
+  private timeout: any;
+  private events = [
+    'resize',
+    'scroll',
+    'touchstart',
+    'touchmove',
+    'touchend',
+    'pageshow',
+    'load'
+  ];
+  private affixStyle: any;
+  private placeholderStyle: any;
+
+  @ViewChild('wrap') private wrap: ElementRef;
+
+  private _target: Element | Window = window;
+
+  private _offsetTop: number;
+
+  private _offsetBottom: number;
+
   ngOnInit(): void {
     this.timeout = setTimeout(() => {
       this.setTargetEventListeners();
       this.updatePosition({});
     });
   }
 
-  private setTargetEventListeners(): void {
-    this.clearEventListeners();
-    this.events.forEach((eventName: string) => {
-      this._target.addEventListener(eventName, this.updatePosition, false);
-    });
-  }
-
-  private clearEventListeners(): void {
-    this.events.forEach(eventName => {
-      this._target.removeEventListener(eventName, this.updatePosition, false);
-    });
-  }
-
   ngOnDestroy(): void {
     this.clearEventListeners();
     clearTimeout(this.timeout);
     (this.updatePosition as any).cancel();
   }
 
-  private getTargetRect(target: Element | Window | null): ClientRect {
-    return target !== window ?
-      (target as HTMLElement).getBoundingClientRect() :
-      { top: 0, left: 0, bottom: 0 } as ClientRect;
-  }
-
   getOffset(element: Element, target: Element | Window | null): {
     top: number;
     left: number;
@@ -139,51 +121,6 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     };
   }
 
-  private genStyle(affixStyle: {}): string {
-    if (affixStyle == null) {
-      return '';
-    }
-    return Object.keys(affixStyle).map(key => {
-      const val = affixStyle[ key ];
-      return `${key}:${typeof val === 'string' ? val : val + 'px'}`;
-    }).join(';');
-  }
-
-  private setAffixStyle(e: any, affixStyle: {}): void {
-    const originalAffixStyle = this.affixStyle;
-    const isWindow = this._target === window;
-    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
-      return;
-    }
-    if (shallowEqual(originalAffixStyle, affixStyle)) {
-      return;
-    }
-
-    const fixed = !!affixStyle;
-    const wrapEl = this.wrap.nativeElement as HTMLElement;
-    wrapEl.style.cssText = this.genStyle(affixStyle);
-    this.affixStyle = affixStyle;
-    const cls = 'ant-affix';
-    if (fixed) {
-      wrapEl.classList.add(cls);
-    } else {
-      wrapEl.classList.remove(cls);
-    }
-
-    if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
-      this.nzChange.emit(fixed);
-    }
-  }
-
-  private setPlaceholderStyle(placeholderStyle: {}): void {
-    const originalPlaceholderStyle = this.placeholderStyle;
-    if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) {
-      return;
-    }
-    (this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle);
-    this.placeholderStyle = placeholderStyle;
-  }
-
   @throttleByAnimationFrameDecorator()
   updatePosition(e: any): void {
     const targetNode = this._target;
@@ -251,4 +188,68 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     }
   }
 
+  private setTargetEventListeners(): void {
+    this.clearEventListeners();
+    this.events.forEach((eventName: string) => {
+      this._target.addEventListener(eventName, this.updatePosition, false);
+    });
+  }
+
+  private clearEventListeners(): void {
+    this.events.forEach(eventName => {
+      this._target.removeEventListener(eventName, this.updatePosition, false);
+    });
+  }
+
+  private getTargetRect(target: Element | Window | null): ClientRect {
+    return target !== window ?
+      (target as HTMLElement).getBoundingClientRect() :
+      { top: 0, left: 0, bottom: 0 } as ClientRect;
+  }
+
+  private genStyle(affixStyle: {}): string {
+    if (affixStyle == null) {
+      return '';
+    }
+    return Object.keys(affixStyle).map(key => {
+      const val = affixStyle[ key ];
+      return `${key}:${typeof val === 'string' ? val : val + 'px'}`;
+    }).join(';');
+  }
+
+  private setAffixStyle(e: any, affixStyle: {}): void {
+    const originalAffixStyle = this.affixStyle;
+    const isWindow = this._target === window;
+    if (e.type === 'scroll' && originalAffixStyle && affixStyle && isWindow) {
+      return;
+    }
+    if (shallowEqual(originalAffixStyle, affixStyle)) {
+      return;
+    }
+
+    const fixed = !!affixStyle;
+    const wrapEl = this.wrap.nativeElement as HTMLElement;
+    wrapEl.style.cssText = this.genStyle(affixStyle);
+    this.affixStyle = affixStyle;
+    const cls = 'ant-affix';
+    if (fixed) {
+      wrapEl.classList.add(cls);
+    } else {
+      wrapEl.classList.remove(cls);
+    }
+
+    if ((affixStyle && !originalAffixStyle) || (!affixStyle && originalAffixStyle)) {
+      this.nzChange.emit(fixed);
+    }
+  }
+
+  private setPlaceholderStyle(placeholderStyle: {}): void {
+    const originalPlaceholderStyle = this.placeholderStyle;
+    if (shallowEqual(placeholderStyle, originalPlaceholderStyle)) {
+      return;
+    }
+    (this._el.nativeElement as HTMLElement).style.cssText = this.genStyle(placeholderStyle);
+    this.placeholderStyle = placeholderStyle;
+  }
+
 }
diff --git a/components/alert/nz-alert.component.html b/components/alert/nz-alert.component.html
@@ -2,7 +2,7 @@
   <ng-container *ngIf="nzShowIcon">
     <i class="ant-alert-icon" [ngClass]="nzIconType" *ngIf="nzIconType; else iconTemplate"></i>
     <ng-template #iconTemplate>
-      <i nz-icon class="ant-alert-icon" [type]="iconType"></i>
+      <i nz-icon class="ant-alert-icon" [type]="iconType" [theme]="iconTheme"></i>
     </ng-template>
   </ng-container>
   <span class="ant-alert-message" *ngIf="nzMessage">
@@ -17,10 +17,9 @@
       <ng-template [ngTemplateOutlet]="nzDescription"></ng-template>
     </ng-template>
   </span>
-  <a
-    *ngIf="nzCloseable || nzCloseText"
-    (click)="closeAlert()"
-    class="ant-alert-close-icon">
+  <a *ngIf="nzCloseable || nzCloseText"
+    class="ant-alert-close-icon"
+    (click)="closeAlert()">
     <ng-template #closeDefaultTemplate>
       <i nz-icon type="close" class="anticon-close"></i>
     </ng-template>

diff --git a/components/alert/nz-alert.component.ts b/components/alert/nz-alert.component.ts
@@ -1,48 +1,50 @@
 import {
+  ChangeDetectionStrategy,
   Component,
   EventEmitter,
   Input,
   OnInit,
   Output,
   TemplateRef
 } from '@angular/core';
-
-// tslint:disable-next-line:no-any
-export type NgClassType = string | string[] | Set<string> | { [ klass: string ]: any; };
-
 import { fadeAnimation } from '../core/animation/fade-animations';
+import { NgClassType } from '../core/types/ng-class';
 import { toBoolean } from '../core/util/convert';
 
 @Component({
   selector           : 'nz-alert',
   animations         : [ fadeAnimation ],
-  preserveWhitespaces: false,
   templateUrl        : './nz-alert.component.html',
+  changeDetection    : ChangeDetectionStrategy.OnPush,
+  preserveWhitespaces: false,
   styles             : [
-      `:host {
+    `:host {
       display: block;
     }`
   ]
 })
 export class NzAlertComponent implements OnInit {
-  private _banner = false;
-  private _closeable = false;
-  private _showIcon = false;
-  private _type = 'info';
-  private _description: string | TemplateRef<void>;
-  private _message: string | TemplateRef<void>;
-  private _closeText: string | TemplateRef<void>;
   display = true;
   isTypeSet = false;
   isShowIconSet = false;
   prefixClass = 'ant-alert';
   isDescriptionString: boolean;
   isMessageString: boolean;
   isCloseTextString: boolean;
-  outerClassMap;
-  iconType;
-  @Output() nzOnClose: EventEmitter<boolean> = new EventEmitter();
-  @Input() nzIconType: NgClassType;
+  outerClassMap: NgClassType;
+  iconType: string;
+  iconTheme: string;
+  @Output()
+  readonly nzOnClose: EventEmitter<boolean> = new EventEmitter();
+  @Input()
+  nzIconType: NgClassType;
+  private _banner = false;
+  private _closeable = false;
+  private _showIcon = false;
+  private _type = 'info';
+  private _description: string | TemplateRef<void>;
+  private _message: string | TemplateRef<void>;
+  private _closeText: string | TemplateRef<void>;
 
   @Input()
   set nzDescription(value: string | TemplateRef<void>) {
@@ -145,22 +147,25 @@ export class NzAlertComponent implements OnInit {
   }
 
   updateIconClassMap(): void {
-    const iconType = {
-      'close-circle-o'         : this.nzDescription && this.nzType === 'error',
-      'check-circle-o'         : this.nzDescription && this.nzType === 'success',
-      'info-circle-o'          : this.nzDescription && this.nzType === 'info',
-      'exclamation-circle-o'   : this.nzDescription && this.nzType === 'warning',
-      'close-circle-fill'      : (!this.nzDescription) && this.nzType === 'error',
-      'check-circle-fill'      : (!this.nzDescription) && this.nzType === 'success',
-      'info-circle-fill'       : (!this.nzDescription) && this.nzType === 'info',
-      'exclamation-circle-fill': (!this.nzDescription) && this.nzType === 'warning'
-    };
-
-    Object.keys(iconType).forEach(key => {
-      if (iconType[ key ]) {
-        this.iconType = key;
-      }
-    });
+    switch (this.nzType) {
+      case 'error':
+        this.iconType = 'close-circle';
+        break;
+      case 'success':
+        this.iconType = 'check-circle';
+        break;
+      case 'info':
+        this.iconType = 'info-circle';
+        break;
+      case 'warning':
+        this.iconType = 'exclamation-circle';
+        break;
+    }
+    if (this.nzDescription) {
+      this.iconTheme = 'outline';
+    } else {
+      this.iconTheme = `fill`;
+    }
   }
 
   ngOnInit(): void {

diff --git a/components/anchor/nz-anchor.component.ts b/components/anchor/nz-anchor.component.ts
@@ -98,9 +98,9 @@ export class NzAnchorComponent implements OnDestroy, AfterViewInit {
     this.registerScrollEvent();
   }
 
-  @Output() nzClick: EventEmitter<string> = new EventEmitter();
+  @Output() readonly nzClick: EventEmitter<string> = new EventEmitter();
 
-  @Output() nzScroll: EventEmitter<NzAnchorLinkComponent> = new EventEmitter();
+  @Output() readonly nzScroll: EventEmitter<NzAnchorLinkComponent> = new EventEmitter();
 
   // endregion