default props from react

NG-ZORRO · Jul 19, 2018 · d43346e · d43346e
1 parent 0722a76
commit d43346e
Show file tree

Hide file tree

Showing 9 changed files with 143 additions and 100 deletions.
diff --git a/components/skeleton/css-unit.pipe.ts b/components/skeleton/css-unit.pipe.ts
diff --git a/components/skeleton/demo/basic.ts b/components/skeleton/demo/basic.ts
@@ -29,7 +29,7 @@ import { Component, OnInit } from '@angular/core';
 })
 export class NzDemoSkeletonBasicComponent implements OnInit {
   listData = [];
-  loading = false;
+  loading = true;
 
   ngOnInit(): void {
     for (let i = 0; i < 9; i++) {

diff --git a/components/skeleton/demo/card.ts b/components/skeleton/demo/card.ts
@@ -26,5 +26,5 @@ import { Component } from '@angular/core';
   `
 })
 export class NzDemoSkeletonCardComponent {
-  loading = false;
+  loading = true;
 }
diff --git a/components/skeleton/doc/index.en-US.md b/components/skeleton/doc/index.en-US.md
@@ -5,13 +5,12 @@ title: Skeleton
 cols: 1
 ---
 
-Let user to have the anticipation for waiting,
-which helps to make the loading process more smooth.
+Let user to have the anticipation for waiting, which helps to make the loading process more smooth.
 
 ## When To Use
 
 - When resource need long time loading, like low network speed.
-- The component contains much information. Such as List or Card.
+- The component contains much information, such as List or Card.
 
 
 ## API

diff --git a/components/skeleton/nz-skeleton.component.html b/components/skeleton/nz-skeleton.component.html
@@ -1,14 +1,14 @@
 <ng-container *ngIf="nzLoading">
   <div class="ant-skeleton-header">
-    <span *ngIf="nzAvatar" 
+    <span *ngIf="!!nzAvatar" 
       class="ant-skeleton-avatar" 
       [ngClass]="avartarClassMap">
     </span>
   </div>
   <div class="ant-skeleton-content">
-    <h3 *ngIf="nzTitle" class="ant-skeleton-title" [style.width]="nzTitle.width"></h3>
-    <ul *ngIf="nzParagraph" class="ant-skeleton-paragraph">
-      <li *ngFor="let row of _rowsList;let i=index" [style.width]="(_widthList[i]||'100%') | toCssUnit">
+    <h3 *ngIf="!!nzTitle" class="ant-skeleton-title" [style.width]="toCSSUnit(_title.width)"></h3>
+    <ul *ngIf="!!nzParagraph" class="ant-skeleton-paragraph">
+      <li *ngFor="let row of getRowsList(_paragraph.rows);let i=index" [style.width]="toCSSUnit(_widthList[i])">
       </li>
     </ul>
   </div>

diff --git a/components/skeleton/nz-skeleton.component.ts b/components/skeleton/nz-skeleton.component.ts
@@ -1,5 +1,5 @@
-import { Component, Input } from '@angular/core';
-import { NzSkeletonAvatar, NzSkeletonParagraph, NzSkeletonTitle, ParagraphWidth } from './nz-skeleton.type';
+import { Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
+import { NzSkeletonAvatar, NzSkeletonParagraph, NzSkeletonTitle } from './nz-skeleton.type';
 
 @Component({
   selector: 'nz-skeleton',
@@ -8,87 +8,118 @@ import { NzSkeletonAvatar, NzSkeletonParagraph, NzSkeletonTitle, ParagraphWidth
     '[class.ant-skeleton]': 'true'
   }
 })
-export class NzSkeletonComponent {
+export class NzSkeletonComponent implements OnInit, OnChanges {
   avartarClassMap;
-  private _title: NzSkeletonTitle | boolean = true;
-  private _avatar: NzSkeletonAvatar | boolean = false;
-  private _paragraph: NzSkeletonParagraph | boolean = true;
-  private _rowsList: number[] = Array(2);
+  private _title: NzSkeletonTitle = {};
+  private _avatar: NzSkeletonAvatar = {};
+  private _paragraph: NzSkeletonParagraph = {};
   private _widthList: Array<number | string> = [];
   private prefixCls = 'ant-skeleton';
 
   @Input() nzLoading = true;
+  @Input() nzTitle: NzSkeletonTitle | boolean = true;
+  @Input() nzAvatar: NzSkeletonAvatar | boolean = false;
+  @Input() nzParagraph: NzSkeletonParagraph | boolean = true;
 
-  @Input()
-  set nzTitle(value: NzSkeletonTitle | boolean) {
-    if (typeof value === 'undefined') {
-      return;
+  getTitleBasicProps(hasAvatar: boolean, hasParagraph: boolean): NzSkeletonTitle {
+    if (!hasAvatar && hasParagraph) {
+      return { width: '40%' };
     }
-    this._title = {
-      width: this.setTitleWidth((value as NzSkeletonTitle).width)
-    };
-  }
-
-  get nzTitle(): NzSkeletonTitle | boolean {
-    return this._title;
-  }
-
-  @Input()
-  set nzAvatar(value: NzSkeletonAvatar | boolean) {
-    if (typeof value === 'undefined') {
-      return;
+    if (hasAvatar && hasParagraph) {
+      return { width: '50%' };
     }
-    this._avatar = value;
-    this.setAvatarClassMap();
+    return { width: '100%' };
   }
 
-  get nzAvatar(): NzSkeletonAvatar | boolean {
-    return this._avatar;
+  getAvatarBasicProps(hasTitle: boolean, hasParagraph: boolean): NzSkeletonAvatar {
+    if (hasTitle && !hasParagraph) {
+      return { shape: 'square' };
+    }
+    return { shape: 'circle' };
   }
 
-  @Input()
-  set nzParagraph(value: NzSkeletonParagraph | boolean) {
-    if (typeof value === 'undefined') {
-      return;
+  getParagraphBasicProps(hasAvatar: boolean, hasTitle: boolean): NzSkeletonParagraph {
+    const basicProps: NzSkeletonParagraph = {};
+    // Width
+    if (hasAvatar && hasTitle) {
+      basicProps.width = '100%';
+    } else {
+      basicProps.width = '60%';
+    }
+    // Rows
+    if (!hasAvatar && hasTitle) {
+      basicProps.rows = 3;
+    } else {
+      basicProps.rows = 2;
     }
-    this._rowsList = this.setParagraphRows((value as NzSkeletonParagraph).rows);
-    this._widthList = this.setParagraphWidth((value as NzSkeletonParagraph).width);
-    this._paragraph = value;
+    return basicProps;
   }
 
-  get nzParagraph(): NzSkeletonParagraph | boolean {
-    return this._paragraph;
+  getProps<T>(prop: T | boolean | undefined): T | {}  {
+    if (prop && typeof prop === 'object') {
+      return prop;
+    }
+    return {};
   }
 
-  setTitleWidth(value: number | string = '100%'): number | string  {
+  toCSSUnit(value: number | string = ''): number | string  {
     if (typeof value === 'number') {
       return `${value}px`;
     } else if (typeof value === 'string') {
       return value;
     }
   }
 
-  setParagraphRows(value: number = 2): number[] {
-    return Array(value);
+  getRowsList(value: number): number[] {
+    return [...Array(value)];
   }
 
-  setParagraphWidth(value: ParagraphWidth = '100%'): Array<number | string> {
+  getWidthList(): Array<number | string> {
+    const { width, rows } = this._paragraph;
     let widthList = [];
-    if (value && Array.isArray(value)) {
-      widthList = value;
-    } else if (value && !Array.isArray(value)) {
+    if (width && Array.isArray(width)) {
+      widthList = width;
+    } else if (width && !Array.isArray(width)) {
       widthList = [];
-      widthList[this._rowsList.length - 1] = value;
+      widthList[rows - 1] = width;
     }
     return widthList;
   }
 
-  setAvatarClassMap(): void {
+  updateClassMap(): void {
     this.avartarClassMap = {
-      [ `${this.prefixCls}-avatar-lg` ]     : (this.nzAvatar as NzSkeletonAvatar).size === 'large',
-      [ `${this.prefixCls}-avatar-sm ` ]    : (this.nzAvatar as NzSkeletonAvatar).size === 'small',
-      [ `${this.prefixCls}-avatar-circle` ] : (this.nzAvatar as NzSkeletonAvatar).shape === 'circle',
-      [ `${this.prefixCls}-avatar-square ` ]: (this.nzAvatar as NzSkeletonAvatar).shape === 'square'
+      [ `${this.prefixCls}-avatar-lg` ]     : this._avatar.size === 'large',
+      [ `${this.prefixCls}-avatar-sm ` ]    : this._avatar.size === 'small',
+      [ `${this.prefixCls}-avatar-circle` ] : this._avatar.shape === 'circle',
+      [ `${this.prefixCls}-avatar-square ` ]: this._avatar.shape === 'square'
+    };
+  }
+
+  updateProps(): void {
+    this._title = {
+      ...this.getTitleBasicProps(!!this.nzAvatar, !!this.nzParagraph),
+      ...this.getProps(this.nzTitle)
+    };
+    this._avatar = {
+      ...this.getAvatarBasicProps(!!this.nzTitle, !!this.nzParagraph),
+      ...this.getProps(this.nzAvatar)
+    };
+    this._paragraph = {
+      ...this.getParagraphBasicProps(!!this.nzAvatar, !!this.nzTitle),
+      ...this.getProps(this.nzParagraph)
     };
+    this._widthList = this.getWidthList();
+  }
+
+  ngOnInit(): void {
+    this.updateProps();
+    this.updateClassMap();
+  }
+
+  ngOnChanges(changes: SimpleChanges): void {
+    if (changes.nzTitle || changes.nzAvatar || changes.nzParagraph) {
+      this.updateProps();
+      this.updateClassMap();
+    }
   }
 }
diff --git a/components/skeleton/nz-skeleton.module.ts b/components/skeleton/nz-skeleton.module.ts
@@ -1,10 +1,9 @@
 import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
-import { CssUnitPipe } from './css-unit.pipe';
 import { NzSkeletonComponent } from './nz-skeleton.component';
 
 @NgModule({
-    declarations: [ NzSkeletonComponent, CssUnitPipe ],
+    declarations: [ NzSkeletonComponent ],
     imports: [ CommonModule ],
     exports: [ NzSkeletonComponent ]
 })

diff --git a/components/skeleton/nz-skeleton.spec.ts b/components/skeleton/nz-skeleton.spec.ts
@@ -19,31 +19,53 @@ describe('skeleton', () => {
   });
 
   describe('#nzTitle', () => {
-    it('width', () => {
+    it('should basic width prop work', () => {
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title')).toBeFalsy();
       testComp.nzTitle = true;
+      testComp.nzAvatar = false;
+      testComp.nzParagraph = true;
+      fixture.detectChanges();
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('40%');
+      testComp.nzAvatar = true;
+      fixture.detectChanges();
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('50%');
+      testComp.nzParagraph = false;
       fixture.detectChanges();
-      const titleEl = dl.nativeElement.querySelector('.ant-skeleton-title');
-      expect(titleEl).toBeTruthy();
-      expect(titleEl.style.width).toBe('100%');
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('100%');
+    });
+    it('should customize width props work', () => {
+      testComp.nzTitle = true;
+      fixture.detectChanges();
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('100%');
       testComp.nzTitle = { width: '50%' };
       fixture.detectChanges();
-      expect(titleEl.style.width).toBe('50%');
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('50%');
       testComp.nzTitle = { width: 200 };
       fixture.detectChanges();
-      expect(titleEl.style.width).toBe('200px');
+      expect(dl.nativeElement.querySelector('.ant-skeleton-title').style.width).toBe('200px');
     });
   });
 
   describe('#nzAvatar', () => {
+    it('should basic avartar props work', () => {
+      testComp.nzTitle = true;
+      testComp.nzAvatar = true;
+      testComp.nzParagraph = false;
+      fixture.detectChanges();
+      expect(dl.nativeElement.querySelector('.ant-skeleton-avatar-square')).toBeTruthy();
+      testComp.nzParagraph = true;
+      fixture.detectChanges();
+      expect(dl.nativeElement.querySelector('.ant-skeleton-avatar-circle')).toBeTruthy();
+    });
     for (const type of ['square', 'circle']) {
-      it(`shape ${type}`, () => {
+      it(`should customize shape ${type} work`, () => {
         testComp.nzAvatar = { shape: type };
         fixture.detectChanges();
         expect(dl.query(By.css(`.ant-skeleton-avatar-${type}`)) !== null).toBe(true);
       });
     }
     for (const type of [{ size: 'large', cls: 'lg' }, { size: 'small', cls: 'sm' }]) {
-      it(`size ${type.size}`, () => {
+      it(`should customize size ${type.size} work`, () => {
         testComp.nzAvatar = { size: type.size };
         fixture.detectChanges();
         expect(dl.query(By.css(`.ant-skeleton-avatar-${type.cls}`)) !== null).toBe(true);
@@ -52,40 +74,47 @@ describe('skeleton', () => {
   });
 
   describe('#nzParagraph', () => {
-    it('rows', () => {
+    it('should basic rows and width work', () => {
+      testComp.nzTitle = true;
+      testComp.nzAvatar = true;
       testComp.nzParagraph = true;
       fixture.detectChanges();
-      const el = dl.nativeElement.querySelector('.ant-skeleton-paragraph');
-      expect(el).toBeTruthy();
-      testComp.nzParagraph = { rows: 5 };
+      let paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
+      expect(paragraphs.length).toBe(2);
+      expect(paragraphs[0].style.width).toBe('');
+      expect(paragraphs[1].style.width).toBe('100%');
+      testComp.nzAvatar = false;
       fixture.detectChanges();
-      expect(dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li').length).toBe(5);
+      paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
+      expect(paragraphs.length).toBe(3);
+      expect(paragraphs[1].style.width).toBe('');
+      expect(paragraphs[2].style.width).toBe('60%');
     });
-    it('width type is not array', () => {
+    it('should width type is string or number work', () => {
       testComp.nzParagraph = { width: 100 };
       fixture.detectChanges();
       let paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
-      expect(paragraphs[0].style.width).toBe('100%');
+      expect(paragraphs[0].style.width).toBe('');
       expect(paragraphs[1].style.width).toBe('100px');
       expect(paragraphs[2]).toBeFalsy();
       testComp.nzParagraph = { width: 100, rows: 3 };
       fixture.detectChanges();
       paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
-      expect(paragraphs[1].style.width).toBe('100%');
+      expect(paragraphs[1].style.width).toBe('');
       expect(paragraphs[2].style.width).toBe('100px');
     });
-    it('width type is array', () => {
-      let paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
+    it('should define width type is Array work', () => {
       testComp.nzParagraph = { width: [200, '100px', '90%'] };
       fixture.detectChanges();
+      let paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
       expect(paragraphs[0].style.width).toBe('200px');
       expect(paragraphs[1].style.width).toBe('100px');
       expect(paragraphs[2]).toBeFalsy();
       testComp.nzParagraph = { width: [200, '100px', '90%'], rows: 4 };
       fixture.detectChanges();
       paragraphs = dl.nativeElement.querySelectorAll('.ant-skeleton-paragraph > li');
       expect(paragraphs[2].style.width).toBe('90%');
-      expect(paragraphs[3].style.width).toBe('100%');
+      expect(paragraphs[3].style.width).toBe('');
     });
   });
 });

diff --git a/components/skeleton/nz-skeleton.type.ts b/components/skeleton/nz-skeleton.type.ts
@@ -5,15 +5,15 @@ export type AvatarShape = 'square' | 'circle';
 export type AvatarSize = 'small' | 'large' | 'default';
 
 export interface NzSkeletonAvatar {
-  size: AvatarSize;
-  shape: AvatarShape;
+  size?: AvatarSize;
+  shape?: AvatarShape;
 }
 
 export interface NzSkeletonTitle {
-  width: number | string;
+  width?: number | string;
 }
 
 export interface NzSkeletonParagraph {
-  rows: number;
-  width: ParagraphWidth;
+  rows?: number;
+  width?: ParagraphWidth;
 }