fix(module:button): disable wave animation when the type is link (NG-…

…ZORRO#3545) * fix(module:button): disable wave animation when the type is link * test(module:core): fix wave test close NG-ZORRO#3546
Ricbet · Apr 9, 2020 · f999f04 · f999f04
1 parent 9942627
commit f999f04
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 19 deletions.
diff --git 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
@@ -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,16 +41,17 @@ 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);
         }
       });
     }
   }
 
   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
@@ -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
@@ -185,9 +185,8 @@ describe('nz-wave extra', () => {
   });
 });
 
-describe('nz-wave disable/enable', () => {
+describe('nz-wave NoopAnimationsModule', () => {
   let fixture: ComponentFixture<WaveContainerWithButtonComponent>;
-  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<WaveContainerWithButtonComponent>;
+  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);