fix(module:popconfirm): add nzOkType support (#1492)

close #1312
NG-ZORRO · May 22, 2018 · 6f394a4 · 6f394a4
1 parent 1b8c0fe
commit 6f394a4
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 2 deletions.
diff --git a/components/popconfirm/nz-popconfirm.component.html b/components/popconfirm/nz-popconfirm.component.html
@@ -25,7 +25,7 @@
                 <ng-container *ngIf="nzCancelText">{{ nzCancelText }}</ng-container>
                 <ng-container *ngIf="!nzCancelText">{{ 'Modal.cancelText' | nzI18n }}</ng-container>
               </button>
-              <button nz-button [nzSize]="'small'" [nzType]="'primary'" (click)="onConfirm()">
+              <button nz-button [nzSize]="'small'" [nzType]="nzOkType" (click)="onConfirm()">
                 <ng-container *ngIf="nzOkText">{{ nzOkText }}</ng-container>
                 <ng-container *ngIf="!nzOkText">{{ 'Modal.okText' | nzI18n }}</ng-container>
               </button>

diff --git a/components/popconfirm/nz-popconfirm.component.ts b/components/popconfirm/nz-popconfirm.component.ts
@@ -29,6 +29,7 @@ export class NzPopconfirmComponent extends NzToolTipComponent {
   _hasBackdrop = true;
   @Input() nzContent;
   @Input() nzOkText: string;
+  @Input() nzOkType: string = 'primary';
   @Input() nzCancelText: string;
 
   @Input()

diff --git a/components/popconfirm/nz-popconfirm.spec.ts b/components/popconfirm/nz-popconfirm.spec.ts
@@ -58,6 +58,18 @@ describe('NzPopconfirm', () => {
     expect(overlayContainerElement.textContent).not.toContain(featureKey);
   }));
 
+  it('should support nzOkType', fakeAsync(() => {
+    demoAppComponent.nzOkType = 'danger';
+    const triggerElement = demoAppComponent.normalTrigger.nativeElement;
+
+    dispatchMouseEvent(triggerElement, 'mouseenter');
+    demoAppFixture.detectChanges();
+    tick(150); // wait for the default 100ms delay
+    demoAppFixture.detectChanges();
+    tick();
+    expect(!!overlayContainerElement.querySelector('button.ant-btn-danger')).toBeTruthy();
+  }));
+
   it('should show tooltip with custom template', fakeAsync(() => {
     const triggerElement = demoAppComponent.templateTrigger.nativeElement;
 
@@ -144,7 +156,7 @@ describe('NzPopconfirm', () => {
 @Component({
   selector: 'nz-demo-app',
   template: `
-    <nz-popconfirm [nzTitle]="'NORMAL'" [nzTrigger]="'hover'"><span #normalTrigger nz-popconfirm>Show</span></nz-popconfirm>
+    <nz-popconfirm [nzOkType]="nzOkType" [nzTitle]="'NORMAL'" [nzTrigger]="'hover'"><span #normalTrigger nz-popconfirm>Show</span></nz-popconfirm>
 
     <nz-popconfirm [nzTrigger]="'hover'">
       <button #templateTrigger nz-popconfirm>Show</button>
@@ -163,6 +175,8 @@ describe('NzPopconfirm', () => {
   `
 })
 export class DemoAppComponent {
+  nzOkType = 'primary';
+
   @ViewChild('normalTrigger') normalTrigger: ElementRef;
 
   @ViewChild('templateTrigger') templateTrigger: ElementRef;