68 lines
1.9 KiB
TypeScript
68 lines
1.9 KiB
TypeScript
|
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";
|
||
|
|
|
||
|
|
const ClearCanvas = ({ onConfirm }: { onConfirm: () => void }) => {
|
||
|
|
const [showDialog, setShowDialog] = useState(false);
|
||
|
|
const toggleDialog = () => {
|
||
|
|
setShowDialog(!showDialog);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<ToolButton
|
||
|
|
type="button"
|
||
|
|
icon={trash}
|
||
|
|
title={t("buttons.clearReset")}
|
||
|
|
aria-label={t("buttons.clearReset")}
|
||
|
|
showAriaLabel={useIsMobile()}
|
||
|
|
onClick={toggleDialog}
|
||
|
|
data-testid="clear-canvas-button"
|
||
|
|
/>
|
||
|
|
|
||
|
|
{showDialog && (
|
||
|
|
<Dialog
|
||
|
|
onCloseRequest={toggleDialog}
|
||
|
|
title={t("clearCanvasDialog.title")}
|
||
|
|
className="clear-canvas"
|
||
|
|
small={true}
|
||
|
|
>
|
||
|
|
<>
|
||
|
|
<p className="clear-canvas__content"> {t("alerts.clearReset")}</p>
|
||
|
|
<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>
|
||
|
|
)}
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
export default ClearCanvas;
|