update

libs/registry/registry/components/a/confirm.tsx

@@ -9,9 +9,34 @@ import {
   AlertDialogTitle,
   AlertDialogTrigger,
 } from '@/components/ui/alert-dialog';
-import { useMemo, useRef, useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 
 type useConfirmOptions = {
+  confrimProps: ConfirmProps;
+};
+type Fn = () => void;
+export const useConfirm = (opts?: useConfirmOptions) => {
+  const [open, setOpen] = useState(false);
+  type ConfirmOptions = {
+    onOk?: Fn;
+    onCancel?: Fn;
+  };
+  const confirm = (opts?: ConfirmOptions) => {
+    setOpen(true);
+  };
+  const module = useMemo(() => {
+    return <Confirm {...opts?.confrimProps} hasTrigger={false} open={open} setOpen={setOpen} />;
+  }, [open]);
+  return {
+    module: module,
+    open,
+    setOpen,
+    confirm,
+  };
+};
+
+type ConfirmProps = {
+  children?: React.ReactNode;
   tip?: React.ReactNode;
   title?: string;
   description?: string;
@@ -19,87 +44,55 @@ type useConfirmOptions = {
   onCancelText?: string;
   onOk?: Fn;
   onCancle?: Fn;
-  children?: React.ReactNode;
+  hasTrigger?: boolean;
+  open?: boolean;
+  setOpen?: (open: boolean) => void;
+  footer?: React.ReactNode;
 };
-type Fn = () => void;
-export const useConfirm = (opts?: useConfirmOptions) => {
-  const [open, setOpen] = useState(false);
-  const onOkRef = useRef<Fn>(null);
-  const onCancle = useRef<Fn>(null);
-  type ConfirmOptions = {
-    onOk?: Fn;
-    onCancel?: Fn;
-  };
-  const confirm = (opts: ConfirmOptions) => {
-    setOpen(true);
-    opts.onOk && (onOkRef.current = opts.onOk);
-    opts.onCancel && (onCancle.current = opts.onCancel);
-  };
-  const module = useMemo(() => {
-    if (!open) return null;
-    return (
-      <AlertDialog>
-        <AlertDialogTrigger>{opts?.tip ?? '提示'}</AlertDialogTrigger>
-        <AlertDialogContent>
-          <AlertDialogHeader>
-            <AlertDialogTitle>{opts?.title ?? '是否确认删除?'}</AlertDialogTitle>
-            <AlertDialogDescription>{opts?.description ?? '此操作无法撤销，是否继续。'}</AlertDialogDescription>
-          </AlertDialogHeader>
-          <AlertDialogFooter>
-            <AlertDialogCancel
-              onClick={(e) => {
-                setOpen(false);
-                onCancle.current && onCancle.current();
-                e.stopPropagation();
-              }}>
-              {opts?.onCancelText ?? '取消'}
-            </AlertDialogCancel>
-            <AlertDialogAction
-              onClick={(e) => {
-                setOpen(false);
-                onOkRef.current && onOkRef.current();
-                e.stopPropagation();
-              }}>
-              {opts?.onOkText ?? '确定'}
-            </AlertDialogAction>
-          </AlertDialogFooter>
-        </AlertDialogContent>
-      </AlertDialog>
-    );
-  }, [open]);
-  return {
-    module,
-    open,
-    setOpen,
-    confirm,
-  };
-};
-
-export const Confirm = (opts?: useConfirmOptions) => {
+export const Confirm = (props: ConfirmProps) => {
+  const [isOpen, setIsOpen] = useState(props.open);
+  const hasTrigger = props.hasTrigger ?? true;
+  useEffect(() => {
+    setIsOpen(props.open);
+  }, [props.open]);
   return (
-    <AlertDialog>
-      {opts?.children && <AlertDialogTrigger asChild>{opts?.children ?? opts?.tip ?? '提示'}</AlertDialogTrigger>}
-      {!opts?.children && <AlertDialogTrigger>{opts?.tip ?? '提示'}</AlertDialogTrigger>}
+    <AlertDialog
+      open={isOpen}
+      onOpenChange={(v) => {
+        setIsOpen(v);
+        props?.setOpen?.(v);
+      }}>
+      {hasTrigger && (
+        <>
+          {props?.children && <AlertDialogTrigger asChild>{props?.children ?? props?.tip ?? '提示'}</AlertDialogTrigger>}
+          {!props?.children && <AlertDialogTrigger>{props?.tip ?? '提示'}</AlertDialogTrigger>}
+        </>
+      )}
       <AlertDialogContent>
         <AlertDialogHeader>
-          <AlertDialogTitle>{opts?.title ?? '是否确认删除?'}</AlertDialogTitle>
-          <AlertDialogDescription>{opts?.description ?? '此操作无法撤销，是否继续。'}</AlertDialogDescription>
+          <AlertDialogTitle>{props?.title ?? '是否确认删除?'}</AlertDialogTitle>
+          <AlertDialogDescription>{props?.description ?? '此操作无法撤销，是否继续。'}</AlertDialogDescription>
         </AlertDialogHeader>
         <AlertDialogFooter>
-          <AlertDialogCancel
-            onClick={(e) => {
-              opts?.onCancle?.();
-              e.stopPropagation();
-            }}>
-            {opts?.onCancelText ?? '取消'}
-          </AlertDialogCancel>
-          <AlertDialogAction
-            onClick={(e) => {
-              opts?.onOk?.();
-              e.stopPropagation();
-            }}>
-            {opts?.onOkText ?? '确定'}
-          </AlertDialogAction>
+          {props?.footer && <div className='flex gap-2'>{props?.footer}</div>}
+          {!props?.footer && (
+            <>
+              <AlertDialogCancel
+                onClick={(e) => {
+                  props?.onCancle?.();
+                  e.stopPropagation();
+                }}>
+                {props?.onCancelText ?? '取消'}
+              </AlertDialogCancel>
+              <AlertDialogAction
+                onClick={(e) => {
+                  props?.onOk?.();
+                  e.stopPropagation();
+                }}>
+                {props?.onOkText ?? '确定'}
+              </AlertDialogAction>{' '}
+            </>
+          )}
         </AlertDialogFooter>
       </AlertDialogContent>
     </AlertDialog>