From a7a26e20cc5f971f79d8424d2457fbdf84f02d7c Mon Sep 17 00:00:00 2001 From: jingyilu Date: Tue, 25 May 2021 17:52:03 +0800 Subject: [PATCH] fix(module:badge): enable nzNoAnimation support --- components/badge/badge-sup.component.ts | 2 ++ components/badge/badge.component.ts | 8 ++++++-- components/badge/badge.module.ts | 3 ++- components/badge/badge.spec.ts | 16 ++++++++++++++-- components/style/patch.less | 6 ++++++ 5 files changed, 30 insertions(+), 5 deletions(-) diff --git a/components/badge/badge-sup.component.ts b/components/badge/badge-sup.component.ts index a06a0489238..791a37f0927 100644 --- a/components/badge/badge-sup.component.ts +++ b/components/badge/badge-sup.component.ts @@ -27,6 +27,7 @@ import { NzSafeAny } from 'ng-zorro-antd/core/types'; template: ` ; + @Input() noAnimation = false; maxNumberArray: string[] = []; countArray: number[] = []; count: number = 0; diff --git a/components/badge/badge.component.ts b/components/badge/badge.component.ts index c5da7bd584b..e7ca60c67c3 100644 --- a/components/badge/badge.component.ts +++ b/components/badge/badge.component.ts @@ -9,6 +9,7 @@ import { ChangeDetectorRef, Component, ElementRef, + Host, Input, OnChanges, OnDestroy, @@ -21,6 +22,7 @@ import { } from '@angular/core'; import { zoomBadgeMotion } from 'ng-zorro-antd/core/animation'; import { NzConfigKey, NzConfigService, WithConfig } from 'ng-zorro-antd/core/config'; +import { NzNoAnimationDirective } from 'ng-zorro-antd/core/no-animation'; import { BooleanInput, NzSafeAny } from 'ng-zorro-antd/core/types'; import { InputBoolean } from 'ng-zorro-antd/core/util'; import { Subject } from 'rxjs'; @@ -57,8 +59,9 @@ const NZ_CONFIG_MODULE_NAME: NzConfigKey = 'badge'; [nzStyle]="nzStyle" [nzDot]="nzDot" [nzOverflowCount]="nzOverflowCount" - [disableAnimation]="!!(nzStandalone || nzStatus || nzColor)" + [disableAnimation]="!!(nzStandalone || nzStatus || nzColor || noAnimation?.nzNoAnimation)" [nzCount]="nzCount" + [noAnimation]="!!noAnimation?.nzNoAnimation" > `, @@ -95,7 +98,8 @@ export class NzBadgeComponent implements OnChanges, OnDestroy, OnInit { private renderer: Renderer2, private cdr: ChangeDetectorRef, private elementRef: ElementRef, - @Optional() private directionality: Directionality + @Optional() private directionality: Directionality, + @Host() @Optional() public noAnimation?: NzNoAnimationDirective ) { // TODO: move to host after View Engine deprecation this.elementRef.nativeElement.classList.add('ant-badge'); diff --git a/components/badge/badge.module.ts b/components/badge/badge.module.ts index 52d9050d172..a15f4d92a64 100644 --- a/components/badge/badge.module.ts +++ b/components/badge/badge.module.ts @@ -7,6 +7,7 @@ import { BidiModule } from '@angular/cdk/bidi'; import { ObserversModule } from '@angular/cdk/observers'; import { CommonModule } from '@angular/common'; import { NgModule } from '@angular/core'; +import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NzOutletModule } from 'ng-zorro-antd/core/outlet'; import { NzBadgeSupComponent } from './badge-sup.component'; import { NzBadgeComponent } from './badge.component'; @@ -15,6 +16,6 @@ import { NzRibbonComponent } from './ribbon.component'; @NgModule({ declarations: [NzBadgeComponent, NzBadgeSupComponent, NzRibbonComponent], exports: [NzBadgeComponent, NzRibbonComponent], - imports: [BidiModule, CommonModule, ObserversModule, NzOutletModule] + imports: [BidiModule, CommonModule, ObserversModule, NzOutletModule, NzNoAnimationModule] }) export class NzBadgeModule {} diff --git a/components/badge/badge.spec.ts b/components/badge/badge.spec.ts index 0e600e25d23..6b62118a86f 100644 --- a/components/badge/badge.spec.ts +++ b/components/badge/badge.spec.ts @@ -2,7 +2,8 @@ import { BidiModule, Dir } from '@angular/cdk/bidi'; import { Component, DebugElement, ViewChild } from '@angular/core'; import { ComponentFixture, fakeAsync, TestBed, tick } from '@angular/core/testing'; import { By } from '@angular/platform-browser'; -import { NoopAnimationsModule } from '@angular/platform-browser/animations'; +import { BrowserAnimationsModule } from '@angular/platform-browser/animations'; +import { NzNoAnimationModule } from 'ng-zorro-antd/core/no-animation'; import { NgStyleInterface } from 'ng-zorro-antd/core/types'; import { NzBadgeComponent } from './badge.component'; import { NzBadgeModule } from './badge.module'; @@ -10,7 +11,7 @@ import { NzBadgeModule } from './badge.module'; describe('badge', () => { beforeEach(fakeAsync(() => { TestBed.configureTestingModule({ - imports: [BidiModule, NzBadgeModule, NoopAnimationsModule], + imports: [BidiModule, NzBadgeModule, NzNoAnimationModule, BrowserAnimationsModule], declarations: [NzTestBadgeBasicComponent, NzTestBadgeRtlComponent] }); TestBed.compileComponents(); @@ -125,6 +126,15 @@ describe('badge', () => { expect(badgeElement.nativeElement.querySelector('nz-badge-sup').style.backgroundColor).toBe('rgb(82, 196, 26)'); })); + it('should disable animation for inner elements when `noAnimation` is `true` ', fakeAsync(() => { + testComponent.noAnimation = true; + fixture.detectChanges(); + tick(1000); + expect(badgeElement.nativeElement.classList).toContain('nz-animate-disabled'); + expect(badgeElement.nativeElement.querySelector('nz-badge-sup .ant-scroll-number-only').classList).toContain('nz-animate-disabled'); + fixture.detectChanges(); + })); + it('should status work', () => { testComponent.inner = false; const statusList = ['success', 'processing', 'default', 'error', 'warning']; @@ -170,6 +180,7 @@ describe('badge', () => { [nzText]="text" [nzShowZero]="showZero" [nzOverflowCount]="overflow" + [nzNoAnimation]="noAnimation" [nzStyle]="style" [nzDot]="dot" [nzOffset]="offset" @@ -191,6 +202,7 @@ export class NzTestBadgeBasicComponent { text!: string; title?: string | null; offset?: [number, number]; + noAnimation = true; } @Component({ diff --git a/components/style/patch.less b/components/style/patch.less index 9f10a57d05f..1293802b947 100644 --- a/components/style/patch.less +++ b/components/style/patch.less @@ -84,6 +84,12 @@ } .nz-animate-disabled { + // badge + &.ant-scroll-number-only { + animation: none; + transition: none; + } + // drawer &.ant-drawer { &.ant-drawer-open .ant-drawer-mask {