feat: create confirm dialog to use instead of window.confirm (#4256)

* feat: create confirm dialog to use instead of window.confirm

* move confirm to right

* add types

* less margin

src/components/ClearCanvas.tsx

@@ -1,11 +1,10 @@
 import { useState } from "react";
 import { t } from "../i18n";
 import { useIsMobile } from "./App";
-import { Dialog } from "./Dialog";
 import { trash } from "./icons";
 import { ToolButton } from "./ToolButton";
 
-import "./ClearCanvas.scss";
+import ConfirmDialog from "./ConfirmDialog";
 
 const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
   const [showDialog, setShowDialog] = useState(false);
@@ -26,39 +25,16 @@ const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
       />
 
       {showDialog && (
-        <Dialog
+        <ConfirmDialog
-          onCloseRequest={toggleDialog}
+          onConfirm={() => {
+            onConfirm();
+            toggleDialog();
+          }}
+          onCancel={toggleDialog}
           title={t("clearCanvasDialog.title")}
-          className="clear-canvas"
-          small={true}
         >
-          <>
+          <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
-            <p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
+        </ConfirmDialog>
-            <div className="clear-canvas-buttons">
-              <ToolButton
-                type="button"
-                title={t("buttons.clear")}
-                aria-label={t("buttons.clear")}
-                label={t("buttons.clear")}
-                onClick={() => {
-                  onConfirm();
-                  toggleDialog();
-                }}
-                data-testid="confirm-clear-canvas-button"
-                className="clear-canvas--confirm"
-              />
-              <ToolButton
-                type="button"
-                title={t("buttons.cancel")}
-                aria-label={t("buttons.cancel")}
-                label={t("buttons.cancel")}
-                onClick={toggleDialog}
-                data-testid="cancel-clear-canvas-button"
-                className="clear-canvas--cancel"
-              />
-            </div>
-          </>
-        </Dialog>
       )}
     </>
   );

src/components/ConfirmDialog.scss

@@ -1,22 +1,21 @@
 @import "../css/variables.module";
 
 .excalidraw {
-  .clear-canvas {
+  .confirm-dialog {
     &-buttons {
       display: flex;
       padding: 0.2rem 0;
       justify-content: flex-end;
+    }
+    .ToolIcon__icon {
+      min-width: 2.5rem;
+      width: auto;
+      font-size: 1rem;
+    }
 
-      .ToolIcon__icon {
+    .ToolIcon_type_button {
-        min-width: 2.5rem;
+      margin-left: 0.8rem;
-        width: auto;
+      padding: 0 0.5rem;
-        font-size: 1rem;
-      }
-
-      .ToolIcon_type_button {
-        margin-left: 1.5rem;
-        padding: 0 0.5rem;
-      }
     }
 
     &__content {
@@ -34,9 +33,5 @@
         color: $oc-white;
       }
     }
-
-    &--cancel.ToolIcon_type_button {
-      background-color: $oc-gray-2;
-    }
   }
 }

src/components/ConfirmDialog.tsx

@@ -0,0 +1,52 @@
+import { t } from "../i18n";
+import { Dialog, DialogProps } from "./Dialog";
+import { ToolButton } from "./ToolButton";
+
+import "./ConfirmDialog.scss";
+
+interface Props extends Omit<DialogProps, "onCloseRequest"> {
+  onConfirm: () => void;
+  onCancel: () => void;
+  confirmText?: string;
+  cancelText?: string;
+}
+const ConfirmDialog = (props: Props) => {
+  const {
+    onConfirm,
+    onCancel,
+    children,
+    confirmText = t("buttons.confirm"),
+    cancelText = t("buttons.cancel"),
+    className = "",
+    ...rest
+  } = props;
+  return (
+    <Dialog
+      onCloseRequest={onCancel}
+      small={true}
+      {...rest}
+      className={`confirm-dialog ${className}`}
+    >
+      {children}
+      <div className="confirm-dialog-buttons">
+        <ToolButton
+          type="button"
+          title={cancelText}
+          aria-label={cancelText}
+          label={cancelText}
+          onClick={onCancel}
+          className="confirm-dialog--cancel"
+        />
+        <ToolButton
+          type="button"
+          title={confirmText}
+          aria-label={confirmText}
+          label={confirmText}
+          onClick={onConfirm}
+          className="confirm-dialog--confirm"
+        />
+      </div>
+    </Dialog>
+  );
+};
+export default ConfirmDialog;

src/components/Dialog.tsx

@@ -10,7 +10,7 @@ import { Island } from "./Island";
 import { Modal } from "./Modal";
 import { AppState } from "../types";
 
-export const Dialog = (props: {
+export interface DialogProps {
   children: React.ReactNode;
   className?: string;
   small?: boolean;
@@ -18,7 +18,8 @@ export const Dialog = (props: {
   title: React.ReactNode;
   autofocus?: boolean;
   theme?: AppState["theme"];
-}) => {
+}
+export const Dialog = (props: DialogProps) => {
   const [islandNode, setIslandNode] = useCallbackRefState<HTMLDivElement>();
   const [lastActiveElement] = useState(document.activeElement);
   const { id } = useExcalidrawContainer();

src/locales/en.json

@@ -135,7 +135,8 @@
     "zenMode": "Zen mode",
     "exitZenMode": "Exit zen mode",
     "cancel": "Cancel",
-    "clear": "Clear"
+    "clear": "Clear",
+    "confirm": "Confirm"
   },
   "alerts": {
     "clearReset": "This will clear the whole canvas. Are you sure?",