feat(module:tag): support icon in tag

close NG-ZORRO#5628 close NG-ZORRO#4581 BREAK CHANGES: '(nzAfterClose)' Output is going to be removed in 9.0.0. Please use '(nzOnClose)' instead.
vthinkxie · Sep 17, 2020 · 1cef1e4 · 1cef1e4
1 parent e01b80a
commit 1cef1e4
Show file tree

Hide file tree

Showing 7 changed files with 94 additions and 72 deletions.
diff --git a/components/icon/icon.directive.ts b/components/icon/icon.directive.ts
@@ -5,6 +5,7 @@
 
 import { AfterContentChecked, Directive, ElementRef, Input, OnChanges, OnInit, Optional, Renderer2, SimpleChanges } from '@angular/core';
 import { IconDirective, ThemeType } from '@ant-design/icons-angular';
+import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
 import { NzIconPatchService, NzIconService } from './icon.service';
@@ -17,6 +18,8 @@ import { NzIconPatchService, NzIconService } from './icon.service';
   }
 })
 export class NzIconDirective extends IconDirective implements OnInit, OnChanges, AfterContentChecked {
+  static ngAcceptInputType_nzSpin: BooleanInput;
+
   cacheClassName: string | null = null;
   @Input()
   @InputBoolean()

diff --git a/components/tag/demo/icon.md b/components/tag/demo/icon.md
@@ -0,0 +1,15 @@
+---
+order: 7
+title:
+  zh-CN: 图标按钮
+  en-US: Icon
+---
+
+## zh-CN
+
+在 tag 组件内嵌入 icon。
+
+
+## en-US
+
+Tag components can contain an icon.
diff --git a/components/tag/demo/icon.ts b/components/tag/demo/icon.ts
@@ -0,0 +1,24 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'nz-demo-tag-icon',
+  template: `
+    <nz-tag nzColor="#55acee">
+      <i nz-icon nzType="twitter"></i>
+      <span>Twitter</span>
+    </nz-tag>
+    <nz-tag nzColor="#cd201f">
+      <i nz-icon nzType="youtube"></i>
+      <span>Youtube</span>
+    </nz-tag>
+    <nz-tag nzColor="#3b5999">
+      <i nz-icon nzType="facebook"></i>
+      <span>Facebook</span>
+    </nz-tag>
+    <nz-tag nzColor="#55acee">
+      <i nz-icon nzType="linkedin"></i>
+      <span>LinkedIn</span>
+    </nz-tag>
+  `
+})
+export class NzDemoTagIconComponent {}
diff --git a/components/tag/demo/module b/components/tag/demo/module
@@ -1,4 +1,5 @@
 import { NzTagModule } from 'ng-zorro-antd/tag';
 import { NzInputModule } from 'ng-zorro-antd/input';
+import { NzIconModule } from 'ng-zorro-antd/icon';
 
-export const moduleList = [ NzTagModule, NzInputModule ];
+export const moduleList = [ NzTagModule, NzInputModule, NzIconModule ];
diff --git a/components/tag/demo/status.ts b/components/tag/demo/status.ts
@@ -3,11 +3,37 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'nz-demo-tag-status',
   template: `
-    <nz-tag nzColor="success">success</nz-tag>
-    <nz-tag nzColor="processing">processing</nz-tag>
-    <nz-tag nzColor="error">error</nz-tag>
-    <nz-tag nzColor="default">default</nz-tag>
-    <nz-tag nzColor="warning">warning</nz-tag>
+    <div>
+      <h4>Without icon</h4>
+      <nz-tag nzColor="success">success</nz-tag>
+      <nz-tag nzColor="processing">processing</nz-tag>
+      <nz-tag nzColor="error">error</nz-tag>
+      <nz-tag nzColor="warning">warning</nz-tag>
+      <nz-tag nzColor="default">default</nz-tag>
+    </div>
+    <div>
+      <h4>With icon</h4>
+      <nz-tag nzColor="success">
+        <i nz-icon nzType="check-circle"></i>
+        <span>success</span>
+      </nz-tag>
+      <nz-tag nzColor="processing">
+        <i nz-icon nzType="sync" nzSpin></i>
+        <span>processing</span>
+      </nz-tag>
+      <nz-tag nzColor="error">
+        <i nz-icon nzType="close-circle"></i>
+        <span>error</span>
+      </nz-tag>
+      <nz-tag nzColor="warning">
+        <i nz-icon nzType="exclamation-circle"></i>
+        <span>warning</span>
+      </nz-tag>
+      <nz-tag nzColor="default">
+        <i nz-icon nzType="clock-circle"></i>
+        <span>default</span>
+      </nz-tag>
+    </div>
   `
 })
 export class NzDemoTagStatusComponent {}
diff --git a/components/tag/tag.component.ts b/components/tag/tag.component.ts
@@ -3,88 +3,54 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-import { AnimationEvent } from '@angular/animations';
 import {
   ChangeDetectionStrategy,
   Component,
   ElementRef,
   EventEmitter,
   Input,
   OnChanges,
-  OnInit,
   Output,
   Renderer2,
+  SimpleChanges,
   ViewEncapsulation
 } from '@angular/core';
-import { fadeMotion } from 'ng-zorro-antd/core/animation';
-import { warnDeprecation } from 'ng-zorro-antd/core/logger';
 import { BooleanInput } from 'ng-zorro-antd/core/types';
 import { InputBoolean } from 'ng-zorro-antd/core/util';
 
 @Component({
   selector: 'nz-tag',
   exportAs: 'nzTag',
   preserveWhitespaces: false,
-  animations: [fadeMotion],
   template: `
     <ng-content></ng-content>
     <i nz-icon nzType="close" class="ant-tag-close-icon" *ngIf="nzMode === 'closeable'" tabindex="-1" (click)="closeTag($event)"></i>
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   host: {
-    '[@fadeMotion]': '',
-    '[@.disabled]': 'nzNoAnimation',
-    '[style.background-color]': 'presetColor ? null : nzColor',
+    '[style.background-color]': `isPresetColor ? '' : nzColor`,
+    '[class]': `isPresetColor ? ('ant-tag-' + nzColor) : ''`,
     '[class.ant-tag]': `true`,
-    '[class.ant-tag-has-color]': `nzColor && !presetColor`,
+    '[class.ant-tag-has-color]': `nzColor && !isPresetColor`,
     '[class.ant-tag-checkable]': `nzMode === 'checkable'`,
     '[class.ant-tag-checkable-checked]': `nzChecked`,
-    '(click)': 'updateCheckedStatus()',
-    '(@fadeMotion.done)': 'afterAnimation($event)'
+    '(click)': 'updateCheckedStatus()'
   }
 })
-export class NzTagComponent implements OnInit, OnChanges {
+export class NzTagComponent implements OnChanges {
   static ngAcceptInputType_nzChecked: BooleanInput;
-  static ngAcceptInputType_nzNoAnimation: BooleanInput;
-
-  presetColor = false;
-  cacheClassName: string | null = null;
+  isPresetColor = false;
   @Input() nzMode: 'default' | 'closeable' | 'checkable' = 'default';
   @Input() nzColor?: string;
   @Input() @InputBoolean() nzChecked = false;
-  @Input() @InputBoolean() nzNoAnimation = false;
-  @Output() readonly nzAfterClose = new EventEmitter<void>();
   @Output() readonly nzOnClose = new EventEmitter<MouseEvent>();
   @Output() readonly nzCheckedChange = new EventEmitter<boolean>();
 
-  private isPresetColor(color?: string): boolean {
-    if (!color) {
-      return false;
-    }
-
-    return (
-      /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(color) ||
-      /^(success|processing|error|default|warning)$/.test(color)
-    );
-  }
-
-  private updateClassMap(): void {
-    this.presetColor = this.isPresetColor(this.nzColor);
-    if (this.cacheClassName) {
-      this.renderer.removeClass(this.elementRef.nativeElement, this.cacheClassName);
-    }
-    if (this.presetColor) {
-      this.cacheClassName = `ant-tag-${this.nzColor}`;
-      this.renderer.addClass(this.elementRef.nativeElement, this.cacheClassName);
-    }
-  }
-
   updateCheckedStatus(): void {
     if (this.nzMode === 'checkable') {
       this.nzChecked = !this.nzChecked;
       this.nzCheckedChange.emit(this.nzChecked);
-      this.updateClassMap();
     }
   }
 
@@ -95,22 +61,18 @@ export class NzTagComponent implements OnInit, OnChanges {
     }
   }
 
-  afterAnimation(e: AnimationEvent): void {
-    if (e.toState === 'void') {
-      this.nzAfterClose.emit();
-      if (this.nzAfterClose.observers.length) {
-        warnDeprecation(`'(nzAfterClose)' Output is going to be removed in 9.0.0. Please use '(nzOnClose)' instead.`);
-      }
-    }
-  }
-
   constructor(private renderer: Renderer2, private elementRef: ElementRef) {}
 
-  ngOnInit(): void {
-    this.updateClassMap();
-  }
-
-  ngOnChanges(): void {
-    this.updateClassMap();
+  ngOnChanges(changes: SimpleChanges): void {
+    const { nzColor } = changes;
+    if (nzColor) {
+      if (!this.nzColor) {
+        this.isPresetColor = false;
+      } else {
+        this.isPresetColor =
+          /^(pink|red|yellow|orange|cyan|green|blue|purple|geekblue|magenta|volcano|gold|lime)(-inverse)?$/.test(this.nzColor) ||
+          /^(success|processing|error|default|warning)$/.test(this.nzColor);
+      }
+    }
   }
 }
diff --git a/components/tag/tag.spec.ts b/components/tag/tag.spec.ts
@@ -53,10 +53,8 @@ describe('tag', () => {
       tag.nativeElement.querySelector('.anticon-close').click();
       fixture.detectChanges();
       expect(testComponent.onClose).toHaveBeenCalledTimes(1);
-      expect(testComponent.afterClose).toHaveBeenCalledTimes(0);
       tick(1000);
       fixture.detectChanges();
-      expect(testComponent.afterClose).toHaveBeenCalledTimes(1);
       expect(fixture.nativeElement.querySelector('nz-tag')).toBeFalsy();
     }));
     it('should color work', () => {
@@ -122,14 +120,7 @@ describe('tag', () => {
 
 @Component({
   template: `
-    <nz-tag
-      [nzMode]="mode"
-      [(nzChecked)]="checked"
-      [nzColor]="color"
-      (nzCheckedChange)="checkedChange($event)"
-      (nzAfterClose)="afterClose()"
-      (nzOnClose)="onClose()"
-    >
+    <nz-tag [nzMode]="mode" [(nzChecked)]="checked" [nzColor]="color" (nzCheckedChange)="checkedChange($event)" (nzOnClose)="onClose()">
       Tag 1
     </nz-tag>
   `