From f999f04c0d0f4434b31a33ddef138df14296182d Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Fri, 14 Jun 2019 16:51:51 +0800 Subject: [PATCH] fix(module:button): disable wave animation when the type is link (#3545) * fix(module:button): disable wave animation when the type is link * test(module:core): fix wave test close #3546 --- components/button/nz-button.component.ts | 5 ++++ components/core/wave/nz-wave-renderer.ts | 7 +++-- components/core/wave/nz-wave.directive.ts | 19 +++++++----- components/core/wave/nz-wave.spec.ts | 36 ++++++++++++++++------- 4 files changed, 48 insertions(+), 19 deletions(-) diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index b3fcd2aad47..eab1818ed06 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -169,5 +169,10 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy, O if (changes.nzLoading) { this.updateIconDisplay(this.nzLoading); } + if (changes.nzType && changes.nzType.currentValue === 'link') { + this.nzWave.disable(); + } else { + this.nzWave.enable(); + } } } diff --git a/components/core/wave/nz-wave-renderer.ts b/components/core/wave/nz-wave-renderer.ts index 08bf5020ef8..5094455c7aa 100644 --- a/components/core/wave/nz-wave-renderer.ts +++ b/components/core/wave/nz-wave-renderer.ts @@ -15,11 +15,13 @@ export class NzWaveRenderer { private extraNode: HTMLDivElement | null; private lastTime = 0; private platform = new Platform(); + clickHandler: () => void; get waveAttributeName(): string { return this.insertExtraNode ? 'ant-click-animating' : 'ant-click-animating-without-extra-node'; } constructor(private triggerElement: HTMLElement, private ngZone: NgZone, private insertExtraNode: boolean) { + this.clickHandler = this.onClick.bind(this); this.bindTriggerEvent(); } @@ -39,8 +41,9 @@ export class NzWaveRenderer { bindTriggerEvent(): void { if (this.platform.isBrowser) { this.ngZone.runOutsideAngular(() => { + this.removeTriggerEvent(); if (this.triggerElement) { - this.triggerElement.addEventListener('click', this.onClick, true); + this.triggerElement.addEventListener('click', this.clickHandler, true); } }); } @@ -48,7 +51,7 @@ export class NzWaveRenderer { removeTriggerEvent(): void { if (this.triggerElement) { - this.triggerElement.removeEventListener('click', this.onClick, true); + this.triggerElement.removeEventListener('click', this.clickHandler, true); } } diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts index 35817cedc16..e6ce79a9e07 100644 --- a/components/core/wave/nz-wave.directive.ts +++ b/components/core/wave/nz-wave.directive.ts @@ -58,15 +58,21 @@ export class NzWaveDirective implements OnInit, OnDestroy { constructor( private ngZone: NgZone, private elementRef: ElementRef, - @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) config: NzWaveConfig, + @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private config: NzWaveConfig, @Optional() @Inject(ANIMATION_MODULE_TYPE) private animationType: string ) { - if (config && typeof config.disabled === 'boolean') { - this.waveDisabled = config.disabled; + this.waveDisabled = this.isConfigDisabled(); + } + + isConfigDisabled(): boolean { + let disabled = false; + if (this.config && typeof this.config.disabled === 'boolean') { + disabled = this.config.disabled; } if (this.animationType === 'NoopAnimations') { - this.waveDisabled = true; + disabled = true; } + return disabled; } ngOnDestroy(): void { @@ -94,11 +100,10 @@ export class NzWaveDirective implements OnInit, OnDestroy { } enable(): void { - this.waveDisabled = false; + // config priority + this.waveDisabled = this.isConfigDisabled() || false; if (this.waveRenderer) { this.waveRenderer.bindTriggerEvent(); - } else { - this.renderWaveIfEnabled(); } } } diff --git a/components/core/wave/nz-wave.spec.ts b/components/core/wave/nz-wave.spec.ts index 91301810a9a..1cdef38c288 100644 --- a/components/core/wave/nz-wave.spec.ts +++ b/components/core/wave/nz-wave.spec.ts @@ -185,9 +185,8 @@ describe('nz-wave extra', () => { }); }); -describe('nz-wave disable/enable', () => { +describe('nz-wave NoopAnimationsModule', () => { let fixture: ComponentFixture; - let waveTarget: HTMLElement; let waveRef: NzWaveDirective; beforeEach(() => { TestBed.configureTestingModule({ @@ -196,25 +195,43 @@ describe('nz-wave disable/enable', () => { }); }); - describe('disable/enable', () => { + describe('NoopAnimationsModule', () => { beforeEach(() => { fixture = TestBed.createComponent(WaveContainerWithButtonComponent); fixture.detectChanges(); - waveTarget = fixture.componentInstance.trigger.nativeElement; waveRef = fixture.componentInstance.wave; }); it('should disable by NoopAnimationsModule ', () => { expect(waveRef.disabled).toBe(true); expect(waveRef.rendererRef).toBeFalsy(); - waveRef.disable(); - expect(waveRef.rendererRef).toBeFalsy(); }); - it('should create waveRenderer when called enable', () => { + it('should config priority', () => { waveRef.enable(); - expect(waveRef.disabled).toBe(false); - expect(waveRef.rendererRef).toBeTruthy(); + expect(waveRef.disabled).toBe(true); + expect(waveRef.rendererRef).toBeFalsy(); + }); + }); +}); + +describe('nz-wave disable/enable', () => { + let fixture: ComponentFixture; + let waveTarget: HTMLElement; + let waveRef: NzWaveDirective; + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NzWaveModule], + declarations: [WaveContainerWithButtonComponent] + }); + }); + + describe('disable/enable', () => { + beforeEach(() => { + fixture = TestBed.createComponent(WaveContainerWithButtonComponent); + fixture.detectChanges(); + waveTarget = fixture.componentInstance.trigger.nativeElement; + waveRef = fixture.componentInstance.wave; }); it('should enable work', () => { @@ -229,7 +246,6 @@ describe('nz-wave disable/enable', () => { it('should disable work', () => { waveRef.disable(); expect(waveRef.disabled).toBe(true); - expect(waveRef.rendererRef).toBeFalsy(); dispatchMouseEvent(waveTarget, 'click'); expect(waveTarget.hasAttribute(WAVE_ATTRIBUTE_NAME)).toBe(false); expect(document.body.querySelector('style') === null).toBe(true);