feat(module:input): fix *fix icon new api capability (#2841)

* feat(module:input): fix *fix icon new api capability * fix(module:icon): fix setting class to undefined * fix: remove test flag * fix(module:icon): remove redundant error handle
NG-ZORRO · Feb 2, 2019 · 3c954cb · 3c954cb
1 parent fa6a8e9
commit 3c954cb
Show file tree

Hide file tree

Showing 7 changed files with 101 additions and 40 deletions.
diff --git a/components/icon/nz-icon.directive.ts b/components/icon/nz-icon.directive.ts
@@ -1,5 +1,4 @@
 import {
-  isDevMode,
   AfterContentChecked,
   Directive,
   ElementRef,
@@ -20,10 +19,24 @@ const getIconTypeClass = (className: string): { name: string, index: number } =>
   } else {
     const classArr = className.split(/\s/);
     const index = classArr.findIndex((cls => cls !== 'anticon' && cls !== 'anticon-spin' && !!cls.match(iconTypeRE)));
-    return index === -1 ? undefined : { name: classArr[index], index };
+    return index === -1 ? undefined : { name: classArr[ index ], index };
   }
 };
 
+const normalizeType = (rawType: string): { type: string, crossError: boolean, verticalError: boolean } => {
+  const ret = { type: rawType, crossError: false, verticalError: false };
+  ret.type = rawType ? rawType.replace('anticon-', '') : '';
+  if (ret.type.includes('verticle')) {
+    ret.type = 'up';
+    ret.verticalError = true;
+  }
+  if (ret.type.startsWith('cross')) {
+    ret.type = 'close';
+    ret.crossError = true;
+  }
+  return ret;
+};
+
 /**
  * This directive extends IconDirective to provide:
  *
@@ -38,42 +51,56 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
   @Input() spin = false;
   @Input() iconfont: string;
 
+  @Input()
+  set type(value: string) {
+    if (value && value.startsWith('anticon')) {
+      const rawClass = getIconTypeClass(value);
+      const type = rawClass ? normalizeType(rawClass.name).type : '';
+      if (type && this.type !== type) {
+        this._type = type;
+      }
+    } else {
+      this._type = value;
+    }
+  }
+
+  get type(): string {
+    return this._type;
+  }
+
   private classNameObserver: MutationObserver;
   private el = this.elementRef.nativeElement;
+  private _type: string;
 
   /**
    * Replacement of `changeIcon` for more modifications.
    * @param oldAPI
    */
   private changeIcon2(oldAPI: boolean = false): void {
-    if (!oldAPI) { this.setClassName(); }
-    this._changeIcon().then(svg => {
-      this.setSVGData(svg);
-      if (!oldAPI) {
-        this.toggleSpin(svg);
-      }
-    }).catch((err) => {
-      if (err) {
-        console.error(err);
-        console.warn('[NG-ZORRO]', `You can find more about this error on http://ng.ant.design/components/icon/en`);
-      }
-    });
+    if (!oldAPI) {
+      this.setClassName();
+    }
+    this._changeIcon()
+      .then(svg => {
+        this.setSVGData(svg);
+        if (!oldAPI && svg) {
+          this.toggleSpin(svg);
+        }
+      });
   }
 
   private classChangeHandler(className: string): void {
     const ret = getIconTypeClass(className);
     if (ret) {
-      let type = ret.name.replace('anticon-', '');
-      if (type.includes('verticle')) {
-        type = 'up';
+      const { type, crossError, verticalError } = normalizeType(ret.name);
+      if (crossError) {
         this.iconService.warnAPI('cross');
       }
-      if (type.startsWith('cross')) {
-        type = type.replace('cross', 'close');
+      if (verticalError) {
         this.iconService.warnAPI('vertical');
       }
       if (this.type !== type) {
-        this.type = type;
+        this._type = type;
         this.changeIcon2(true);
       }
     }
@@ -153,7 +180,7 @@ export class NzIconDirective extends IconDirective implements OnInit, OnChanges,
     let length = children.length;
     if (!this.type && children.length) {
       while (length--) {
-        const child = children[length];
+        const child = children[ length ];
         if (child.tagName.toLowerCase() === 'svg') {
           this.iconService.normalizeSvgElement(child as SVGElement);
         }

diff --git a/components/icon/nz-icon.spec.ts b/components/icon/nz-icon.spec.ts
@@ -2,23 +2,38 @@ import { CommonModule } from '@angular/common';
 import { Component } from '@angular/core';
 import { async, fakeAsync, tick, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
-import { LeftOutline, LoadingOutline, QuestionCircleOutline, QuestionOutline, RightOutline } from '@ant-design/icons-angular/icons';
+import {
+  LeftOutline,
+  LoadingOutline,
+  QuestionCircleOutline,
+  QuestionOutline,
+  RightOutline
+} from '@ant-design/icons-angular/icons';
+
 import { NzIconDirective } from './nz-icon.directive';
 import { NzIconModule } from './nz-icon.module';
 import { NzIconService, NZ_ICON_DEFAULT_TWOTONE_COLOR, NZ_ICONS } from './nz-icon.service';
 
-describe('icon', () => {
+describe('nz icon', () => {
   let testComponent;
   let fixture;
   let icons;
 
   beforeEach(() => {
     TestBed.configureTestingModule({
       imports     : [ CommonModule, NzIconModule ],
-      declarations: [ NzTestIconExtensionsComponent, NzTestIconCustomComponent, NzTestIconIconfontComponent, NzTestIconOldApiComponent ]
+      declarations: [
+        NzTestIconExtensionsComponent,
+        NzTestIconCustomComponent,
+        NzTestIconIconfontComponent,
+        NzTestIconOldApiComponent
+      ]
     }).compileComponents();
   });
 
+  /**
+   * Text features built on `@ant-design/icons-angular`.
+   */
   describe('extensions', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestIconExtensionsComponent);
@@ -66,13 +81,27 @@ describe('icon', () => {
       fixture.detectChanges();
       expect(icons[ 1 ].nativeElement.firstChild.classList.contains('anticon-spin')).toBe(true);
     }));
+
+    it('should type support old API', () => {
+      testComponent.type = 'anticon anticon-cross';
+      fixture.detectChanges();
+      expect(icons[ 0 ].nativeElement.className).toContain('anticon');
+      expect(icons[ 0 ].nativeElement.className).toContain('anticon-close');
+      expect(icons[ 0 ].nativeElement.innerHTML).toContain('svg');
+
+      // An invalid type should not affect the actual type.
+      testComponent.type = 'anticon';
+      fixture.detectChanges();
+      expect(icons[ 0 ].nativeElement.className).toContain('anticon');
+      expect(icons[ 0 ].nativeElement.className).toContain('anticon-close');
+      expect(icons[ 0 ].nativeElement.innerHTML).toContain('svg');
+    });
   });
 
   describe('custom', () => {
     beforeEach(() => {
       fixture = TestBed.createComponent(NzTestIconCustomComponent);
       testComponent = fixture.debugElement.componentInstance;
-
     });
 
     it('should support custom svg element', () => {
@@ -122,7 +151,7 @@ describe('icon', () => {
   });
 });
 
-describe('icon static importing', () => {
+describe('service injection', () => {
   let testComponent;
   let fixture;
   let icons;
@@ -131,7 +160,10 @@ describe('icon static importing', () => {
     TestBed.configureTestingModule({
       imports     : [ CommonModule, NzIconModule ],
       declarations: [ NzTestIconExtensionsComponent ],
-      providers   : [ { provide: NZ_ICONS, useValue: [ LeftOutline, RightOutline ] }, { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '#3344cc' } ]
+      providers   : [ {
+        provide : NZ_ICONS,
+        useValue: [ LeftOutline, RightOutline ]
+      }, { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '#3344cc' } ]
     });
 
     fixture = TestBed.createComponent(NzTestIconExtensionsComponent);
@@ -157,7 +189,10 @@ describe('icon static importing', () => {
     TestBed.configureTestingModule({
       imports     : [ CommonModule, NzIconModule ],
       declarations: [ NzTestIconExtensionsComponent ],
-      providers   : [ { provide: NZ_ICONS, useValue: [ LeftOutline, RightOutline ] }, { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '3344cc' } ]
+      providers   : [ {
+        provide : NZ_ICONS,
+        useValue: [ LeftOutline, RightOutline ]
+      }, { provide: NZ_ICON_DEFAULT_TWOTONE_COLOR, useValue: '3344cc' } ]
     });
 
     fixture = TestBed.createComponent(NzTestIconExtensionsComponent);
@@ -224,7 +259,6 @@ export class NzTestIconIconfontComponent {
   selector: 'nz-test-icon-old-api',
   template: `
     <i class="anticon anticon-question"></i>
-    <!-- Just to improve codecov. Compatibility code would be removed in 2.0.  -->
     <i class="anticon anticon-verticle"></i>
     <i class="anticon anticon-cross"></i>
   `

diff --git a/components/input/demo/addon.ts b/components/input/demo/addon.ts
@@ -28,12 +28,9 @@ import { Component } from '@angular/core';
       </ng-template>
     </div>
     <div style="margin-bottom: 16px;">
-      <nz-input-group [nzAddOnAfter]="addOnAfterIconTemplate">
+      <nz-input-group  [nzAddOnAfterIcon]="'setting'">
         <input type="text" nz-input [(ngModel)]="inputValue">
       </nz-input-group>
-      <ng-template #addOnAfterIconTemplate>
-        <i nz-icon type="setting"></i>
-      </ng-template>
     </div>
   `
 })

diff --git a/components/input/nz-input-group.component.html b/components/input/nz-input-group.component.html
@@ -1,14 +1,14 @@
 <span class="ant-input-wrapper ant-input-group" *ngIf="isAddOn">
   <span class="ant-input-group-addon" *ngIf="nzAddOnBefore || nzAddOnBeforeIcon">
-    <i nz-icon [ngClass]="nzAddOnBeforeIcon" *ngIf="nzAddOnBeforeIcon"></i>
+    <i nz-icon [type]="nzAddOnBeforeIcon" *ngIf="nzAddOnBeforeIcon"></i>
     <ng-container *nzStringTemplateOutlet="nzAddOnBefore">{{ nzAddOnBefore }}</ng-container>
   </span>
   <ng-template [ngIf]="!isAffix" *ngTemplateOutlet="contentTemplate"></ng-template>
   <span class="ant-input-affix-wrapper" [class.ant-input-affix-wrapper-sm]="isSmall" [class.ant-input-affix-wrapper-lg]="isLarge" *ngIf="isAffix">
     <ng-template *ngTemplateOutlet="affixTemplate"></ng-template>
   </span>
   <span class="ant-input-group-addon" *ngIf="nzAddOnAfter || nzAddOnAfterIcon">
-    <i nz-icon [ngClass]="nzAddOnAfterIcon" *ngIf="nzAddOnAfterIcon"></i>
+    <i nz-icon [type]="nzAddOnAfterIcon" *ngIf="nzAddOnAfterIcon"></i>
     <ng-container *nzStringTemplateOutlet="nzAddOnAfter">{{ nzAddOnAfter }}</ng-container>
   </span>
 </span>
@@ -18,12 +18,12 @@
 <ng-template #affixTemplate>
   <span class="ant-input-prefix" *ngIf="nzPrefix || nzPrefixIcon">
     <!-- TODO: should have a class to set its color, cc: antd-->
-    <i nz-icon [ngClass]="nzPrefixIcon" *ngIf="nzPrefixIcon" style="color: rgba(0, 0, 0, 0.25)"></i>
+    <i nz-icon [type]="nzPrefixIcon" *ngIf="nzPrefixIcon" style="color: rgba(0, 0, 0, 0.25)"></i>
     <ng-container *nzStringTemplateOutlet="nzPrefix">{{ nzPrefix }}</ng-container>
   </span>
   <ng-template *ngTemplateOutlet="contentTemplate"></ng-template>
   <span class="ant-input-suffix" *ngIf="nzSuffix || nzSuffixIcon">
-    <i nz-icon [ngClass]="nzSuffixIcon" *ngIf="nzSuffixIcon"></i>
+    <i nz-icon [type]="nzSuffixIcon" *ngIf="nzSuffixIcon"></i>
     <ng-container *nzStringTemplateOutlet="nzSuffix">{{ nzSuffix }}</ng-container>
   </span>
 </ng-template>

diff --git a/components/input/nz-input-group.spec.ts b/components/input/nz-input-group.spec.ts
@@ -2,6 +2,7 @@ import { Component, TemplateRef, ViewChild } from '@angular/core';
 import { async, TestBed } from '@angular/core/testing';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 import { NzInputGroupComponent } from './nz-input-group.component';
 import { NzInputDirective } from './nz-input.directive';
 import { NzInputModule } from './nz-input.module';
@@ -11,7 +12,7 @@ describe('input-group', () => {
   let fixture;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports     : [ NzInputModule, FormsModule, ReactiveFormsModule ],
+      imports     : [ NzInputModule, FormsModule, ReactiveFormsModule, NzIconTestModule ],
       declarations: [ NzTestInputGroupAddonComponent, NzTestInputGroupAffixComponent, NzTestInputGroupMultipleComponent, NzTestInputGroupColComponent, NzTestInputGroupMixComponent ],
       providers   : []
     }).compileComponents();

diff --git a/components/input/nz-input.spec.ts b/components/input/nz-input.spec.ts
@@ -2,6 +2,7 @@ import { Component } from '@angular/core';
 import { async, fakeAsync, flush, TestBed } from '@angular/core/testing';
 import { FormsModule, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { By } from '@angular/platform-browser';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 import { NzInputDirective } from './nz-input.directive';
 import { NzInputModule } from './nz-input.module';
 
@@ -10,7 +11,7 @@ describe('input', () => {
   let fixture;
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      imports     : [ NzInputModule, FormsModule, ReactiveFormsModule ],
+      imports     : [ NzInputModule, FormsModule, ReactiveFormsModule, NzIconTestModule ],
       declarations: [ NzTestInputWithInputComponent, NzTestInputWithTextAreaComponent, NzTestInputFormComponent ],
       providers   : []
     }).compileComponents();

diff --git a/components/table/nz-thead.spec.ts b/components/table/nz-thead.spec.ts
@@ -2,14 +2,15 @@ import { Component } from '@angular/core';
 import { fakeAsync, TestBed } from '@angular/core/testing';
 import { By } from '@angular/platform-browser';
 import { NzMeasureScrollbarService } from '../core/services/nz-measure-scrollbar.service';
+import { NzIconTestModule } from '../icon/nz-icon-test.module';
 import { NzTableComponent } from './nz-table.component';
 import { NzTableModule } from './nz-table.module';
 import { NzTheadComponent } from './nz-thead.component';
 
 describe('nz-thead', () => {
   beforeEach(fakeAsync(() => {
     TestBed.configureTestingModule({
-      imports     : [ NzTableModule ],
+      imports     : [ NzTableModule, NzIconTestModule ],
       declarations: [ NzTheadTestNzTableComponent ],
       providers   : [ NzMeasureScrollbarService ]
     });