refactor(module:avatar): refactor avatar (NG-ZORRO#2536)

* fix(module:avatar): fix text style * refactor(module:avatar): refactor avatar ref: NG-ZORRO#2381
hsuanxyz · Nov 30, 2018 · 91fab4d · 91fab4d
1 parent f1dfb9c
commit 91fab4d
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 38 deletions.
diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts
@@ -72,14 +72,14 @@ describe('avatar', () => {
       context.nzText = 'a';
       fixture.detectChanges();
       tick();
-      const scale = +dl.nativeElement.querySelector('.ant-avatar-string').style.transform.replace(/[^\.0-9]/ig, '');
-      expect(scale).toBe(0);
+      const scale = +/(\w+)\(([^)]*)\)/g.exec(dl.nativeElement.querySelector('.ant-avatar-string').style.transform)[2];
+      expect(scale).toBe(1);
     }));
     it('should be autoset font-size', fakeAsync(() => {
       context.nzText = 'LongUsername';
       fixture.detectChanges();
       tick();
-      const scale = +dl.nativeElement.querySelector('.ant-avatar-string').style.transform.replace(/[^\.0-9]/ig, '');
+      const scale = +/(\w+)\(([^)]*)\)/g.exec(dl.nativeElement.querySelector('.ant-avatar-string').style.transform)[2];
       expect(scale).toBeLessThan(1);
     }));
   });

diff --git a/components/avatar/nz-avatar.component.ts b/components/avatar/nz-avatar.component.ts
@@ -1,13 +1,14 @@
 import {
-  Attribute,
   ChangeDetectionStrategy,
   ChangeDetectorRef,
   Component,
   ElementRef,
   Input,
-  OnChanges, Renderer2,
+  OnChanges,
+  Renderer2,
   SimpleChanges,
-  ViewChild
+  ViewChild,
+  ViewEncapsulation
 } from '@angular/core';
 
 import { NzUpdateHostClassService } from '../core/services/update-host-class.service';
@@ -21,21 +22,18 @@ export type NzAvatarSize = NzSizeLDSType | number;
   templateUrl        : './nz-avatar.component.html',
   providers          : [ NzUpdateHostClassService ],
   preserveWhitespaces: false,
-  changeDetection    : ChangeDetectionStrategy.OnPush
+  changeDetection    : ChangeDetectionStrategy.OnPush,
+  encapsulation      : ViewEncapsulation.None
+
 })
 export class NzAvatarComponent implements OnChanges {
 
-  @Input()
-  set nzIcon(value: string) {
-    if (value) {
-      this.oldAPIIcon = value.indexOf('anticon') > -1;
-    }
-    this._icon = value;
-  }
+  @Input() nzShape: NzAvatarShape = 'circle';
+  @Input() nzSize: NzAvatarSize = 'default';
+  @Input() nzText: string;
+  @Input() nzSrc: string;
+  @Input() nzIcon: string;
 
-  get nzIcon(): string {
-    return this._icon;
-  }
   oldAPIIcon = true; // Make the user defined icon compatible to old API. Should be removed in 2.0.
   hasText: boolean = false;
   hasSrc: boolean = true;
@@ -44,24 +42,16 @@ export class NzAvatarComponent implements OnChanges {
 
   @ViewChild('textEl') textEl: ElementRef;
 
-  @Input() nzShape: NzAvatarShape = 'circle';
-
-  @Input() nzSize: NzAvatarSize = 'default';
-
-  @Input() nzText: string;
-
-  @Input() nzSrc: string;
+  private el: HTMLElement = this.elementRef.nativeElement;
+  private prefixCls = 'ant-avatar';
+  private sizeMap = { large: 'lg', small: 'sm' };
 
   constructor(
     private elementRef: ElementRef,
     private cd: ChangeDetectorRef,
     private updateHostClassService: NzUpdateHostClassService,
-    private  renderer: Renderer2) {
+    private renderer: Renderer2) {
   }
-  private el: HTMLElement = this.elementRef.nativeElement;
-  private prefixCls = 'ant-avatar';
-  private sizeMap = { large: 'lg', small: 'sm' };
-  private _icon: string;
 
   setClass(): this {
     const classMap = {
@@ -90,6 +80,9 @@ export class NzAvatarComponent implements OnChanges {
   }
 
   ngOnChanges(changes: SimpleChanges): void {
+    if (changes.hasOwnProperty('nzIcon') && changes.nzIcon.currentValue) {
+      this.oldAPIIcon = changes.nzIcon.currentValue.indexOf('anticon') > -1;
+    }
     this.hasText = !this.nzSrc && !!this.nzText;
     this.hasIcon = !this.nzSrc && !!this.nzIcon;
     this.hasSrc = !!this.nzSrc;
@@ -106,15 +99,13 @@ export class NzAvatarComponent implements OnChanges {
     const childrenWidth = this.textEl.nativeElement.offsetWidth;
     const avatarWidth = this.el.getBoundingClientRect().width;
     const scale = avatarWidth - 8 < childrenWidth ? (avatarWidth - 8) / childrenWidth : 1;
-    if (scale === 1) {
-      this.textStyles = {};
-    } else {
-      this.textStyles = {
-        transform: `scale(${scale})`,
-        position : 'absolute',
-        display  : 'inline-block',
-        left     : `calc(50% - ${Math.round(childrenWidth / 2)}px)`
-      };
+    this.textStyles = {
+      transform: `scale(${scale}) translateX(-50%)`
+    };
+    if (typeof this.nzSize === 'number') {
+      Object.assign(this.textStyles, {
+        lineHeight: `${this.nzSize}px`
+      });
     }
     this.cd.detectChanges();
   }