Add confirmation when erasing all

Author: roman-drozd-it

src/components/drawing/DrawingBoard.tsx

@@ -6,13 +6,13 @@ import AutoFixNormalIcon from '@mui/icons-material/AutoFixNormal';
 import AbcIcon from '@mui/icons-material/Abc';
 import UndoIcon from '@mui/icons-material/Undo';
 import RedoIcon from '@mui/icons-material/Redo';
-import DeleteIcon from '@mui/icons-material/Delete';
 import CircleIcon from '@mui/icons-material/Circle';
+import ErasingAllConfirmationButton from './ErasingAllConfirmationButton';
 
 const DrawingBoard: React.FC = () => {
 	const canvasRef = useRef<HTMLCanvasElement>(null);
 	const [ canvas, setCanvas ] = useState<fabric.Canvas | null>(null);
-	const [ mode, setMode ] = useState<fabric.PencilBrush | null>(null); // eslint-disable-line
+	const [mode, setMode] = useState<fabric.PencilBrush | null>(null); // eslint-disable-line
 	const historyRedo: fabric.Object[] = [];
 
 	const paletteColors = [ 'black', 'gray', 'green', 'yellow', 'orange', 'red', 'blue', 'purple' ];
@@ -129,7 +129,7 @@ const DrawingBoard: React.FC = () => {
 			canvas.backgroundColor = backgroundColor;
 		}
 	};
-	
+
 	return (
 		<Grid
 			container
@@ -176,7 +176,7 @@ const DrawingBoard: React.FC = () => {
 					<Grid
 						container
 						alignItems='center'
-						justifyContent='space-around'
+						// justifyContent='space-around'
 					>
 						{/* Tools: Palette */}
 						<Grid item>
@@ -234,13 +234,7 @@ const DrawingBoard: React.FC = () => {
 							>
 								<RedoIcon/>
 							</IconButton>
-							<IconButton
-								aria-label="Erase All"
-								onClick={handleEraseAll}
-								title="Erase All"
-							>
-								<DeleteIcon />
-							</IconButton>
+							<ErasingAllConfirmationButton handleEraseAll={handleEraseAll} />
 						</Grid>
 					</Grid>
 				</Grid>

src/components/drawing/ErasingAllConfirmationButton.tsx

@@ -0,0 +1,72 @@
+import React, { useEffect, useState } from 'react';
+import { Button, IconButton, Popover, Typography } from '@mui/material';
+import DeleteIcon from '@mui/icons-material/Delete';
+
+type ErasingAllConfirmationButtonProps = {
+	handleEraseAll: () => void;
+};
+
+const ErasingAllConfirmationButton: React.FC<ErasingAllConfirmationButtonProps> = (props) => {
+
+	const { handleEraseAll } = props;
+
+	const [ anchorEl, setAnchorEl ] = useState<HTMLButtonElement | null>(null);
+	const [ confirmed, setConfirmed ] = useState<boolean>(false);
+
+	const handleConfirm = (event: React.MouseEvent<HTMLButtonElement>) => {
+		setAnchorEl(event.currentTarget);
+	};
+
+	const handleConfirmed = () => {
+		setConfirmed(true);
+		setAnchorEl(null);
+	};
+
+	useEffect(() => {
+		if (confirmed) {
+			handleEraseAll();
+			setConfirmed(false);
+		}
+	}, [ confirmed ]);
+
+	const handleClose = () => {
+		setAnchorEl(null);
+	};
+
+	const open = Boolean(anchorEl);
+	const id = open ? 'simple-popover' : undefined;
+
+	return (
+		<div style={{ display: 'inline-block' }}>
+			<IconButton onClick={handleConfirm} aria-describedby={id}>
+				<DeleteIcon />
+			</IconButton>
+			<Popover
+				id={id}
+				open={open}
+				anchorEl={anchorEl}
+				onClose={handleClose}
+				anchorOrigin={{
+					vertical: 'top',
+					horizontal: 'center',
+				}}
+				transformOrigin={{
+					vertical: 'bottom',
+					horizontal: 'right',
+				}}
+			>
+				<Typography sx={{ p: 1 }}>
+					<Button
+						variant="contained"
+						color="warning"
+						onClick={handleConfirmed}
+					>
+						Confirm
+					</Button>
+				</Typography>
+			</Popover>
+		</div>
+	);
+};
+
+export default ErasingAllConfirmationButton;