refactor(all): upgrade to angular 5.0

close #520 close #514 close #533
NG-ZORRO · Nov 9, 2017 · 4346f3d · 4346f3d
1 parent 35112e8
commit 4346f3d
Show file tree

Hide file tree

Showing 11 changed files with 168 additions and 157 deletions.
diff --git a/package.json b/package.json
@@ -35,28 +35,28 @@
     "url": "https://github.com/NG-ZORRO/ng-zorro-antd/issues"
   },
   "dependencies": {
-    "@angular/cdk": "2.0.0-beta.12",
+    "@angular/cdk": "5.0.0-rc0",
     "moment": "^2.18.1",
     "tslib": "^1.7.1"
   },
   "devDependencies": {
-    "@angular/animations": "^4.4.4",
-    "@angular/cli": "1.4.7",
-    "@angular/common": "^4.4.4",
-    "@angular/compiler": "^4.4.4",
-    "@angular/compiler-cli": "^4.4.4",
-    "@angular/core": "^4.4.4",
-    "@angular/forms": "^4.4.4",
-    "@angular/http": "^4.4.4",
-    "@angular/language-service": "^4.4.4",
-    "@angular/platform-browser": "^4.4.4",
-    "@angular/platform-browser-dynamic": "^4.4.4",
-    "@angular/router": "^4.4.4",
+    "@angular/animations": "^5.0.0",
+    "@angular/cli": "1.5.0",
+    "@angular/common": "^5.0.0",
+    "@angular/compiler": "^5.0.0",
+    "@angular/compiler-cli": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
+    "@angular/http": "^5.0.0",
+    "@angular/language-service": "^5.0.0",
+    "@angular/platform-browser": "^5.0.0",
+    "@angular/platform-browser-dynamic": "^5.0.0",
+    "@angular/router": "^5.0.0",
     "@types/jasmine": "~2.5.53",
     "@types/jasminewd2": "~2.0.2",
     "@types/node": "~6.0.60",
     "classlist.js": "^1.1.20150312",
-    "codelyzer": "~3.1.1",
+    "codelyzer": "~4.0.1",
     "core-js": "^2.4.1",
     "coveralls": "^2.13.1",
     "highlight.js": "^9.12.0",
@@ -75,20 +75,20 @@
     "rollup-plugin-commonjs": "^8.2.1",
     "rollup-plugin-node-resolve": "^3.0.0",
     "rollup-plugin-replace": "^2.0.0",
-    "rxjs": "^5.0.1",
+    "rxjs": "^5.5.2",
     "ts-node": "~3.2.0",
-    "tslint": "~5.3.2",
-    "typescript": "~2.3.3",
+    "tslint": "~5.7.0",
+    "typescript": "~2.4.2",
     "uglify-js": "^3.0.28",
     "web-animations-js": "^2.3.1",
     "zone.js": "^0.8.14"
   },
   "peerDependencies": {
-    "@angular/animations": "^4.4.4",
-    "@angular/cdk": "2.0.0-beta.12",
-    "@angular/common": "^4.4.4",
-    "@angular/core": "^4.4.4",
-    "@angular/forms": "^4.4.4",
+    "@angular/animations": "^5.0.0",
+    "@angular/cdk": "5.0.0-rc0",
+    "@angular/common": "^5.0.0",
+    "@angular/core": "^5.0.0",
+    "@angular/forms": "^5.0.0",
     "moment": "^2.18.1"
   }
 }
diff --git a/rollup.config.js b/rollup.config.js
@@ -7,7 +7,7 @@ const format = process.env.ROLLUP_FORMAT || 'es';
 let globals = {
   '@angular/animations': 'ng.animations',
   // '@angular/cdk': 'ng.cdk',
-  '@angular/cdk/rxjs': 'ng.cdk.rxjs',
+  // '@angular/cdk/rxjs': 'ng.cdk.rxjs',
   '@angular/cdk/keycodes': 'ng.cdk.keycodes',
   '@angular/cdk/overlay': 'ng.cdk.overlay',
   '@angular/cdk/portal': 'ng.cdk.portal',

diff --git a/src/components/affix/nz-affix.component.ts b/src/components/affix/nz-affix.component.ts
@@ -5,26 +5,25 @@ import {
   Input,
   EventEmitter,
   Output,
-  Renderer2,
   OnDestroy,
   ViewChild,
-  ElementRef,
-  HostBinding
+  ElementRef
 } from '@angular/core';
-// import { Observable } from 'rxjs/Observable';
-import { RxChain } from '@angular/cdk/rxjs';
 import { fromEvent } from 'rxjs/observable/fromEvent';
-import { throttleTime } from 'rxjs/operator/throttleTime';
-import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
 import { Subscription } from 'rxjs/Subscription';
+import { throttleTime } from 'rxjs/operators/throttleTime';
+import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
 
 import { NzScrollService } from '../core/scroll/nz-scroll.service';
 
 @Component({
-  selector: 'nz-affix',
+  selector     : 'nz-affix',
   encapsulation: ViewEncapsulation.None,
-  template: `<div #wrap><ng-content></ng-content></div>`,
-  styleUrls: [
+  template     : `
+    <div #wrap>
+      <ng-content></ng-content>
+    </div>`,
+  styleUrls    : [
     './style/index.less',
     './style/patch.less'
   ]
@@ -38,7 +37,7 @@ export class NzAffixComponent implements OnInit, OnDestroy {
   private target: Element = null;
   @ViewChild('wrap') private wrap: ElementRef;
   // 缓存固定状态
-  private fixed: boolean = false;
+  private fixed = false;
   // 原始位置
   private orgOffset: { top: number, left: number };
 
@@ -48,41 +47,48 @@ export class NzAffixComponent implements OnInit, OnDestroy {
     this.registerScrollEvent();
   }
 
-  @Input() nzOffsetTop: number = 0;
+  @Input() nzOffsetTop = 0;
 
-  @Input() nzOffsetBottom: number = 0;
+  @Input() nzOffsetBottom = 0;
 
   @Output() nzChange: EventEmitter<boolean> = new EventEmitter();
 
-  constructor(private scrollSrv: NzScrollService, private _el: ElementRef, private _renderer: Renderer2) { }
+  constructor(private scrollSrv: NzScrollService, private _el: ElementRef) {
+  }
 
   ngOnInit(): void {
-    if (!this.scroll$) this.registerScrollEvent();
+    if (!this.scroll$) {
+      this.registerScrollEvent();
+    }
   }
 
   private getTarget(): Element | Window {
     return this.target || window;
   }
 
   private reCalculate() {
-    let elOffset = this.scrollSrv.getOffset(this._el.nativeElement);
+    const elOffset = this.scrollSrv.getOffset(this._el.nativeElement);
     this.orgOffset = {
-      top: elOffset.top + this.scrollSrv.getScroll(this.getTarget()),
+      top : elOffset.top + this.scrollSrv.getScroll(this.getTarget()),
       left: elOffset.left + this.scrollSrv.getScroll(this.getTarget(), false)
     };
 
     return this;
   }
 
   private process() {
-    if (!this.orgOffset) this.reCalculate();
+    if (!this.orgOffset) {
+      this.reCalculate();
+    }
     const containerScrollTop = this.scrollSrv.getScroll(this.getTarget());
-    let fixTop = this.getTarget() === window ? 0 : this.scrollSrv.getOffset(this.getTarget() as Element).top;
-    let hasFixed = this.orgOffset.top - fixTop - containerScrollTop - this.nzOffsetTop <= 0;
-    if (this.fixed === hasFixed) return;
+    const fixTop = this.getTarget() === window ? 0 : this.scrollSrv.getOffset(this.getTarget() as Element).top;
+    const hasFixed = this.orgOffset.top - fixTop - containerScrollTop - this.nzOffsetTop <= 0;
+    if (this.fixed === hasFixed) {
+      return;
+    }
 
     const wrapEl = this.wrap.nativeElement;
-    wrapEl.classList[hasFixed ? 'add' : 'remove']('ant-affix');
+    wrapEl.classList[ hasFixed ? 'add' : 'remove' ]('ant-affix');
     if (hasFixed) {
       wrapEl.style.cssText = `top:${this.nzOffsetTop + fixTop}px;left:${this.orgOffset.left}px`;
     } else {
@@ -94,9 +100,15 @@ export class NzAffixComponent implements OnInit, OnDestroy {
   }
 
   private removeListen() {
-    if (this.scrollTime) clearTimeout(this.scrollTime);
-    if (this.scroll$) this.scroll$.unsubscribe();
-    if (this.scrollWinInTarget$) this.scrollWinInTarget$.unsubscribe();
+    if (this.scrollTime) {
+      clearTimeout(this.scrollTime);
+    }
+    if (this.scroll$) {
+      this.scroll$.unsubscribe();
+    }
+    if (this.scrollWinInTarget$) {
+      this.scrollWinInTarget$.unsubscribe();
+    }
   }
 
   private registerScrollEvent() {
@@ -108,14 +120,12 @@ export class NzAffixComponent implements OnInit, OnDestroy {
         this.process();
       }
     }, 100);
-    this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain<any>)
+    this.scroll$ = fromEvent(this.getTarget(), 'scroll')
       .subscribe(() => this.didScroll = true);
 
     if (this.getTarget() !== window) {
       // 当 window 滚动位发生变动时，需要重新计算滚动容器
-      this.scrollWinInTarget$ = (RxChain.from(fromEvent(window, 'scroll')) as RxChain<any>)
-        .call(throttleTime, 50)
-        .call(distinctUntilChanged)
+      this.scrollWinInTarget$ = fromEvent(window, 'scroll').pipe(throttleTime(50), distinctUntilChanged())
         .subscribe(e => {
           this.orgOffset = null;
           this.fixed = false;

diff --git a/src/components/anchor/nz-anchor.component.ts b/src/components/anchor/nz-anchor.component.ts
@@ -1,91 +1,94 @@
 import {
   Component,
   ViewEncapsulation,
-  OnInit,
   Input,
   EventEmitter,
   Output,
   Renderer2,
   OnDestroy,
   ViewChild,
   ElementRef,
-  Inject
+  Inject, OnInit
 } from '@angular/core';
 import { DOCUMENT } from '@angular/platform-browser';
-import { RxChain } from '@angular/cdk/rxjs';
 import { fromEvent } from 'rxjs/observable/fromEvent';
-import { throttleTime } from 'rxjs/operator/throttleTime';
-import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged';
+import { throttleTime } from 'rxjs/operators/throttleTime';
+import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged';
 import { Subscription } from 'rxjs/Subscription';
 
 import { NzScrollService } from '../core/scroll/nz-scroll.service';
 import { NzAnchorLinkComponent } from './nz-anchor-link.component';
 
-type Section = {
+interface Section {
   comp: NzAnchorLinkComponent,
   top: number
-};
+}
 
 @Component({
-  selector: 'nz-anchor',
+  selector     : 'nz-anchor',
   encapsulation: ViewEncapsulation.None,
-  template: `
-  <div class="ant-anchor-wrapper" #container>
-    <div class="ant-anchor">
-      <div class="ant-anchor-ink">
-        <div class="ant-anchor-ink-ball" [class.visible]="_visible" #ball></div>
+  template     : `
+    <div class="ant-anchor-wrapper" #container>
+      <div class="ant-anchor">
+        <div class="ant-anchor-ink">
+          <div class="ant-anchor-ink-ball" [class.visible]="_visible" #ball></div>
+        </div>
+        <ng-content></ng-content>
       </div>
-      <ng-content></ng-content>
     </div>
-  </div>
   `,
-  styleUrls: [
+  styleUrls    : [
     './style/index.less',
     './style/patch.less'
   ]
 })
-export class NzAnchorComponent {
+export class NzAnchorComponent implements OnDestroy, OnInit {
 
   private links: NzAnchorLinkComponent[] = [];
   private scroll$: Subscription = null;
   private target: Element = null;
-  private animating: boolean = false;
+  private animating = false;
 
   @ViewChild('container')
   private container: ElementRef;
 
   @ViewChild('ball')
   private ball: ElementRef;
 
-  _top: number = 0;
-  _visible: boolean = false;
+  _top = 0;
+  _visible = false;
 
   @Input()
   set nzTarget(el: Element) {
     this.target = el;
     this.registerScrollEvent();
   }
 
-  @Input() nzOffsetTop: number = 0;
+  @Input() nzOffsetTop = 0;
 
-  @Input() nzBounds: number = 5;
+  @Input() nzBounds = 5;
 
   @Output() nzScroll: EventEmitter<NzAnchorLinkComponent> = new EventEmitter();
 
-  constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2, @Inject(DOCUMENT) private doc: Document) { }
+  constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2, @Inject(DOCUMENT) private doc: Document) {
+  }
 
   ngOnInit(): void {
-    if (!this.scroll$) this.registerScrollEvent();
+    if (!this.scroll$) {
+      this.registerScrollEvent();
+    }
   }
 
   private getTarget(): Element | Window {
     return this.target || window;
   }
 
   private handleScroll() {
-    if (this.animating) return;
+    if (this.animating) {
+      return;
+    }
 
-    let sections: Section[] = [];
+    const sections: Section[] = [];
     this.links.forEach(comp => {
       comp.active = false;
       const target = this.doc.querySelector(comp.nzHref);
@@ -99,20 +102,23 @@ export class NzAnchorComponent {
     });
 
     this._visible = !!sections.length;
-    if (!this._visible)
+    if (!this._visible) {
       return;
+    }
 
     const maxSection = sections.reduce((prev, curr) => curr.top > prev.top ? curr : prev);
     maxSection.comp.active = true;
 
-    let linkNode = (maxSection.comp.el.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
+    const linkNode = (maxSection.comp.el.nativeElement as HTMLDivElement).querySelector('.ant-anchor-link-title') as HTMLElement;
     this.ball.nativeElement.style.top = `${linkNode.offsetTop + linkNode.clientHeight / 2 - 4.5}px`;
 
     this.nzScroll.emit(maxSection.comp);
   }
 
   private removeListen() {
-    if (this.scroll$) this.scroll$.unsubscribe();
+    if (this.scroll$) {
+      this.scroll$.unsubscribe();
+    }
   }
 
   private registerScrollEvent() {
@@ -122,9 +128,7 @@ export class NzAnchorComponent {
     setTimeout(() => {
       this.handleScroll();
     }, 500);
-    this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain<any>)
-      .call(throttleTime, 50)
-      .call(distinctUntilChanged)
+    this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged())
       .subscribe(e => {
         this.handleScroll();
       });
@@ -137,7 +141,9 @@ export class NzAnchorComponent {
   /** 设置滚动条至 `linkComp` 所处位置 */
   scrollTo(linkComp: NzAnchorLinkComponent) {
     const el = this.doc.querySelector(linkComp.nzHref);
-    if (!el) return;
+    if (!el) {
+      return;
+    }
 
     this.animating = true;
     const containerScrollTop = this.scrollSrv.getScroll(this.getTarget());