perf(module:popconfirm): support templateRef and update related docs

NG-ZORRO · Nov 16, 2018 · a8d478a · a8d478a
1 parent f48ce52
commit a8d478a
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 22 deletions.
diff --git a/components/popconfirm/demo/custom-icon.ts b/components/popconfirm/demo/custom-icon.ts
@@ -4,7 +4,10 @@ import { NzMessageService } from 'ng-zorro-antd';
 @Component({
   selector: 'nz-demo-popconfirm-custom-icon',
   template: `
-    <a nz-popconfirm nzTitle="A smile!" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()" nzIcon="smile" nzIconColor="#40a9ff">Custom Icon</a>
+    <a nz-popconfirm nzTitle="A smile!" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()" [nzIcon]="customIcon">Custom Icon</a>
+    <ng-template #customIcon>
+      <i nz-icon type="smile" style="color: #40a9ff;" theme="outline"></i>
+    </ng-template>
   `
 })
 export class NzDemoPopconfirmCustomIconComponent {

diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md
@@ -25,6 +25,7 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 | `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | boolean | false |
 | `(nzOnCancel)` | callback of cancel | `EventEmitter<void>` | - |
 | `(nzOnConfirm)` | callback of confirmation | `EventEmitter<void>` | - |
+| `[nzIcon]` | custom icon | `TemplateRef<void>` | `<i nz-icon type="exclamation-circle" theme="fill"></i>` |
 
 Consult [Tooltip's documentation](/components/tooltip/en#api) to find more APIs.
 

diff --git a/components/popconfirm/doc/index.zh-CN.md b/components/popconfirm/doc/index.zh-CN.md
@@ -26,6 +26,7 @@ title: Popconfirm
 | `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | boolean | false |
 | `(nzOnCancel)` | 点击取消的回调 | `EventEmitter<void>` | 无 |
 | `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter<void>` | 无 |
+| `[nzIcon]` | 自定义图标 | `TemplateRef<void>` | `<i nz-icon type="exclamation-circle" theme="fill"></i>` |
 
 更多属性请参考 [Tooltip](/components/tooltip/zh#api)。
 

diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html
@@ -18,8 +18,10 @@
           <div class="ant-popover-inner-content">
             <div class="ant-popover-message">
               <ng-container *ngIf="isTitleString; else titleTemplate">
-                <i nz-icon *ngIf="nzIcon" [style.color]="nzIconColor" class="button-success" [type]="nzIcon" theme="fill"></i>
-                <i nz-icon *ngIf="!nzIcon" [style.color]="nzIconColor" type="exclamation-circle" theme="fill"></i>
+                <ng-container *ngIf="nzIcon">
+                  <ng-template [ngTemplateOutlet]="nzIcon"></ng-template>
+                </ng-container>
+                <i nz-icon *ngIf="!nzIcon" type="exclamation-circle" theme="fill"></i>
                 <div class="ant-popover-message-title">{{ nzTitle }}</div>
               </ng-container>
               <ng-template #titleTemplate>

diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
@@ -3,7 +3,8 @@ import {
   Component,
   EventEmitter,
   Input,
-  Output
+  Output,
+  TemplateRef
 } from '@angular/core';
 import { fadeAnimation } from '../core/animation/fade-animations';
 import { toBoolean } from '../core/util/convert';
@@ -31,8 +32,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
   @Input() nzOkText: string;
   @Input() nzOkType: string = 'primary';
   @Input() nzCancelText: string;
-  @Input() nzIcon: string;
-  @Input() nzIconColor: string;
+  @Input() nzIcon: TemplateRef<void>;
 
   @Input()
   set nzCondition(value: boolean) {

diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
@@ -10,6 +10,7 @@ import {
   Optional,
   Output,
   Renderer2,
+  TemplateRef,
   ViewContainerRef
 } from '@angular/core';
 
@@ -31,7 +32,7 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
   _okText: string;
   _okType: string = 'primary';
   _cancelText: string;
-  _icon: string;
+  _icon: TemplateRef<void>;
   _iconColor: string;
 
   @Output() nzOnCancel: EventEmitter<void> = new EventEmitter();
@@ -78,25 +79,14 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
   }
 
   @Input()
-  set nzIcon(value: string) {
+  set nzIcon(value: TemplateRef<void>) {
     this._icon = value;
-    this.updateCompValue('nzIcon', value);
   }
 
-  get nzIcon(): string {
+  get nzIcon(): TemplateRef<void> {
     return this._icon;
   }
 
-  @Input()
-  set nzIconColor(value: string) {
-    this._iconColor = value;
-    this.updateCompValue('nzIcon', value);
-  }
-
-  get nzIconColor(): string {
-    return this._iconColor;
-  }
-
   constructor(
     elementRef: ElementRef,
     hostView: ViewContainerRef,
@@ -127,8 +117,7 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit,
         'nzOkType',
         'nzCancelText',
         'nzCondition',
-        'nzIcon',
-        'nzIconColor' ];
+        'nzIcon' ];
       properties.forEach(property => this.updateCompValue(property, this[ property ]));
       this.tooltip.nzVisibleChange.pipe(takeUntil(this.subclassUnsubscribe$), distinctUntilChanged()).subscribe(data => {
         this._visible = data;