feat(module:core): wave directive support disable

NG-ZORRO · May 28, 2019 · 58587d9 · 58587d9
1 parent ddc77a6
commit 58587d9
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 14 deletions.
diff --git 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
@@ -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
@@ -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<WaveContainerWithButtonComponent | WaveContainerWithExtraNodeComponent>;
+describe('nz-wave base', () => {
+  let fixture: ComponentFixture<WaveContainerWithButtonComponent>;
   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<WaveContainerWithExtraNodeComponent>;
+  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<WaveContainerWithButtonComponent>;
+  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: `
     <button