feat(module:popconfirm): support custom icon

close NG-ZORRO#2196
wzhudev · Feb 24, 2019 · a88e910 · a88e910
1 parent dfcccad
commit a88e910
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 16 deletions.
diff --git a/components/popconfirm/demo/custom-icon.md b/components/popconfirm/demo/custom-icon.md
@@ -0,0 +1,14 @@
+---
+order: 4
+title:
+  zh-CN: 自定义 icon 图标
+  en-US: Customize icon
+---
+
+## zh-CN
+
+使用 `nzIcon` 自定义提示图标。
+
+## en-US
+
+Set `nzIcon` to customize the icon.
diff --git a/components/popconfirm/demo/custom-icon.ts b/components/popconfirm/demo/custom-icon.ts
@@ -0,0 +1,15 @@
+import { Component } from '@angular/core';
+import { NzMessageService } from 'ng-zorro-antd';
+
+@Component({
+  selector: 'nz-demo-popconfirm-custom-icon',
+  template: `
+    <a nz-popconfirm nzTitle="Are you sure?" [nzIcon]="iconTpl">Delete</a>
+    <ng-template #iconTpl>
+      <i nz-icon nzType="question-circle-o" style="color: red;"></i>
+    </ng-template>
+  `
+})
+
+export class NzDemoPopconfirmCustomIconComponent {
+}
diff --git a/components/popconfirm/doc/index.en-US.md b/components/popconfirm/doc/index.en-US.md
@@ -18,13 +18,14 @@ The difference with the `confirm` modal dialog is that it's more lightweight tha
 
 | Param | Description | Type | Default value |
 | ----- | ----------- | ---- | ------------- |
-| `[nzCancelText]` | text of the Cancel button | `string` | `'Cancel'` |
-| `[nzOkText]` | text of the Confirm button | `string` | `'Confirm'` |
+| `[nzCancelText]` | Text of the Cancel button | `string` | `'Cancel'` |
+| `[nzOkText]` | Text of the Confirm button | `string` | `'Confirm'` |
 | `[nzOkType]` | Button `type` of the Confirm button | `'primary'｜'ghost'｜'dashed'｜'danger'｜'default'` | `'primary'` |
-| `[nzTitle]` | title of the confirmation box | `string｜TemplateRef<void>` | - |
+| `[nzTitle]` | Title of the confirmation box | `string｜TemplateRef<void>` | - |
 | `[nzCondition]` | Whether to directly emit `onConfirm` without showing Popconfirm | `boolean` | `false` |
-| `(nzOnCancel)` | callback of cancel | `EventEmitter<void>` | - |
-| `(nzOnConfirm)` | callback of confirmation | `EventEmitter<void>` | - |
+| `[nzIcon]` | Customize icon of confirmation  | `string｜TemplateRef<void>` | - |
+| `(nzOnCancel)` | Callback of cancel | `EventEmitter<void>` | - |
+| `(nzOnConfirm)` | Callback of confirmation | `EventEmitter<void>` | - |
 
 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
@@ -24,6 +24,7 @@ title: Popconfirm
 | `[nzOkType]` | 确认按钮类型 | `'primary'｜'ghost'｜'dashed'｜'danger'｜'default'` | `'primary'` |
 | `[nzTitle]` | 确认框的描述 | `string｜TemplateRef<void>` | - |
 | `[nzCondition]` | 是否直接触发 `nzOnConfirm` 而不弹出框 | `boolean` | `false` |
+| `[nzIcon]` | 自定义弹出框的 icon  | `string｜TemplateRef<void>` | - |
 | `(nzOnCancel)` | 点击取消的回调 | `EventEmitter<void>` | - |
 | `(nzOnConfirm)` | 点击确认的回调 | `EventEmitter<void>` | - |
 

diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html
@@ -22,7 +22,9 @@
           <div class="ant-popover-inner-content">
             <div class="ant-popover-message">
               <ng-container *nzStringTemplateOutlet="nzTitle">
-                <i nz-icon type="exclamation-circle" theme="fill"></i>
+                <ng-container *nzStringTemplateOutlet="nzIcon">
+                  <i nz-icon [nzType]="nzIcon || 'exclamation-circle'" nzTheme="fill"></i>
+                </ng-container>
                 <div class="ant-popover-message-title">{{ nzTitle }}</div>
               </ng-container>
             </div>

diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
@@ -1,4 +1,13 @@
-import { ChangeDetectionStrategy, ChangeDetectorRef, Component, EventEmitter, Input, Output, ViewEncapsulation } from '@angular/core';
+import {
+  ChangeDetectionStrategy,
+  ChangeDetectorRef,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+  TemplateRef,
+  ViewEncapsulation
+} from '@angular/core';
 import { zoomBigMotion } from '../core/animation/zoom';
 import { InputBoolean } from '../core/util/convert';
 import { NzToolTipComponent } from '../tooltip/nz-tooltip.component';
@@ -25,6 +34,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
   @Input() nzOkType: string = 'primary';
   @Input() nzCancelText: string;
   @Input() @InputBoolean() nzCondition = false;
+  @Input() nzIcon: string | TemplateRef<void>;
 
   @Output() readonly nzOnCancel: EventEmitter<void> = new EventEmitter();
   @Output() readonly nzOnConfirm: EventEmitter<void> = new EventEmitter();

diff --git a/components/popconfirm/nz-popconfirm.directive.ts b/components/popconfirm/nz-popconfirm.directive.ts
@@ -8,7 +8,7 @@ import {
   OnInit,
   Optional,
   Output,
-  Renderer2,
+  Renderer2, TemplateRef,
   ViewContainerRef
 } from '@angular/core';
 
@@ -40,12 +40,14 @@ export class NzPopconfirmDirective extends NzTooltipDirective implements OnInit
     'nzOkText',
     'nzOkType',
     'nzCancelText',
-    'nzCondition'
+    'nzCondition',
+    'nzIcon'
   ];
 
   @Input() nzOkText: string;
   @Input() nzOkType: string;
   @Input() nzCancelText: string;
+  @Input() nzIcon: string | TemplateRef<void>;
   @Input() @InputBoolean() nzCondition: boolean;
   @Output() readonly nzOnCancel = new EventEmitter<void>();
   @Output() readonly nzOnConfirm = new EventEmitter<void>();

diff --git a/components/popconfirm/nz-popconfirm.module.ts b/components/popconfirm/nz-popconfirm.module.ts
@@ -14,7 +14,15 @@ import { NzPopconfirmDirective } from './nz-popconfirm.directive';
 @NgModule({
   declarations   : [ NzPopconfirmComponent, NzPopconfirmDirective ],
   exports        : [ NzPopconfirmComponent, NzPopconfirmDirective ],
-  imports        : [ CommonModule, NzButtonModule, OverlayModule, NzI18nModule, NzIconModule, NzAddOnModule, NzOverlayModule ],
+  imports        : [
+    CommonModule,
+    NzButtonModule,
+    OverlayModule,
+    NzI18nModule,
+    NzIconModule,
+    NzAddOnModule,
+    NzOverlayModule
+  ],
   entryComponents: [ NzPopconfirmComponent ]
 })
 

diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts
@@ -245,18 +245,50 @@ describe('NzPopconfirm', () => {
       const triggerElement = component.inBtnGroup.nativeElement;
       expect(triggerElement.nextSibling.tagName).toBe('BUTTON');
     }));
+    it('should support custom icon', fakeAsync(() => {
+      component.icon = 'question-circle';
+      const triggerElement = component.iconTemplate.nativeElement;
+      dispatchMouseEvent(triggerElement, 'click');
+      fixture.detectChanges();
+      tick(500);
+      fixture.detectChanges();
+      expect(overlayContainerElement.querySelector('.anticon-exclamation-circle')).toBeFalsy();
+      expect(overlayContainerElement.querySelector('.anticon-question-circle')).toBeTruthy();
+    }));
   });
 });
 
 @Component({
   selector: 'nz-popconfirm-test-new',
   template: `
-    <a nz-popconfirm #stringTemplate nzTitle="title-string" nzOkText="ok-text" nzCancelText="cancel-text" nzOkType="default" [nzCondition]="condition" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">Delete</a>
-    <a nz-popconfirm #templateTemplate [nzTitle]="titleTemplate" (nzOnConfirm)="confirm()" (nzOnCancel)="cancel()">Delete</a>
+    <a nz-popconfirm
+       #stringTemplate
+       nzTitle="title-string"
+       nzOkText="ok-text"
+       nzCancelText="cancel-text"
+       nzOkType="default"
+       [nzCondition]="condition"
+       (nzOnConfirm)="confirm()"
+       (nzOnCancel)="cancel()">
+      Delete
+    </a>
+    <a nz-popconfirm
+       #templateTemplate
+       [nzIcon]="icon"
+       [nzTitle]="titleTemplate"
+       (nzOnConfirm)="confirm()"
+       (nzOnCancel)="cancel()">
+      Delete
+    </a>
+    <a nz-popconfirm
+       #iconTemplate
+       [nzIcon]="icon">
+      Delete
+    </a>
     <ng-template #titleTemplate>title-template</ng-template>
     <div>
       <button>A</button>
-      <button #inBtnGroup nz-popconfirm nzTitle="title-string" >B</button>
+      <button #inBtnGroup nz-popconfirm nzTitle="title-string">B</button>
       <button>C</button>
     </div>
   `
@@ -265,17 +297,19 @@ export class NzpopconfirmTestNewComponent {
   confirm = jasmine.createSpy('confirm');
   cancel = jasmine.createSpy('cancel');
   condition = false;
+  icon: string = undefined;
   @ViewChild('stringTemplate') stringTemplate: ElementRef;
   @ViewChild('templateTemplate') templateTemplate: ElementRef;
   @ViewChild('inBtnGroup') inBtnGroup: ElementRef;
-
+  @ViewChild('iconTemplate') iconTemplate: ElementRef<void>;
 }
 
 @Component({
   selector: 'nz-popconfirm-test-wrapper',
   template: `
     <nz-popconfirm [nzOkType]="nzOkType" [nzTitle]="'NORMAL'" [nzTrigger]="'hover'">
-      <span #normalTrigger nz-popconfirm>Show</span></nz-popconfirm>
+      <span #normalTrigger nz-popconfirm>Show</span>
+    </nz-popconfirm>
 
     <nz-popconfirm [nzTrigger]="'hover'">
       <button #templateTrigger nz-popconfirm>Show</button>
@@ -291,7 +325,8 @@ export class NzpopconfirmTestNewComponent {
     <nz-popconfirm nzTitle="VISIBLE" [(nzVisible)]="visible"><span #visibleTrigger nz-popconfirm>Show</span>
     </nz-popconfirm>
 
-    <nz-popconfirm nzTitle="EXECUTE" [nzCondition]="executeCondition" (nzOnConfirm)="onConfirm()" (nzOnCancel)="onCancel()">
+    <nz-popconfirm nzTitle="EXECUTE" [nzCondition]="executeCondition" (nzOnConfirm)="onConfirm()"
+                   (nzOnCancel)="onCancel()">
       <span #executeTrigger nz-popconfirm>Show</span>
     </nz-popconfirm>
   `