From 58587d993a7304f3a63101de656f0992fd5d53cf Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Tue, 28 May 2019 12:12:05 +0800 Subject: [PATCH] feat(module:core): wave directive support disable --- components/core/wave/nz-wave-renderer.ts | 19 +++--- components/core/wave/nz-wave.directive.ts | 25 ++++++++ components/core/wave/nz-wave.spec.ts | 73 +++++++++++++++++++++-- 3 files changed, 103 insertions(+), 14 deletions(-) diff --git a/components/core/wave/nz-wave-renderer.ts b/components/core/wave/nz-wave-renderer.ts index 88dc486b166..08bf5020ef8 100644 --- a/components/core/wave/nz-wave-renderer.ts +++ b/components/core/wave/nz-wave-renderer.ts @@ -14,16 +14,13 @@ export class NzWaveRenderer { private styleForPseudo: HTMLStyleElement | null; private extraNode: HTMLDivElement | null; private lastTime = 0; - + private platform = new Platform(); 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) { - const platform = new Platform(); - if (platform.isBrowser) { - this.bindTriggerEvent(); - } + this.bindTriggerEvent(); } onClick = (event: MouseEvent) => { @@ -40,11 +37,13 @@ export class NzWaveRenderer { }; bindTriggerEvent(): void { - this.ngZone.runOutsideAngular(() => { - if (this.triggerElement) { - this.triggerElement.addEventListener('click', this.onClick, true); - } - }); + if (this.platform.isBrowser) { + this.ngZone.runOutsideAngular(() => { + if (this.triggerElement) { + this.triggerElement.addEventListener('click', this.onClick, true); + } + }); + } } removeTriggerEvent(): void { diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts index 2a30546a765..35817cedc16 100644 --- a/components/core/wave/nz-wave.directive.ts +++ b/components/core/wave/nz-wave.directive.ts @@ -47,6 +47,14 @@ export class NzWaveDirective implements OnInit, OnDestroy { private waveRenderer: NzWaveRenderer; private waveDisabled: boolean = false; + get disabled(): boolean { + return this.waveDisabled; + } + + get rendererRef(): NzWaveRenderer { + return this.waveRenderer; + } + constructor( private ngZone: NgZone, private elementRef: ElementRef, @@ -76,4 +84,21 @@ export class NzWaveDirective implements OnInit, OnDestroy { this.waveRenderer = new NzWaveRenderer(this.elementRef.nativeElement, this.ngZone, this.nzWaveExtraNode); } } + + disable(): void { + this.waveDisabled = true; + if (this.waveRenderer) { + this.waveRenderer.removeTriggerEvent(); + this.waveRenderer.removeStyleAndExtraNode(); + } + } + + enable(): void { + this.waveDisabled = 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 86ac40a77fc..ae6f01281ea 100644 --- a/components/core/wave/nz-wave.spec.ts +++ b/components/core/wave/nz-wave.spec.ts @@ -1,5 +1,6 @@ import { Component, ElementRef, ViewChild } from '@angular/core'; import { fakeAsync, tick, ComponentFixture, TestBed } from '@angular/core/testing'; +import { NoopAnimationsModule } from '@angular/platform-browser/animations'; import { dispatchMouseEvent } from '../testing'; import { NzWaveDirective } from './nz-wave.directive'; import { NzWaveModule } from './nz-wave.module'; @@ -8,14 +9,14 @@ const WAVE_ATTRIBUTE_NAME = 'ant-click-animating-without-extra-node'; const WAVE_ATTRIBUTE_NAME_EXTRA_NODE = 'ant-click-animating'; const EXTRA_NODE_CLASS_NAME = '.ant-click-animating-node'; -describe('nz-wave', () => { - let fixture: ComponentFixture; +describe('nz-wave base', () => { + let fixture: ComponentFixture; let waveTarget: HTMLElement; beforeEach(() => { TestBed.configureTestingModule({ imports: [NzWaveModule], - declarations: [WaveContainerWithButtonComponent, WaveContainerWithExtraNodeComponent] + declarations: [WaveContainerWithButtonComponent] }); }); @@ -52,7 +53,7 @@ describe('nz-wave', () => { }); it('should not create wave on click when disabled', () => { - (fixture.componentInstance as WaveContainerWithButtonComponent).disabled = true; + fixture.componentInstance.disabled = true; fixture.detectChanges(); dispatchMouseEvent(waveTarget, 'click'); expect(waveTarget.hasAttribute(WAVE_ATTRIBUTE_NAME)).toBe(false); @@ -101,6 +102,18 @@ describe('nz-wave', () => { expect(document.body.querySelector('style') !== null).toBe(false); }); }); +}); + +describe('nz-wave extra', () => { + let fixture: ComponentFixture; + let waveTarget: HTMLElement; + + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NzWaveModule], + declarations: [WaveContainerWithExtraNodeComponent] + }); + }); describe('extra node wave', () => { beforeEach(() => { @@ -172,6 +185,58 @@ describe('nz-wave', () => { }); }); +describe('nz-wave disable/enable', () => { + let fixture: ComponentFixture; + let waveTarget: HTMLElement; + let waveRef: NzWaveDirective; + beforeEach(() => { + TestBed.configureTestingModule({ + imports: [NzWaveModule, NoopAnimationsModule], + declarations: [WaveContainerWithButtonComponent] + }); + }); + + describe('disable/enable', () => { + 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', () => { + waveRef.enable(); + expect(waveRef.disabled).toBe(false); + expect(waveRef.rendererRef).toBeTruthy(); + }); + + it('should enable work', () => { + waveRef.enable(); + expect(waveRef.disabled).toBe(false); + expect(waveRef.rendererRef).toBeTruthy(); + dispatchMouseEvent(waveTarget, 'click'); + expect(waveTarget.hasAttribute(WAVE_ATTRIBUTE_NAME)).toBe(true); + expect(document.body.querySelector('style') !== null).toBe(true); + }); + + 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); + }); + }); +}); + @Component({ template: `