diff --git a/components/button/nz-button.component.ts b/components/button/nz-button.component.ts index 2bed43eea4a..e90a4979482 100644 --- a/components/button/nz-button.component.ts +++ b/components/button/nz-button.component.ts @@ -6,10 +6,11 @@ import { ContentChildren, ElementRef, HostBinding, + Inject, Input, NgZone, OnDestroy, - OnInit, + OnInit, Optional, QueryList, Renderer2, ViewChild, @@ -21,7 +22,7 @@ import { NzSizeLDSType } from '../core/types/size'; import { isEmpty } from '../core/util/check'; import { toBoolean } from '../core/util/convert'; import { findFirstNotEmptyNode, findLastNotEmptyNode } from '../core/util/dom'; -import { NzWaveDirective } from '../core/wave/nz-wave.directive'; +import { NzWaveConfig, NzWaveDirective, NZ_WAVE_GLOBAL_CONFIG } from '../core/wave/nz-wave.directive'; import { NzIconDirective } from '../icon/nz-icon.directive'; export type NzButtonType = 'primary' | 'dashed' | 'danger'; @@ -39,7 +40,7 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { readonly el: HTMLElement = this.elementRef.nativeElement; @ViewChild('contentElement') contentElement: ElementRef; @ContentChildren(NzIconDirective, { read: ElementRef }) listOfIconElement: QueryList; - @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(this.ngZone, this.elementRef); + @HostBinding('attr.nz-wave') nzWave = new NzWaveDirective(this.ngZone, this.elementRef, this.waveConfig); @Input() set nzBlock(value: boolean) { @@ -112,7 +113,9 @@ export class NzButtonComponent implements AfterContentInit, OnInit, OnDestroy { return this._loading; } - constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private renderer: Renderer2, private nzUpdateHostClassService: NzUpdateHostClassService, private ngZone: NgZone) { + constructor(private elementRef: ElementRef, private cdr: ChangeDetectorRef, private renderer: Renderer2, + private nzUpdateHostClassService: NzUpdateHostClassService, private ngZone: NgZone, + @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) private waveConfig: NzWaveConfig) { } private _ghost = false; diff --git a/components/core/wave/nz-wave-renderer.ts b/components/core/wave/nz-wave-renderer.ts index c9f57bb8beb..3068d2e7923 100644 --- a/components/core/wave/nz-wave-renderer.ts +++ b/components/core/wave/nz-wave-renderer.ts @@ -3,7 +3,7 @@ import { NgZone } from '@angular/core'; export class NzWaveRenderer { - readonly waveTransitionDuration = 400; + private waveTransitionDuration = 400; private styleForPseudo: HTMLStyleElement | null; private extraNode: HTMLDivElement | null; private lastTime = 0; diff --git a/components/core/wave/nz-wave.directive.ts b/components/core/wave/nz-wave.directive.ts index 1d978ff432e..a329a484ea8 100644 --- a/components/core/wave/nz-wave.directive.ts +++ b/components/core/wave/nz-wave.directive.ts @@ -1,16 +1,48 @@ -import { Directive, ElementRef, Input, NgZone, OnDestroy, OnInit } from '@angular/core'; +import { + Directive, + ElementRef, + Inject, + InjectionToken, + Input, + NgZone, + OnDestroy, + OnInit, + Optional +} from '@angular/core'; import { NzWaveRenderer } from './nz-wave-renderer'; +export interface NzWaveConfig { + disabled?: boolean; +} + +export const NZ_WAVE_GLOBAL_DEFAULT_CONFIG: NzWaveConfig = { + disabled: false +}; + +export const NZ_WAVE_GLOBAL_CONFIG = new InjectionToken('nz-wave-global-options', { + providedIn: 'root', + factory: NZ_WAVE_GLOBAL_CONFIG_FACTORY +}); + +export function NZ_WAVE_GLOBAL_CONFIG_FACTORY(): NzWaveConfig { + return NZ_WAVE_GLOBAL_DEFAULT_CONFIG; +} + @Directive({ selector: '[nz-wave]' }) export class NzWaveDirective implements OnInit, OnDestroy { + @Input() nzWaveExtraNode = false; private waveRenderer: NzWaveRenderer; + private waveDisabled: boolean = false; - @Input() nzWaveExtraNode = false; - - constructor(private ngZone: NgZone, private elementRef: ElementRef) { + constructor(private ngZone: NgZone, + private elementRef: ElementRef, + @Optional() @Inject(NZ_WAVE_GLOBAL_CONFIG) config: NzWaveConfig) { + if (config && typeof config.disabled === 'boolean') { + this.waveDisabled = config.disabled; + } } ngOnDestroy(): void { @@ -20,7 +52,11 @@ export class NzWaveDirective implements OnInit, OnDestroy { } ngOnInit(): void { - if (this.elementRef.nativeElement) { + this.renderWaveIfEnabled(); + } + + renderWaveIfEnabled(): void { + if (!this.waveDisabled && this.elementRef.nativeElement) { this.waveRenderer = new NzWaveRenderer(this.elementRef.nativeElement, this.ngZone, this.nzWaveExtraNode); } }