From 4346f3d0bc480432b9a60ece1efb280901fb3957 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=89=A7=E8=A1=A1?= Date: Thu, 9 Nov 2017 20:41:10 +0800 Subject: [PATCH] refactor(all): upgrade to angular 5.0 close #520 close #514 close #533 --- package.json | 44 ++++++------ rollup.config.js | 2 +- src/components/affix/nz-affix.component.ts | 68 ++++++++++-------- src/components/anchor/nz-anchor.component.ts | 72 ++++++++++--------- .../back-top/nz-back-top.component.ts | 33 ++++----- .../dropdown/nz-dropdown.component.ts | 6 +- src/components/menu/nz-submenu.component.ts | 33 +++++---- src/components/slider/nz-slider.component.ts | 49 +++++++------ src/components/tabs/nz-tabs-nav.component.ts | 9 ++- src/components/tabs/nz-tabset.component.ts | 4 +- tslint.json | 5 +- 11 files changed, 168 insertions(+), 157 deletions(-) diff --git a/package.json b/package.json index 5eea3e46f4e..cf46d7bed15 100644 --- 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 index cf89d06c194..ede59d71f33 100644 --- 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 index e4a2e005dcb..d613191222f 100644 --- 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: `
`, - styleUrls: [ + template : ` +
+ +
`, + 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,16 +47,19 @@ 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 = 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 { @@ -65,9 +67,9 @@ export class NzAffixComponent implements OnInit, OnDestroy { } 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) }; @@ -75,14 +77,18 @@ export class NzAffixComponent implements OnInit, OnDestroy { } 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) + this.scroll$ = fromEvent(this.getTarget(), 'scroll') .subscribe(() => this.didScroll = true); if (this.getTarget() !== window) { // 当 window 滚动位发生变动时，需要重新计算滚动容器 - this.scrollWinInTarget$ = (RxChain.from(fromEvent(window, 'scroll')) as RxChain) - .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 index 52d5f04db1d..4c70886c101 100644 --- a/src/components/anchor/nz-anchor.component.ts +++ b/src/components/anchor/nz-anchor.component.ts @@ -1,7 +1,6 @@ import { Component, ViewEncapsulation, - OnInit, Input, EventEmitter, Output, @@ -9,47 +8,46 @@ import { 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: ` -
-
-
-
+ template : ` +
+
+
+
+
+
-
-
`, - 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; @@ -57,8 +55,8 @@ export class NzAnchorComponent { @ViewChild('ball') private ball: ElementRef; - _top: number = 0; - _visible: boolean = false; + _top = 0; + _visible = false; @Input() set nzTarget(el: Element) { @@ -66,16 +64,19 @@ export class NzAnchorComponent { this.registerScrollEvent(); } - @Input() nzOffsetTop: number = 0; + @Input() nzOffsetTop = 0; - @Input() nzBounds: number = 5; + @Input() nzBounds = 5; @Output() nzScroll: EventEmitter = 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 { @@ -83,9 +84,11 @@ export class NzAnchorComponent { } 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) - .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()); diff --git a/src/components/back-top/nz-back-top.component.ts b/src/components/back-top/nz-back-top.component.ts index 7b008e72e7e..eea0fb1f871 100644 --- a/src/components/back-top/nz-back-top.component.ts +++ b/src/components/back-top/nz-back-top.component.ts @@ -17,19 +17,17 @@ import { transition, animate } from '@angular/animations'; -// 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 { throttleTime } from 'rxjs/operators/throttleTime'; +import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged'; import { Subscription } from 'rxjs/Subscription'; import { NzScrollService } from '../core/scroll/nz-scroll.service'; @Component({ - selector: 'nz-back-top', + selector : 'nz-back-top', encapsulation: ViewEncapsulation.None, - animations: [ + animations : [ trigger('enterLeave', [ transition(':enter', [ style({ opacity: 0 }), @@ -41,15 +39,15 @@ import { NzScrollService } from '../core/scroll/nz-scroll.service'; ]) ]) ], - template: ` -
- -
- - -
+ template : ` +
+ +
+ + +
`, - styleUrls: [ + styleUrls : [ './style/index.less', './style/patch.less' ] @@ -73,7 +71,8 @@ export class NzBackTopComponent implements OnInit, OnDestroy { @Output() nzClick: EventEmitter = new EventEmitter(); - constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2) { } + constructor(private scrollSrv: NzScrollService, private _renderer: Renderer2) { + } ngOnInit(): void { if (!this.scroll$) this.registerScrollEvent(); @@ -99,9 +98,7 @@ export class NzBackTopComponent implements OnInit, OnDestroy { private registerScrollEvent() { this.removeListen(); this.handleScroll(); - this.scroll$ = (RxChain.from(fromEvent(this.getTarget(), 'scroll')) as RxChain) - .call(throttleTime, 50) - .call(distinctUntilChanged) + this.scroll$ = fromEvent(this.getTarget(), 'scroll').pipe(throttleTime(50), distinctUntilChanged()) .subscribe(e => { this.handleScroll(); }); diff --git a/src/components/dropdown/nz-dropdown.component.ts b/src/components/dropdown/nz-dropdown.component.ts index bc15b64711e..e8f7cb775d4 100644 --- a/src/components/dropdown/nz-dropdown.component.ts +++ b/src/components/dropdown/nz-dropdown.component.ts @@ -13,7 +13,7 @@ import { ChangeDetectorRef } from '@angular/core'; import { merge } from 'rxjs/observable/merge'; -import { debounceTime } from 'rxjs/operator/debounceTime'; +import { debounceTime } from 'rxjs/operators/debounceTime'; import { Observable } from 'rxjs/Observable'; import { Subject } from 'rxjs/Subject'; import { Subscription } from 'rxjs/Subscription'; @@ -79,7 +79,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit { @Input() nzTrigger: 'click' | 'hover' = 'hover'; @Input() nzClickHide = true; @Input() nzVisible = false; - @Output() _visibleChange = new Subject(); + @Output() _visibleChange = new Subject(); @Output() nzVisibleChange: EventEmitter = new EventEmitter(); @Input() @@ -148,7 +148,7 @@ export class NzDropDownComponent implements OnInit, OnDestroy, AfterViewInit { } _startSubscribe(observable$: Observable) { - this._subscription = debounceTime.call(observable$, 300) + this._subscription = observable$.pipe(debounceTime(300)) .subscribe(this._onVisibleChange) } diff --git a/src/components/menu/nz-submenu.component.ts b/src/components/menu/nz-submenu.component.ts index 712efe6fe55..f37d9ff921c 100644 --- a/src/components/menu/nz-submenu.component.ts +++ b/src/components/menu/nz-submenu.component.ts @@ -5,22 +5,13 @@ import { import { style, animate, state, transition, trigger } from '@angular/animations'; import { NzMenuComponent } from './nz-menu.component'; import { Subject } from 'rxjs/Subject'; -import { debounceTime } from 'rxjs/operator/debounceTime'; +import { debounceTime } from 'rxjs/operators/debounceTime'; @Component({ selector : '[nz-submenu]', animations: [ - trigger('fadeAnimation', [ - state('*', style({ opacity: 1 })), - transition('* => void', [ - animate(150, style({ opacity: 0, display: 'none' })) - ]), - transition('void => *', [ - style({ opacity: '0' }), - animate(150, style({ opacity: 1 })) - ]) - ]), trigger('expandAnimation', [ + state('fade', style({ opacity: 1 })), transition('expand => void', [ style({ height: '*', overflow: 'hidden' }), animate(150, style({ height: 0 })) @@ -28,6 +19,13 @@ import { debounceTime } from 'rxjs/operator/debounceTime'; transition('void => expand', [ style({ height: 0, overflow: 'hidden' }), animate(150, style({ height: '*' })) + ]), + transition('fade => void', [ + animate(150, style({ opacity: 0 })) + ]), + transition('void => fade', [ + style({ opacity: '0' }), + animate(150, style({ opacity: 1 })) ]) ]) ], @@ -43,7 +41,6 @@ import { debounceTime } from 'rxjs/operator/debounceTime';
    e.selected && e.nzSubMenuComponent === this); } + get submenuSelected(): boolean { return !!this.subMenus._results.find(e => e !== this && e.subItemSelected) } get expandState() { - if (this.nzOpen && this.nzMenuComponent.nzMode !== 'vertical') { + if (this.nzOpen && this.nzMenuComponent.nzMode === 'inline') { return 'expand'; + } else if (this.nzOpen && this.nzMenuComponent.nzMode !== 'inline') { + return 'fade' } return null; } @@ -174,8 +174,11 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit { } ngOnInit() { - debounceTime.call(this._$mouseSubject, 300).subscribe((data: boolean) => { - this.nzOpen = data; + this._$mouseSubject.pipe(debounceTime(300)).subscribe((data: boolean) => { + if (this.nzOpen !== data) { + this.nzOpen = data; + this.nzOpenChange.emit(this.nzOpen); + } }); } diff --git a/src/components/slider/nz-slider.component.ts b/src/components/slider/nz-slider.component.ts index 5ef0ba15c91..e0b813db417 100644 --- a/src/components/slider/nz-slider.component.ts +++ b/src/components/slider/nz-slider.component.ts @@ -13,17 +13,16 @@ import { forwardRef, } from '@angular/core'; import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { RxChain } from '@angular/cdk/rxjs'; import { Observable } from 'rxjs/Observable'; import { Subscription } from 'rxjs/Subscription'; import { fromEvent } from 'rxjs/observable/fromEvent'; import { merge } from 'rxjs/observable/merge'; -import { distinctUntilChanged } from 'rxjs/operator/distinctUntilChanged'; -import { _do as doOperator } from 'rxjs/operator/do'; -import { filter as filterOperator } from 'rxjs/operator/filter'; -import { map } from 'rxjs/operator/map'; -import { pluck } from 'rxjs/operator/pluck'; -import { takeUntil } from 'rxjs/operator/takeUntil'; +import { distinctUntilChanged } from 'rxjs/operators/distinctUntilChanged'; +import { tap } from 'rxjs/operators/tap'; +import { map } from 'rxjs/operators/map'; +import { pluck } from 'rxjs/operators/pluck'; +import { takeUntil } from 'rxjs/operators/takeUntil'; +import { filter } from 'rxjs/operators/filter'; import { NzSliderService } from './nz-slider.service'; import { Marks, MarksArray } from './nz-slider-marks.component'; @@ -378,26 +377,26 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange }; // make observables [ mouse, touch ].forEach(source => { - const { start, move, end, pluckKey, filter = () => true } = source; + const { start, move, end, pluckKey, filterFunc = ((value: any, index: number) => true) as any } = source; // start - source.startPlucked$ = (RxChain.from(fromEvent(sliderDOM, start)) as RxChain) - .call(filterOperator, filter) - .call(doOperator, this.utils.pauseEvent) - .call(pluck, ...pluckKey) - .call(map, (position: number) => this.findClosestValue(position)) - .result(); + source.startPlucked$ = fromEvent(sliderDOM, start).pipe( + filter(filterFunc), + tap(this.utils.pauseEvent), + pluck(...pluckKey), + map((position: number) => this.findClosestValue(position)) + ); // end source.end$ = fromEvent(document, end); // resolve move - source.moveResolved$ = (RxChain.from(fromEvent(document, move)) as RxChain) - .call(filterOperator, filter) - .call(doOperator, this.utils.pauseEvent) - .call(pluck, ...pluckKey) - .call(distinctUntilChanged) - .call(map, (position: number) => this.findClosestValue(position)) - .call(distinctUntilChanged) - .call(takeUntil, source.end$) - .result(); + source.moveResolved$ = fromEvent(document, move).pipe( + filter(filterFunc), + tap(this.utils.pauseEvent), + pluck(...pluckKey), + distinctUntilChanged(), + map((position: number) => this.findClosestValue(position)), + distinctUntilChanged(), + takeUntil(source.end$), + ); // merge to become moving // source.move$ = source.startPlucked$.mergeMapTo(source.moveResolved$); }); @@ -476,8 +475,8 @@ export class NzSliderComponent implements ControlValueAccessor, OnInit, OnChange points = (nzMarks === null ? [] : Object.keys(nzMarks).map(parseFloat)) as Array; // push closest step if (nzStep !== null && !nzDots) { - const closest = Math.round(val / nzStep) * nzStep; - points.push(closest); + const closestOne = Math.round(val / nzStep) * nzStep; + points.push(closestOne); } // calculate gaps const gaps = points.map(point => Math.abs(val - point)); diff --git a/src/components/tabs/nz-tabs-nav.component.ts b/src/components/tabs/nz-tabs-nav.component.ts index 87229e65495..8d7a20fbedf 100644 --- a/src/components/tabs/nz-tabs-nav.component.ts +++ b/src/components/tabs/nz-tabs-nav.component.ts @@ -26,8 +26,8 @@ export type ScrollDirection = 'after' | 'before'; import { of as observableOf } from 'rxjs/observable/of'; import { merge } from 'rxjs/observable/merge'; import { fromEvent } from 'rxjs/observable/fromEvent'; -import { auditTime } from 'rxjs/operator/auditTime'; -import { startWith } from 'rxjs/operator/startWith'; +import { auditTime } from 'rxjs/operators/auditTime'; +import { startWith } from 'rxjs/operators/startWith'; /** duplicated defined https://github.com/angular/angular-cli/issues/2034 **/ export type NzTabPositionMode = 'horizontal' | 'vertical'; @@ -168,10 +168,9 @@ export class NzTabsNavComponent implements AfterContentChecked, AfterContentInit this._realignInkBar = this._ngZone.runOutsideAngular(() => { const dirChange = this._dir ? this._dir.change : observableOf(null); const resize = typeof window !== 'undefined' ? - auditTime.call(fromEvent(window, 'resize'), 10) : + fromEvent(window, 'resize').pipe(auditTime(10)) : observableOf(null); - - return startWith.call(merge(dirChange, resize), null).subscribe(() => { + return merge(dirChange, resize).pipe(startWith(null)).subscribe(() => { if (this.nzShowPagination) { this._updatePagination(); } diff --git a/src/components/tabs/nz-tabset.component.ts b/src/components/tabs/nz-tabset.component.ts index 3d6d9c10a22..2481fc769d5 100644 --- a/src/components/tabs/nz-tabset.component.ts +++ b/src/components/tabs/nz-tabset.component.ts @@ -18,7 +18,7 @@ import { import { NzTabComponent } from './nz-tab.component'; import { NzTabsNavComponent } from './nz-tabs-nav.component'; import { Observable } from 'rxjs/Observable'; -import { map } from 'rxjs/operator/map'; +import { map } from 'rxjs/operators/map'; export interface NzAnimatedInterface { inkBar: boolean, @@ -110,7 +110,7 @@ export class NzTabSetComponent implements AfterContentChecked, OnInit, AfterView @Output() get nzSelectedIndexChange(): Observable { - return map.call(this.nzSelectChange, event => event.index); + return this.nzSelectChange.pipe(map(event => event.index)); } @Output() nzSelectChange: EventEmitter = new EventEmitter(true); diff --git a/tslint.json b/tslint.json index e34b567a7d6..a0c8d03f93c 100644 --- a/tslint.json +++ b/tslint.json @@ -135,9 +135,6 @@ "use-life-cycle-interface": true, "use-pipe-transform-interface": true, "component-class-suffix": true, - "directive-class-suffix": true, - "no-access-missing-member": true, - "templates-use-public": true, - "invoke-injectable": true + "directive-class-suffix": true } }