From 365a0d23ac9f9826716eb88d978ac8cfa2a6ad9c Mon Sep 17 00:00:00 2001 From: Hsuan Lee Date: Mon, 26 Nov 2018 17:37:04 +0800 Subject: [PATCH] refactor(module:avatar): refactor avatar ref: #2381 --- components/avatar/avatar.spec.ts | 6 ++-- components/avatar/nz-avatar.component.ts | 45 ++++++++++-------------- 2 files changed, 22 insertions(+), 29 deletions(-) diff --git a/components/avatar/avatar.spec.ts b/components/avatar/avatar.spec.ts index eddafb2b3f4..c34626c47c9 100644 --- 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 index da66df65c74..a8696178627 100644 --- 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;