feat(module: list): renderHeader&renderFooter support String and Temp… (

#313)
NG-ZORRO · Mar 1, 2019 · 546b38d · 546b38d
1 parent 1d53a15
commit 546b38d
Show file tree

Hide file tree

Showing 5 changed files with 40 additions and 12 deletions.
diff --git a/components/calendar/calendar.component.spec.ts b/components/calendar/calendar.component.spec.ts
@@ -248,6 +248,7 @@ describe('CalendarComponent', () => {
     component.state.show = true;
     component.state.showShortcut = true;
     const disableDay = new Date().getDate() + '';
+    component.state.now = new Date();
     fixture.detectChanges();
     calendarEle.nativeElement.querySelectorAll('calendarshortcutpanel .item')[3].click();
     calendarEle.nativeElement.querySelectorAll('calendarshortcutpanel .item')[2].click();

diff --git a/components/list/doc/index.en-US.md b/components/list/doc/index.en-US.md
@@ -19,8 +19,8 @@ A single and continuous block content is vertically arranged to display current
 
 Properties | Descrition | Type | Default
 -----------|------------|------|--------
-| renderHeader       | list heder  | (): void | <span> </span> |
-| renderFooter       | list footer  | (): void | <span> </span> |
+| renderHeader       | list heder  | String/TemplateRef/Function | <span> </span> |
+| renderFooter       | list footer  | String/TemplateRef/Function | <span> </span> |
 
 ### List.Item
 

diff --git a/components/list/doc/index.zh-CN.md b/components/list/doc/index.zh-CN.md
@@ -20,8 +20,8 @@ subtitle: 列表
 
 属性 | 说明 | 类型 | 默认值
 ----|-----|------|------
-| renderHeader       | list heder  | (): void |  无  |
-| renderFooter       | list footer  | (): void |  无  |
+| renderHeader       | list heder  | String/TemplateRef/Function |  无  |
+| renderFooter       | list footer  | String/TemplateRef/Function |  无  |
 
 ### List.Item
 

diff --git a/components/list/list.component.html b/components/list/list.component.html
@@ -1,10 +1,21 @@
-<div *ngIf="renderHeader" class="{{defaultProps.prefixCls}}-header">
-  {{renderHeader()}}
+<div *ngIf="renderHeader && renderHeaderType === 'string'"
+     class="{{defaultProps.prefixCls}}-header"
+     [innerHTML]="renderHeader">
 </div>
+<div *ngIf="renderHeader && renderHeaderType === 'function'"
+     class="{{defaultProps.prefixCls}}-header">{{renderHeader()}}
+</div>
+<ng-template *ngIf="renderHeader && renderHeaderType === 'templateRef'" [ngTemplateOutlet]="renderHeader">
+</ng-template>
 <div class="{{defaultProps.prefixCls}}-body">
   <ng-content></ng-content>
 </div>
-<div *ngIf="renderFooter" class="{{defaultProps.prefixCls}}-footer">
-  {{renderFooter()}}
+<div *ngIf="renderFooter && renderFooterType === 'string'"
+     class="{{defaultProps.prefixCls}}-footer"
+     [innerHTML]="renderFooter">
+</div>
+<div *ngIf="renderFooter && renderFooterType === 'function'"
+     class="{{defaultProps.prefixCls}}-footer">{{renderFooter()}}
 </div>
-
+<ng-template *ngIf="renderFooter && renderFooterType === 'templateRef'" [ngTemplateOutlet]="renderFooter">
+</ng-template>
diff --git a/components/list/list.component.ts b/components/list/list.component.ts
@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation, Input, HostBinding } from '@angular/core';
+import { Component, ViewEncapsulation, Input, HostBinding, TemplateRef } from '@angular/core';
 
 @Component({
   selector: 'List, nzm-list',
@@ -10,6 +10,9 @@ export class List {
     prefixCls: 'am-list'
   };
 
+  renderHeaderType: string = '';
+  renderFooterType: string = '';
+
   private _renderHeader: any = '';
   private _renderFooter: any = '';
   private _className: string = '';
@@ -22,14 +25,27 @@ export class List {
   get renderHeader() {
     return this._renderHeader;
   }
-  set renderHeader(value) {
+  set renderHeader(value: string | Function | TemplateRef<any>) {
+    if (value instanceof TemplateRef) {
+      this.renderHeaderType = 'templateRef';
+    } else {
+      this.renderHeaderType = typeof value;
+    }
+    console.log('this isi rend', this.renderHeaderType);
+
     this._renderHeader = value;
   }
   @Input()
   get renderFooter() {
     return this._renderFooter;
   }
-  set renderFooter(value) {
+  set renderFooter(value: string | Function | TemplateRef<any>) {
+    if (value instanceof TemplateRef) {
+      this.renderFooterType = 'templateRef';
+    } else {
+      this.renderFooterType = typeof value;
+    }
+
     this._renderFooter = value;
   }