@alpaca-editor/core 1.0.3979 → 1.0.3981

package/src/editor/ConfirmationDialog.tsx

@@ -1,6 +1,12 @@
 import { useState, forwardRef, useImperativeHandle } from "react";
-import { Dialog } from "primereact/dialog";
-import { Button } from "primereact/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogFooter,
+} from "../components/ui/dialog";
+import { Button } from "../components/ui/button";
 
 export type ConfirmationDialogProps = {};
 
@@ -30,7 +36,7 @@ const ConfirmationDialog = forwardRef<
 
   const [props, setProps] = useState<ConfirmationProps>();
 
-  const showAccept = props?.accept === undefined ? true : props.accept;
+  const showAccept = props?.showAccept === undefined ? true : props.showAccept;
 
   useImperativeHandle(ref, () => ({
     confirm: (props: ConfirmationProps) => {
@@ -53,50 +59,35 @@ const ConfirmationDialog = forwardRef<
     setVisible(false);
   };
 
-  const dialogFooter = (
-    <div>
-      {showAccept && (
-        <Button
-          label={props?.acceptLabel || "Yes"}
-          icon={props?.acceptIcon || "pi pi-check"}
-          onClick={handleAccept}
-          className="p-button-text"
-        />
-      )}
-      {props?.rejectLabel && (
-        <Button
-          label={props?.rejectLabel}
-          icon={props?.rejectIcon || "pi pi-times"}
-          onClick={handleReject}
-          className="p-button-text"
-        />
-      )}
-      {props?.showCancel && (
-        <Button
-          label="Cancel"
-          icon="pi pi-ban"
-          onClick={handleCancel}
-          className="p-button-text"
-        />
-      )}
-    </div>
-  );
-
   return (
-    visible && (
-      <Dialog
-        header={props?.header || "Confirm"}
-        visible={visible}
-        footer={dialogFooter}
-        onHide={handleCancel}
-        className="md:max-w-50vw"
-      >
-        <div className="flex items-center gap-2 p-3">
-          {props?.icon && <i className={props.icon + " text-3xl"}></i>}
-          {props?.message}
+    <Dialog open={visible} onOpenChange={setVisible}>
+      <DialogContent className="sm:max-w-[425px]">
+        <DialogHeader>
+          <DialogTitle>{props?.header || "Confirm"}</DialogTitle>
+        </DialogHeader>
+        <div className="flex items-center gap-3 p-3">
+          {props?.icon && <div className="text-2xl">{props.icon}</div>}
+          <div className="flex-1">{props?.message}</div>
         </div>
-      </Dialog>
-    )
+        <DialogFooter className="gap-2 border-t p-2">
+          {props?.showCancel && (
+            <Button variant="ghost" onClick={handleCancel}>
+              Cancel
+            </Button>
+          )}
+          {props?.rejectLabel && (
+            <Button variant="destructive" onClick={handleReject}>
+              {props.rejectLabel}
+            </Button>
+          )}
+          {showAccept && (
+            <Button onClick={handleAccept}>
+              {props?.acceptLabel || "Yes"}
+            </Button>
+          )}
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
   );
 });