From 2ce0c587e817e12178109789fae6a1890f35ffcb Mon Sep 17 00:00:00 2001
From: Josh Hawkins <32435876+hawkeye217@users.noreply.github.com>
Date: Thu, 18 Apr 2024 18:12:40 -0500
Subject: [PATCH] fix tooltip trigger for icons

---
 web/src/components/settings/PolygonItem.tsx | 90 ++++++++++-----------
 web/src/components/ui/icon-wrapper.tsx      | 21 +++++
 2 files changed, 62 insertions(+), 49 deletions(-)
 create mode 100644 web/src/components/ui/icon-wrapper.tsx

diff --git a/web/src/components/settings/PolygonItem.tsx b/web/src/components/settings/PolygonItem.tsx
index b0b402064..9d8972341 100644
--- a/web/src/components/settings/PolygonItem.tsx
+++ b/web/src/components/settings/PolygonItem.tsx
@@ -33,6 +33,7 @@ import { toast } from "sonner";
 import useSWR from "swr";
 import { FrigateConfig } from "@/types/frigateConfig";
 import { reviewQueries } from "@/utils/zoneEdutUtil";
+import IconWrapper from "../ui/icon-wrapper";
 
 type PolygonItemProps = {
   polygon: Polygon;
@@ -285,55 +286,46 @@ export default function PolygonItem({
         )}
         {!isMobile && hoveredPolygonIndex === index && (
           <div className="flex flex-row gap-2 items-center">
-            <div
-              className="cursor-pointer"
-              onClick={() => {
-                setActivePolygonIndex(index);
-                setEditPane(polygon.type);
-              }}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <LuPencil
-                    className={`size-[15px] ${
-                      hoveredPolygonIndex === index && "text-primary-variant"
-                    }`}
-                  />
-                </TooltipTrigger>
-                <TooltipContent>Edit</TooltipContent>
-              </Tooltip>
-            </div>
-            <div
-              className="cursor-pointer"
-              onClick={() => handleCopyCoordinates(index)}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <LuCopy
-                    className={`size-[15px] ${
-                      hoveredPolygonIndex === index && "text-primary-variant"
-                    }`}
-                  />
-                </TooltipTrigger>
-                <TooltipContent>Copy coordinates</TooltipContent>
-              </Tooltip>
-            </div>
-            <div
-              className="cursor-pointer"
-              onClick={() => !isLoading && setDeleteDialogOpen(true)}
-            >
-              <Tooltip>
-                <TooltipTrigger asChild>
-                  <HiTrash
-                    className={`size-[15px] ${
-                      hoveredPolygonIndex === index &&
-                      "text-primary-variant fill-primary-variant"
-                    }`}
-                  />
-                </TooltipTrigger>
-                <TooltipContent>Delete</TooltipContent>
-              </Tooltip>
-            </div>
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={LuPencil}
+                  className={`size-[15px] cursor-pointer ${hoveredPolygonIndex === index && "text-primary-variant"}`}
+                  onClick={() => {
+                    setActivePolygonIndex(index);
+                    setEditPane(polygon.type);
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Edit</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={LuCopy}
+                  className={`size-[15px] cursor-pointer ${
+                    hoveredPolygonIndex === index && "text-primary-variant"
+                  }`}
+                  onClick={() => handleCopyCoordinates(index)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Copy coordinates</TooltipContent>
+            </Tooltip>
+
+            <Tooltip>
+              <TooltipTrigger asChild>
+                <IconWrapper
+                  icon={HiTrash}
+                  className={`size-[15px] cursor-pointer ${
+                    hoveredPolygonIndex === index &&
+                    "text-primary-variant fill-primary-variant"
+                  }`}
+                  onClick={() => !isLoading && setDeleteDialogOpen(true)}
+                />
+              </TooltipTrigger>
+              <TooltipContent>Delete</TooltipContent>
+            </Tooltip>
           </div>
         )}
       </div>
diff --git a/web/src/components/ui/icon-wrapper.tsx b/web/src/components/ui/icon-wrapper.tsx
new file mode 100644
index 000000000..f87d18c62
--- /dev/null
+++ b/web/src/components/ui/icon-wrapper.tsx
@@ -0,0 +1,21 @@
+import { ForwardedRef, forwardRef } from "react";
+import { IconType } from "react-icons";
+
+interface IconWrapperProps {
+  icon: IconType;
+  className?: string;
+  [key: string]: any;
+}
+
+const IconWrapper = forwardRef(
+  (
+    { icon: Icon, className, ...props }: IconWrapperProps,
+    ref: ForwardedRef<HTMLDivElement>,
+  ) => (
+    <div {...props} ref={ref}>
+      <Icon className={className} />
+    </div>
+  ),
+);
+
+export default IconWrapper;