@windrun-huaiin/third-ui 29.0.4 → 29.2.0

package/src/main/alert-dialog/confirm-dialog.tsx

@@ -24,8 +24,10 @@ import {
   primaryButtonClass,
   secondaryButtonClass,
 } from './dialog-styles';
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
 export type ConfirmDialogType = 'normal' | 'danger';
+export type ConfirmDialogEmphasis = 'confirm' | 'cancel';
 
 interface ConfirmDialogProps {
   open: boolean;
@@ -35,8 +37,10 @@ interface ConfirmDialogProps {
   description: React.ReactNode;
   cancelText?: string;
   confirmText?: string;
-  onCancel?: () => void;
-  onConfirm?: () => void;
+  emphasis?: ConfirmDialogEmphasis;
+  loadingActions?: readonly DialogLoadingAction[];
+  onCancel?: DialogActionHandler;
+  onConfirm?: DialogActionHandler;
 }
 
 const confirmTypeClassMap: Record<ConfirmDialogType, {
@@ -70,62 +74,71 @@ export function ConfirmDialog({
   description,
   cancelText = 'Cancel',
   confirmText = 'Confirm',
+  emphasis = 'confirm',
+  loadingActions,
   onCancel,
   onConfirm,
 }: ConfirmDialogProps) {
   const typeClass = confirmTypeClassMap[type];
   const Icon = typeClass.Icon;
+  const cancelButtonClass = emphasis === 'cancel' ? typeClass.action : secondaryButtonClass;
+  const confirmButtonClass = emphasis === 'cancel' ? secondaryButtonClass : typeClass.action;
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
 
   const handleCancel = () => {
+    void runDialogAction('cancel', onCancel);
+  };
+  const handleClose = () => {
     onOpenChange(false);
-    onCancel?.();
   };
 
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent
-        className={cn(dialogContentClass, typeClass.content)}
-        overlayClassName={dialogThemedOverlayClass}
-        onOverlayClick={handleCancel}
-      >
-        <div className={dialogHeaderClass}>
-          <AlertDialogTitle asChild>
-            <div className={dialogTitleClass}>
-              <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
-                <Icon className={cn('size-5', typeClass.icon)} />
-              </span>
-              <span className="min-w-0 truncate">{title}</span>
-            </div>
-          </AlertDialogTitle>
-          <button
-            type="button"
-            className={closeButtonClass}
-            onClick={handleCancel}
-            aria-label="Close"
-          >
-            <XIcon className="size-4" />
-          </button>
-        </div>
+    <>
+      <AlertDialog open={open} onOpenChange={onOpenChange}>
+        <AlertDialogContent
+          className={cn(dialogContentClass, typeClass.content)}
+          overlayClassName={dialogThemedOverlayClass}
+          onOverlayClick={handleClose}
+        >
+          <div className={dialogHeaderClass}>
+            <AlertDialogTitle asChild>
+              <div className={dialogTitleClass}>
+                <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
+                  <Icon className={cn('size-5', typeClass.icon)} />
+                </span>
+                <span className="min-w-0 truncate">{title}</span>
+              </div>
+            </AlertDialogTitle>
+            <button
+              type="button"
+              className={closeButtonClass}
+              onClick={handleClose}
+              aria-label="Close"
+            >
+              <XIcon className="size-4" />
+            </button>
+          </div>
 
-        <AlertDialogDescription className={dialogDescriptionClass}>
-          {description}
-        </AlertDialogDescription>
+          <AlertDialogDescription className={dialogDescriptionClass}>
+            {description}
+          </AlertDialogDescription>
 
-        <div className={dialogFooterClass}>
-          <AlertDialogCancel className={secondaryButtonClass} onClick={handleCancel}>
-            {cancelText}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            className={typeClass.action}
-            onClick={() => {
-              onOpenChange(false);
-              onConfirm?.();
-            }}
-          >
-            {confirmText}
-          </AlertDialogAction>
-        </div>
-      </AlertDialogContent>
-    </AlertDialog>
+          <div className={dialogFooterClass}>
+            <AlertDialogCancel className={cancelButtonClass} onClick={handleCancel}>
+              {cancelText}
+            </AlertDialogCancel>
+            <AlertDialogAction
+              className={confirmButtonClass}
+              onClick={() => {
+                void runDialogAction('confirm', onConfirm);
+              }}
+            >
+              {confirmText}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+      {dialogLoading}
+    </>
   );
 }

package/src/main/alert-dialog/dialog-loading-action.tsx

@@ -0,0 +1,63 @@
+'use client';
+
+import React from 'react';
+import { createPortal } from 'react-dom';
+import { Loading } from '../loading';
+
+export type DialogLoadingAction = 'cancel' | 'confirm' | 'undo';
+export type DialogActionHandler = () => void | Promise<void>;
+
+interface UseDialogLoadingActionOptions {
+  loadingActions?: readonly DialogLoadingAction[];
+  onOpenChange: (open: boolean) => void;
+}
+
+export function useDialogLoadingAction({
+  loadingActions,
+  onOpenChange,
+}: UseDialogLoadingActionOptions) {
+  const [mounted, setMounted] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+
+  const runDialogAction = React.useCallback(async (
+    action: DialogLoadingAction,
+    handler?: DialogActionHandler
+  ) => {
+    onOpenChange(false);
+
+    if (!handler) {
+      return;
+    }
+
+    if (!loadingActions?.includes(action)) {
+      await handler();
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      await handler();
+    } finally {
+      setLoading(false);
+    }
+  }, [loadingActions, onOpenChange]);
+
+  const dialogLoading = mounted && loading
+    ? createPortal(
+      <div className="fixed inset-0 z-10000">
+        <Loading className="h-full w-full" />
+      </div>,
+      document.body
+    )
+    : null;
+
+  return {
+    dialogLoading,
+    runDialogAction,
+  };
+}

package/src/main/alert-dialog/high-priority-confirm-dialog.tsx

@@ -15,80 +15,99 @@ import {
   secondaryButtonClass,
 } from "./dialog-styles";
 import { themeBgColor, themeBorderColor, themeIconColor } from "@windrun-huaiin/base-ui/lib";
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from "./dialog-loading-action";
 
 interface HighPriorityConfirmDialogProps {
   open: boolean;
-  onCancel: () => void;
-  onConfirm: () => void;
+  onOpenChange: (open: boolean) => void;
+  onCancel: DialogActionHandler;
+  onConfirm: DialogActionHandler;
   title: string;
   description: React.ReactNode;
   confirmText?: string;
   cancelText?: string;
+  loadingActions?: readonly DialogLoadingAction[];
 }
 
 export function HighPriorityConfirmDialog({
   open,
+  onOpenChange,
   onCancel,
   onConfirm,
   title,
   description,
   confirmText = "Confirm",
   cancelText = "Cancel",
+  loadingActions,
 }: HighPriorityConfirmDialogProps) {
   const [mounted, setMounted] = useState(false);
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
   
   useEffect(() => {
     // Ensure portal target exists and prevent hydration mismatch
     setTimeout(() => setMounted(true), 0);
   }, []);
 
-  if (!open || !mounted) return null;
+  if (!mounted) return dialogLoading;
 
-  return createPortal(
-    <div className="fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
-      <div 
-        className={cn(highPrioritySurfaceClass, "scale-100")}
-        role="dialog"
-        aria-modal="true"
-        onClick={(e) => e.stopPropagation()}
-      >
-        <div className={dialogHeaderClass}>
-          <h3 className={highPriorityTitleClass}>
-            <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor)}>
-              <FAQSIcon className={cn('size-5', themeIconColor)} />
-            </span>
-            <span className="min-w-0 truncate">{title}</span>
-          </h3>
-          <button
-            type="button"
-            className={closeButtonClass}
-            onClick={onCancel}
-            aria-label="Close"
-          >
-            <XIcon className="size-4" />
-          </button>
-        </div>
-        <div className={dialogDescriptionClass}>
-          {description}
-        </div>
-        <div className={dialogFooterClass}>
-          <button
-            type="button"
-            onClick={onCancel}
-            className={secondaryButtonClass}
-          >
-            {cancelText}
-          </button>
-          <button
-            type="button"
-            onClick={onConfirm}
-            className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
+  const handleClose = () => {
+    onOpenChange(false);
+  };
+
+  return (
+    <>
+      {open && createPortal(
+        <div className="fixed inset-0 z-10000 flex items-center justify-center bg-black/60 backdrop-blur-sm animate-in fade-in duration-300">
+          <div
+            className={cn(highPrioritySurfaceClass, "scale-100")}
+            role="dialog"
+            aria-modal="true"
+            onClick={(e) => e.stopPropagation()}
           >
-            {confirmText}
-          </button>
-        </div>
-      </div>
-    </div>,
-    document.body
+            <div className={dialogHeaderClass}>
+              <h3 className={highPriorityTitleClass}>
+                <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', themeBgColor, themeBorderColor)}>
+                  <FAQSIcon className={cn('size-5', themeIconColor)} />
+                </span>
+                <span className="min-w-0 truncate">{title}</span>
+              </h3>
+              <button
+                type="button"
+                className={closeButtonClass}
+                onClick={handleClose}
+                aria-label="Close"
+              >
+                <XIcon className="size-4" />
+              </button>
+            </div>
+            <div className={dialogDescriptionClass}>
+              {description}
+            </div>
+            <div className={dialogFooterClass}>
+              <button
+                type="button"
+                onClick={() => {
+                  void runDialogAction('cancel', onCancel);
+                }}
+                className={secondaryButtonClass}
+              >
+                {cancelText}
+              </button>
+              <button
+                type="button"
+                onClick={() => {
+                  void runDialogAction('confirm', onConfirm);
+                }}
+                className={cn(primaryButtonClass, "hover:scale-105 active:scale-95")}
+              >
+                {confirmText}
+              </button>
+            </div>
+          </div>
+        </div>,
+        document.body
+      )}
+      {dialogLoading}
+    </>
   );
 }

package/src/main/alert-dialog/index.ts

@@ -5,3 +5,4 @@ export * from './confirm-dialog';
 export * from './high-priority-confirm-dialog';
 export * from './info-dialog';
 export * from './undoable-confirm-dialog';
+export type { DialogLoadingAction } from './dialog-loading-action';

package/src/main/alert-dialog/info-dialog.tsx

@@ -25,6 +25,7 @@ import {
   dialogThemedOverlayClass,
   dialogTitleClass,
 } from './dialog-styles';
+import { DialogLoadingAction, DialogActionHandler, useDialogLoadingAction } from './dialog-loading-action';
 
 export type InfoDialogType = 'info' | 'warn' | 'success' | 'error';
 type InfoDialogIcon = typeof BadgeInfoIcon;
@@ -36,7 +37,8 @@ interface InfoDialogProps {
   title: React.ReactNode;
   description: React.ReactNode;
   confirmText?: string;
-  onConfirm?: () => void;
+  loadingActions?: readonly DialogLoadingAction[];
+  onConfirm?: DialogActionHandler;
 }
 
 const infoTypeClassMap: Record<InfoDialogType, {
@@ -83,57 +85,61 @@ export function InfoDialog({
   title,
   description,
   confirmText = 'OK',
+  loadingActions,
   onConfirm,
 }: InfoDialogProps) {
   const typeClass = infoTypeClassMap[type];
   const Icon = typeClass.Icon;
   const handleClose = () => onOpenChange(false);
+  const { dialogLoading, runDialogAction } = useDialogLoadingAction({ loadingActions, onOpenChange });
 
   return (
-    <AlertDialog open={open} onOpenChange={onOpenChange}>
-      <AlertDialogContent
-        className={cn(dialogContentClass, typeClass.content)}
-        overlayClassName={dialogThemedOverlayClass}
-        onOverlayClick={handleClose}
-      >
-        <div className={dialogHeaderClass}>
-          <AlertDialogTitle asChild>
-            <div className={dialogTitleClass}>
-              <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
-                <Icon className={cn('size-5', typeClass.icon)} />
-              </span>
-              <span className="min-w-0 truncate">{title}</span>
-            </div>
-          </AlertDialogTitle>
-          <button
-            type="button"
-            className={closeButtonClass}
-            onClick={handleClose}
-            aria-label="Close"
-          >
-            <XIcon className="size-4" />
-          </button>
-        </div>
+    <>
+      <AlertDialog open={open} onOpenChange={onOpenChange}>
+        <AlertDialogContent
+          className={cn(dialogContentClass, typeClass.content)}
+          overlayClassName={dialogThemedOverlayClass}
+          onOverlayClick={handleClose}
+        >
+          <div className={dialogHeaderClass}>
+            <AlertDialogTitle asChild>
+              <div className={dialogTitleClass}>
+                <span className={cn('inline-flex size-9 shrink-0 items-center justify-center rounded-full ring-1', typeClass.iconWrap)}>
+                  <Icon className={cn('size-5', typeClass.icon)} />
+                </span>
+                <span className="min-w-0 truncate">{title}</span>
+              </div>
+            </AlertDialogTitle>
+            <button
+              type="button"
+              className={closeButtonClass}
+              onClick={handleClose}
+              aria-label="Close"
+            >
+              <XIcon className="size-4" />
+            </button>
+          </div>
 
-        <AlertDialogDescription className={dialogDescriptionClass}>
-          {description}
-        </AlertDialogDescription>
+          <AlertDialogDescription className={dialogDescriptionClass}>
+            {description}
+          </AlertDialogDescription>
 
-        <div className={dialogFooterClass}>
-          <AlertDialogAction
-            className={cn(
-              'inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60',
-              typeClass.action
-            )}
-            onClick={() => {
-              onOpenChange(false);
-              onConfirm?.();
-            }}
-          >
-            {confirmText}
-          </AlertDialogAction>
-        </div>
-      </AlertDialogContent>
-    </AlertDialog>
+          <div className={dialogFooterClass}>
+            <AlertDialogAction
+              className={cn(
+                'inline-flex min-h-10 items-center justify-center rounded-full px-5 py-2 text-sm font-bold transition focus-visible:outline-none focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-60',
+                typeClass.action
+              )}
+              onClick={() => {
+                void runDialogAction('confirm', onConfirm);
+              }}
+            >
+              {confirmText}
+            </AlertDialogAction>
+          </div>
+        </AlertDialogContent>
+      </AlertDialog>
+      {dialogLoading}
+    </>
   );
 }