Add confirm dialog to erase all drawings

src/components/controls/DrawingToolSettings.tsx

@@ -1,5 +1,5 @@
 import { useEffect } from "react";
-import { Flex, IconButton } from "theme-ui";
+import { Flex } from "theme-ui";
 import { useMedia } from "react-media";
 
 import RadioIconButton from "../RadioIconButton";
@@ -15,7 +15,6 @@ import BrushLineIcon from "../../icons/BrushLineIcon";
 import BrushRectangleIcon from "../../icons/BrushRectangleIcon";
 import BrushCircleIcon from "../../icons/BrushCircleIcon";
 import BrushTriangleIcon from "../../icons/BrushTriangleIcon";
-import EraseAllIcon from "../../icons/EraseAllIcon";
 import EraseIcon from "../../icons/EraseToolIcon";
 
 import Divider from "../Divider";
@@ -28,6 +27,7 @@ import {
   DrawingToolSettings as DrawingToolSettingsType,
   DrawingToolType,
 } from "../../types/Drawing";
+import EraseAllButton from "./shared/EraseAllButton";
 
 type DrawingToolSettingsProps = {
   settings: DrawingToolSettingsType;
@@ -138,14 +138,10 @@ function DrawingToolSettings({
       >
         <EraseIcon />
       </RadioIconButton>
-      <IconButton
-        aria-label="Erase All"
-        title="Erase All"
-        onClick={() => onToolAction("eraseAll")}
+      <EraseAllButton
+        onToolAction={onToolAction}
         disabled={disabledActions.includes("erase")}
-      >
-        <EraseAllIcon />
-      </IconButton>
+      />
       <Divider vertical />
       <AlphaBlendToggle
         useBlending={settings.useBlending}

src/components/controls/shared/EraseAllButton.tsx

@@ -0,0 +1,59 @@
+import { useEffect, useRef, useState } from "react";
+import { Button, IconButton } from "theme-ui";
+
+import EraseAllIcon from "../../../icons/EraseAllIcon";
+import MapMenu from "../../map/MapMenu";
+
+type EraseAllButtonProps = {
+  onToolAction: (action: string) => void;
+  disabled: boolean;
+};
+
+function EraseAllButton({ onToolAction, disabled }: EraseAllButtonProps) {
+  const [isEraseAllConfirmOpen, setIsEraseAllConfirmOpen] = useState(false);
+
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const [menuLeft, setMenuLeft] = useState(0);
+  const [menuTop, setMenuTop] = useState(0);
+  useEffect(() => {
+    const button = buttonRef.current;
+    if (isEraseAllConfirmOpen && button) {
+      const rect = button.getBoundingClientRect();
+      setMenuLeft(rect.left + rect.width / 2);
+      setMenuTop(rect.bottom + 8);
+    }
+  }, [isEraseAllConfirmOpen]);
+
+  return (
+    <>
+      <IconButton
+        aria-label="Erase All"
+        title="Erase All"
+        onClick={() => setIsEraseAllConfirmOpen(true)}
+        disabled={disabled}
+        ref={buttonRef}
+      >
+        <EraseAllIcon />
+      </IconButton>
+      <MapMenu
+        isOpen={isEraseAllConfirmOpen}
+        onRequestClose={() => setIsEraseAllConfirmOpen(false)}
+        left={menuLeft}
+        top={menuTop}
+        style={{ transform: "translateX(-50%)" }}
+      >
+        <Button
+          disabled={disabled}
+          onClick={() => {
+            setIsEraseAllConfirmOpen(false);
+            onToolAction("eraseAll");
+          }}
+        >
+          Erase All
+        </Button>
+      </MapMenu>
+    </>
+  );
+}
+
+export default EraseAllButton;