feat: support return Promise/Observable directly for ConfirmDialog

src/dialog/confirm-dialog/confirm-dialog-config.ts

@@ -1,4 +1,4 @@
-import { ConfirmType } from '../dialog.types';
+import { BeforeAction, ConfirmType } from '../dialog.types';
 
 export class ConfirmDialogConfig<T = unknown, R = unknown> {
   title: string;
@@ -8,6 +8,6 @@ export class ConfirmDialogConfig<T = unknown, R = unknown> {
   confirmText? = 'OK';
   cancelText? = 'Cancel';
 
-  beforeConfirm?: (resolve: (result?: T) => void, reject: () => void) => void;
-  beforeCancel?: (resolve: (result?: R) => void, reject: () => void) => void;
+  beforeConfirm?: BeforeAction<T>;
+  beforeCancel?: BeforeAction<R>;
 }

src/dialog/confirm-dialog/confirm-dialog.component.ts

@@ -4,10 +4,11 @@ import {
   Component,
   ViewEncapsulation,
 } from '@angular/core';
+import { Observable } from 'rxjs';
 
 import { Bem, buildBem } from '../../utils/bem';
 import { DialogRef } from '../dialog-ref';
-import { ConfirmType } from '../dialog.types';
+import { BeforeAction, ConfirmType, CustomBeforeAction } from '../dialog.types';
 
 import { ConfirmDialogConfig } from './confirm-dialog-config';
 
@@ -19,10 +20,10 @@ import { ConfirmDialogConfig } from './confirm-dialog-config';
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
 })
-export class ConfirmDialogComponent {
+export class ConfirmDialogComponent<T = unknown, R = unknown> {
   bem: Bem = buildBem('aui-confirm-dialog');
 
-  config: ConfirmDialogConfig;
+  config: ConfirmDialogConfig<T, R>;
 
   waitConfirm = false;
   waitCancel = false;
@@ -32,7 +33,7 @@ export class ConfirmDialogComponent {
     private readonly cdr: ChangeDetectorRef,
   ) {}
 
-  setConfig(config: ConfirmDialogConfig) {
+  setConfig(config: ConfirmDialogConfig<T, R>) {
     this.config = { ...new ConfirmDialogConfig(), ...config };
   }
 
@@ -56,7 +57,7 @@ export class ConfirmDialogComponent {
     }
     this.waitConfirm = true;
     try {
-      const result = await new Promise(this.config.beforeConfirm);
+      const result = await this.toPromise(this.config.beforeConfirm);
       this.dialogRef.close({ confirm: true, result });
     } catch {
     } finally {
@@ -68,15 +69,30 @@ export class ConfirmDialogComponent {
   async cancel() {
     if (!this.config.beforeCancel) {
       this.dialogRef.close({ confirm: false, result: null });
+      return;
     }
     this.waitCancel = true;
     try {
-      const result = await new Promise(this.config.beforeCancel);
+      const result = await this.toPromise(this.config.beforeCancel);
       this.dialogRef.close({ confirm: false, result });
     } catch {
     } finally {
       this.waitCancel = false;
       this.cdr.markForCheck();
     }
   }
+
+  private toPromise<T>(beforeAction: BeforeAction<T>) {
+    if (beforeAction.length) {
+      return new Promise(beforeAction);
+    }
+
+    const result = (beforeAction as CustomBeforeAction<T>)();
+
+    if (result instanceof Observable) {
+      return result.toPromise();
+    }
+
+    return result;
+  }
 }

src/dialog/dialog.service.spec.ts

@@ -7,6 +7,7 @@ import {
   inject,
   tick,
 } from '@angular/core/testing';
+import { timer } from 'rxjs';
 
 import { DialogModule, DialogService, DialogSize } from './public-api';
 
@@ -132,7 +133,7 @@ describe('DialogService', () => {
 
   it('should before confirm work correctly', () => {
     return new Promise<void>(resolve => {
-      const t1 = new Date().getTime();
+      const t1 = Date.now();
       dialogService
         .confirm({
           title: '',
@@ -141,7 +142,34 @@ describe('DialogService', () => {
           },
         })
         .then(() => {
-          const t2 = new Date().getTime();
+          const t2 = Date.now();
+          expect(t2 - t1).toBeGreaterThanOrEqual(100);
+          resolve();
+        });
+      fixture.detectChanges();
+
+      const confirmBtn: HTMLButtonElement = ocEl.querySelector(
+        '.aui-confirm-dialog__confirm-button',
+      );
+      confirmBtn.dispatchEvent(new Event('click'));
+      fixture.detectChanges();
+
+      expect(confirmBtn.className).toContain('isLoading');
+      expect(confirmBtn.disabled).toBeTruthy();
+    });
+  });
+
+  it('should before confirm observable work correctly', () => {
+    return new Promise<void>(resolve => {
+      const t1 = Date.now();
+      dialogService
+        .confirm({
+          title: '',
+          beforeConfirm: () => timer(100),
+        })
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        .then(() => {
+          const t2 = Date.now();
           expect(t2 - t1).toBeGreaterThanOrEqual(100);
           resolve();
         });
@@ -160,7 +188,7 @@ describe('DialogService', () => {
 
   it('should before cancel work correctly', () => {
     return new Promise<void>(resolve => {
-      const t1 = new Date().getTime();
+      const t1 = Date.now();
       dialogService
         .confirm({
           title: '',
@@ -170,7 +198,34 @@ describe('DialogService', () => {
         })
         // eslint-disable-next-line sonarjs/no-identical-functions
         .catch(() => {
-          const t2 = new Date().getTime();
+          const t2 = Date.now();
+          expect(t2 - t1).toBeGreaterThanOrEqual(100);
+          resolve();
+        });
+      fixture.detectChanges();
+
+      const cancelBtn: HTMLButtonElement = ocEl.querySelector(
+        '.aui-confirm-dialog__cancel-button',
+      );
+      cancelBtn.dispatchEvent(new Event('click'));
+      fixture.detectChanges();
+
+      expect(cancelBtn.className).toContain('isLoading');
+      expect(cancelBtn.disabled).toBeTruthy();
+    });
+  });
+
+  it('should before cancel observable work correctly', () => {
+    return new Promise<void>(resolve => {
+      const t1 = Date.now();
+      dialogService
+        .confirm({
+          title: '',
+          beforeCancel: () => timer(100),
+        })
+        // eslint-disable-next-line sonarjs/no-identical-functions
+        .catch(() => {
+          const t2 = Date.now();
           expect(t2 - t1).toBeGreaterThanOrEqual(100);
           resolve();
         });

src/dialog/dialog.types.ts

@@ -1,3 +1,5 @@
+import { Observable } from 'rxjs';
+
 export enum DialogSize {
   Small = 'small',
   Medium = 'medium',
@@ -13,3 +15,9 @@ export enum ConfirmType {
   Warning = 'warning',
   Danger = 'danger',
 }
+
+export type CustomBeforeAction<T> = () => Promise<T> | Observable<T>;
+
+export type BeforeAction<T> =
+  | ((resolve: (result?: T) => void, reject: () => void) => void)
+  | CustomBeforeAction<T>;