Skip to content

Commit

Permalink
feat(module:popconfirm): support custom icon (#2964)
Browse files Browse the repository at this point in the history
* feat(module:popconfirm): support custom icon

close #2196

* fix(module:cascader): add missed TemplateRef

* fix: fix tsconfig

* docs: fix cascader doc type
  • Loading branch information
Wendell authored and vthinkxie committed Feb 25, 2019
1 parent dfcccad commit ff030ff
Show file tree
Hide file tree
Showing 12 changed files with 106 additions and 19 deletions.
2 changes: 1 addition & 1 deletion components/cascader/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ Cascade selection box.
| `[nzExpandTrigger]` | expand current item when click or hover, one of 'click' 'hover' | `'click'|'hover'` | `'click'` |
| `[nzMenuClassName]` | additional className of popup overlay | `string` | - |
| `[nzMenuStyle]` | additional css style of popup overlay | `object` | - |
| `[nzNotFoundContent]` | Specify content to show when no result matches. | `string` | - |
| `[nzNotFoundContent]` | Specify content to show when no result matches. | `string|TemplateRef<void>` | - |
| `[nzLabelProperty]` | the label property name of options | `string` | `'label'` |
| `[nzLabelRender]` | render template of displaying selected options | `TemplateRef<any>` | - |
| `[nzLoadData]` | To load option lazily. If setting `ngModel` with an array value and `nzOptions` is not setting, lazy load will be call immediately | `(option: any, index?: index) => PromiseLike<any>` | - |
Expand Down
2 changes: 1 addition & 1 deletion components/cascader/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -33,7 +33,7 @@ subtitle: 级联选择
| `[nzExpandTrigger]` | 次级菜单的展开方式,可选 'click' 和 'hover' | `'click'|'hover'` | `'click'` |
| `[nzMenuClassName]` | 自定义浮层类名 | `string` | - |
| `[nzMenuStyle]` | 自定义浮层样式 | `object` | - |
| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string` | - |
| `[nzNotFoundContent]` | 当下拉列表为空时显示的内容 | `string|TemplateRef<void>` | - |
| `[nzLabelProperty]` | 选项的显示值的属性名 | `string` | `'label'` |
| `[nzLabelRender]` | 选择后展示的渲染模板 | `TemplateRef<any>` | - |
| `[nzLoadData]` | 用于动态加载选项。如果提供了`ngModel`初始值,且未提供`nzOptions`值,则会立即触发动态加载。 | `(option: any, index?: index) => PromiseLike<any>` | - |
Expand Down
2 changes: 1 addition & 1 deletion components/cascader/nz-cascader.component.ts
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ export class NzCascaderComponent implements OnDestroy, ControlValueAccessor {
@Input() nzValueProperty = 'value';
@Input() nzLabelRender: TemplateRef<void>;
@Input() nzLabelProperty = 'label';
@Input() nzNotFoundContent: string;
@Input() nzNotFoundContent: string | TemplateRef<void>;
@Input() nzSize: NzCascaderSize = 'default';
@Input() nzShowSearch: boolean | NzShowSearchOptions;
@Input() nzPlaceHolder = 'Please select';
Expand Down
14 changes: 14 additions & 0 deletions components/popconfirm/demo/custom-icon.md
Original file line number Diff line number Diff line change
@@ -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.
14 changes: 14 additions & 0 deletions components/popconfirm/demo/custom-icon.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,14 @@
import { Component } from '@angular/core';

@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 {
}
11 changes: 6 additions & 5 deletions components/popconfirm/doc/index.en-US.md
Original file line number Diff line number Diff line change
Expand Up @@ -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.

Expand Down
1 change: 1 addition & 0 deletions components/popconfirm/doc/index.zh-CN.md
Original file line number Diff line number Diff line change
Expand Up @@ -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>` | - |

Expand Down
4 changes: 3 additions & 1 deletion components/popconfirm/nz-popconfirm.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
12 changes: 11 additions & 1 deletion components/popconfirm/nz-popconfirm.component.ts
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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();
Expand Down
6 changes: 4 additions & 2 deletions components/popconfirm/nz-popconfirm.directive.ts
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import {
OnInit,
Optional,
Output,
Renderer2,
Renderer2, TemplateRef,
ViewContainerRef
} from '@angular/core';

Expand Down Expand Up @@ -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>();
Expand Down
10 changes: 9 additions & 1 deletion components/popconfirm/nz-popconfirm.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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 ]
})

Expand Down
47 changes: 41 additions & 6 deletions components/popconfirm/nz-popconfirm.spec.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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>
`
Expand All @@ -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>
Expand All @@ -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>
`
Expand Down

0 comments on commit ff030ff

Please sign in to comment.