refactor(module:avatar): refactor and aync Ant Design 4

ref #4634
NG-ZORRO · Mar 2, 2020 · 1c7b679 · 1c7b679
1 parent 374eb84
commit 1c7b679
Show file tree

Hide file tree

Showing 5 changed files with 51 additions and 83 deletions.
diff --git a/components/avatar/nz-avatar.component.ts → components/avatar/avatar.component.ts b/components/avatar/nz-avatar.component.ts → components/avatar/avatar.component.ts
@@ -16,8 +16,6 @@ import {
   Input,
   OnChanges,
   Output,
-  Renderer2,
-  SimpleChanges,
   ViewChild,
   ViewEncapsulation
 } from '@angular/core';
@@ -29,7 +27,18 @@ const NZ_CONFIG_COMPONENT_NAME = 'avatar';
 @Component({
   selector: 'nz-avatar',
   exportAs: 'nzAvatar',
-  templateUrl: './nz-avatar.component.html',
+  template: `
+    <i nz-icon *ngIf="nzIcon && hasIcon" [nzType]="nzIcon"></i>
+    <img *ngIf="nzSrc && hasSrc" [src]="nzSrc" [attr.srcset]="nzSrcSet" [attr.alt]="nzAlt" (error)="imgError($event)" />
+    <span class="ant-avatar-string" #textEl [ngStyle]="textStyles" *ngIf="nzText && hasText">{{ nzText }}</span>
+  `,
+  host: {
+    '[class]': 'classMap',
+    '[style.width]': 'customSize',
+    '[style.height]': 'customSize',
+    '[style.line-height]': 'customSize',
+    '[style.font-size]': '(hasIcon && customSize) ? (nzSize / 2 + "px") : null'
+  },
   providers: [NzUpdateHostClassService],
   preserveWhitespaces: false,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -45,38 +54,34 @@ export class NzAvatarComponent implements OnChanges {
   @Input() nzIcon: string;
   @Output() readonly nzError = new EventEmitter<Event>();
 
-  oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
   hasText: boolean = false;
   hasSrc: boolean = true;
   hasIcon: boolean = false;
   textStyles: {};
+  classMap: {};
+  customSize: string | null = null;
 
   @ViewChild('textEl', { static: false }) textEl: ElementRef;
 
   private el: HTMLElement = this.elementRef.nativeElement;
-  private prefixCls = 'ant-avatar';
 
   constructor(
     public nzConfigService: NzConfigService,
     private elementRef: ElementRef,
-    private cd: ChangeDetectorRef,
-    private updateHostClassService: NzUpdateHostClassService,
-    private renderer: Renderer2,
+    private cdr: ChangeDetectorRef,
     private platform: Platform
   ) {}
 
-  setClass(): this {
-    const classMap = {
-      [this.prefixCls]: true,
-      [`${this.prefixCls}-lg`]: this.nzSize === 'large',
-      [`${this.prefixCls}-sm`]: this.nzSize === 'small',
-      [`${this.prefixCls}-${this.nzShape}`]: this.nzShape,
-      [`${this.prefixCls}-icon`]: this.nzIcon,
-      [`${this.prefixCls}-image`]: this.hasSrc // downgrade after image error
+  setClass(): void {
+    this.classMap = {
+      ['ant-avatar']: true,
+      [`ant-avatar-lg`]: this.nzSize === 'large',
+      [`ant-avatar-sm`]: this.nzSize === 'small',
+      [`ant-avatar-${this.nzShape}`]: this.nzShape,
+      [`ant-avatar-icon`]: this.nzIcon,
+      [`ant-avatar-image`]: this.hasSrc // downgrade after image error
     };
-    this.updateHostClassService.updateHostClass(this.el, classMap);
-    this.cd.detectChanges();
-    return this;
+    this.cdr.detectChanges();
   }
 
   imgError($event: Event): void {
@@ -90,21 +95,20 @@ export class NzAvatarComponent implements OnChanges {
       } else if (this.nzText) {
         this.hasText = true;
       }
-      this.setClass().notifyCalc();
+      this.setClass();
       this.setSizeStyle();
+      this.notifyCalc();
     }
   }
 
-  ngOnChanges(changes: SimpleChanges): void {
-    if (changes.hasOwnProperty('nzIcon') && changes.nzIcon.currentValue) {
-      this.oldAPIIcon = changes.nzIcon.currentValue.indexOf('anticon') > -1;
-    }
+  ngOnChanges(): void {
     this.hasText = !this.nzSrc && !!this.nzText;
     this.hasIcon = !this.nzSrc && !!this.nzIcon;
     this.hasSrc = !!this.nzSrc;
 
-    this.setClass().notifyCalc();
+    this.setClass();
     this.setSizeStyle();
+    this.notifyCalc();
   }
 
   private calcStringSize(): void {
@@ -118,31 +122,29 @@ export class NzAvatarComponent implements OnChanges {
     this.textStyles = {
       transform: `scale(${scale}) translateX(-50%)`
     };
-    if (typeof this.nzSize === 'number') {
+    if (this.customSize) {
       Object.assign(this.textStyles, {
-        lineHeight: `${this.nzSize}px`
+        lineHeight: this.customSize
       });
     }
-    this.cd.detectChanges();
+    this.cdr.detectChanges();
   }
 
-  private notifyCalc(): this {
+  private notifyCalc(): void {
     // If use ngAfterViewChecked, always demands more computations, so......
     if (this.platform.isBrowser) {
       setTimeout(() => {
         this.calcStringSize();
       });
     }
-    return this;
   }
 
   private setSizeStyle(): void {
-    const size = typeof this.nzSize === 'string' ? this.nzSize : `${this.nzSize}px`;
-    this.renderer.setStyle(this.el, 'width', size);
-    this.renderer.setStyle(this.el, 'height', size);
-    this.renderer.setStyle(this.el, 'line-height', size);
-    if (this.hasIcon) {
-      this.renderer.setStyle(this.el, 'font-size', `calc(${size} / 2)`);
+    if (typeof this.nzSize === 'number') {
+      this.customSize = `${this.nzSize}px`;
+    } else {
+      this.customSize = null;
     }
+    this.cdr.markForCheck();
   }
 }
diff --git a/components/avatar/nz-avatar.module.ts → components/avatar/avatar.module.ts b/components/avatar/nz-avatar.module.ts → components/avatar/avatar.module.ts
@@ -10,7 +10,7 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { NzIconModule } from 'ng-zorro-antd/icon';
 
-import { NzAvatarComponent } from './nz-avatar.component';
+import { NzAvatarComponent } from './avatar.component';
 
 @NgModule({
   declarations: [NzAvatarComponent],

diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
@@ -5,8 +5,11 @@ import { createFakeEvent } from 'ng-zorro-antd/core';
 
 import { NzIconTestModule } from 'ng-zorro-antd/icon/testing';
 
-import { NzAvatarComponent } from './nz-avatar.component';
-import { NzAvatarModule } from './nz-avatar.module';
+import { NzAvatarComponent } from './avatar.component';
+import { NzAvatarModule } from './avatar.module';
+
+const imageBase64 =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';
 
 function getType(dl: DebugElement): string {
   const el = dl.nativeElement as HTMLElement;
@@ -49,8 +52,7 @@ describe('avatar', () => {
       fixture.detectChanges();
       expect(getType(dl)).toBe('icon');
       expect(context.comp.hasSrc).toBe(false);
-      context.nzSrc =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';
+      context.nzSrc = imageBase64;
       tick();
       fixture.detectChanges();
       expect(context.comp.hasSrc).toBe(true);
@@ -69,8 +71,7 @@ describe('avatar', () => {
       fixture.detectChanges();
       expect(getType(dl)).toBe('image');
       expect(context.comp.hasSrc).toBe(true);
-      context.nzSrc =
-        'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==';
+      context.nzSrc = imageBase64;
       tick();
       fixture.detectChanges();
       expect(context.comp.hasSrc).toBe(true);
@@ -159,24 +160,7 @@ describe('avatar', () => {
 
       context.nzIcon = 'user';
       fixture.detectChanges();
-      expect(hostStyle.fontSize === `calc(${context.nzSize / 2}px)`).toBe(true);
-    });
-
-    it('should be custom unit size', () => {
-      const size = `8vw`;
-      context.nzSize = size;
-      context.nzIcon = null;
-      context.nzSrc = null;
-      fixture.detectChanges();
-      const hostStyle = dl.nativeElement.querySelector('nz-avatar').style;
-      expect(hostStyle.height === size).toBe(true);
-      expect(hostStyle.width === size).toBe(true);
-      expect(hostStyle.lineHeight === size).toBe(true);
-      expect(hostStyle.fontSize === ``).toBe(true);
-
-      context.nzIcon = 'user';
-      fixture.detectChanges();
-      expect(hostStyle.fontSize === `calc(4vw)`).toBe(true);
+      expect(hostStyle.fontSize === `${context.nzSize / 2}px`).toBe(true);
     });
   });
 
@@ -235,11 +219,9 @@ class TestAvatarComponent {
   @ViewChild('comp', { static: false }) comp: NzAvatarComponent;
   nzShape = 'square';
   nzSize: string | number = 'large';
-  nzIcon: string | null = 'anticon anticon-user';
+  nzIcon: string | null = 'user';
   nzText: string | null = 'A';
-  nzSrc:
-    | string
-    | null = `data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+P+/HgAFhAJ/wlseKgAAAABJRU5ErkJggg==`;
+  nzSrc: string | null = imageBase64;
   nzSrcSet: string;
   nzAlt: string;
 }
diff --git a/components/avatar/nz-avatar.component.html b/components/avatar/nz-avatar.component.html
diff --git a/components/avatar/public-api.ts b/components/avatar/public-api.ts
@@ -6,5 +6,5 @@
  * found in the LICENSE file at https://github.com/NG-ZORRO/ng-zorro-antd/blob/master/LICENSE
  */
 
-export * from './nz-avatar.component';
-export * from './nz-avatar.module';
+export * from './avatar.component';
+export * from './avatar.module';