next-helios-fe 1.8.52 → 1.8.53

package/src/components/tooltip/index.tsx

@@ -1,24 +1,220 @@
 "use client";
-import React from "react";
-import { Tooltip as Tt } from "react-tooltip";
+import React, { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
 
 interface TooltipProps {
-  id: string;
-  content: React.ReactNode;
+  children: React.ReactNode;
+  content: string | React.ReactNode;
+  options?: {
+    position?: "left" | "right" | "top" | "bottom";
+  };
 }
 
-export const Tooltip: React.FC<TooltipProps> = ({ id, content }) => {
+export const Tooltip: React.FC<TooltipProps> = ({ children, content, options }) => {
+  const [visible, setVisible] = useState(false);
+  const [position, setPosition] = useState(options?.position ?? "right");
+  const tooltipRef = useRef<HTMLDivElement | null>(null);
+  const wrapperRef = useRef<HTMLDivElement | null>(null);
+  const [wrapperComponent, setWrapperComponent] = useState<DOMRect | null>(
+    null
+  );
+  const [tooltipComponent, setTooltipComponent] = useState<DOMRect | null>(
+    null
+  );
+
+  useEffect(() => {
+    setPosition(options?.position ?? "right");
+  }, [options?.position]);
+
+  useEffect(() => {
+    const handlePosition = () => {
+      if (!wrapperRef.current || !tooltipRef.current) return;
+
+      const tooltipRect = tooltipRef.current.getBoundingClientRect();
+
+      if (tooltipRect.right > window.innerWidth) {
+        setPosition("left");
+      } else if (tooltipRect.left < 0) {
+        setPosition("right");
+      } else if (tooltipRect.bottom > window.innerHeight) {
+        setPosition("top");
+      } else if (tooltipRect.top < 0) {
+        setPosition("bottom");
+      }
+    };
+
+    if (visible) {
+      handlePosition();
+      window.addEventListener("resize", handlePosition);
+    }
+
+    return () => {
+      window.removeEventListener("resize", handlePosition);
+    };
+  }, [visible, content]);
+
+  useEffect(() => {
+    let animationFrameId: number;
+
+    const updatePosition = () => {
+      if (!wrapperRef.current || !tooltipRef.current) return;
+
+      setWrapperComponent(wrapperRef.current.getBoundingClientRect());
+      setTooltipComponent(tooltipRef.current.getBoundingClientRect());
+
+      animationFrameId = requestAnimationFrame(updatePosition);
+    };
+
+    animationFrameId = requestAnimationFrame(updatePosition);
+
+    return () => {
+      cancelAnimationFrame(animationFrameId);
+    };
+  }, [visible]);
+
+  const getTooltipPosition = () => {
+    if (wrapperComponent && tooltipComponent) {
+      switch (position) {
+        case "left":
+          return {
+            top:
+              wrapperComponent.top +
+              wrapperComponent.height / 2 -
+              tooltipComponent.height / 2,
+            left: wrapperComponent.left - tooltipComponent.width,
+          };
+        case "right":
+          return {
+            top:
+              wrapperComponent.top +
+              wrapperComponent.height / 2 -
+              tooltipComponent.height / 2,
+            left: wrapperComponent.right,
+          };
+        case "top":
+          return {
+            top: wrapperComponent.top - tooltipComponent.height,
+            left:
+              wrapperComponent.left +
+              wrapperComponent.width / 2 -
+              tooltipComponent.width / 2,
+          };
+        case "bottom":
+          return {
+            top: wrapperComponent.bottom,
+            left:
+              wrapperComponent.left +
+              wrapperComponent.width / 2 -
+              tooltipComponent.width / 2,
+          };
+        default:
+          return {
+            top:
+              wrapperComponent.top +
+              wrapperComponent.height / 2 -
+              tooltipComponent.height / 2,
+            left: wrapperComponent.right,
+          };
+      }
+    }
+  };
+
+  const getTooltipArrowPosition = () => {
+    if (wrapperComponent && tooltipComponent) {
+      switch (position) {
+        case "left":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent transparent transparent black",
+            opacity: "0.75",
+          };
+        case "right":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent black transparent transparent",
+            opacity: "0.75",
+          };
+        case "top":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "black transparent transparent transparent",
+            opacity: "0.75",
+          };
+        case "bottom":
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent transparent black transparent",
+            opacity: "0.75",
+          };
+        default:
+          return {
+            width: "0px",
+            height: "0px",
+            borderStyle: "solid",
+            borderWidth: "6px",
+            borderColor: "transparent black transparent transparent",
+            opacity: "0.75",
+          };
+      }
+    }
+  };
+
   return (
-    <Tt
-      anchorSelect={`#${id}`}
-      style={{
-        maxWidth: "16rem",
-        zIndex: 999,
-        borderRadius: "0.375rem",
-        backgroundColor: "rgba(26,26,26,0.3)",
-      }}
-      positionStrategy="fixed"
-      render={() => content}
-    />
+    <div
+      className="relative inline-block"
+      ref={wrapperRef}
+      onMouseEnter={() => setVisible(true)}
+      onMouseLeave={() => setVisible(false)}
+    >
+      {children}
+      {createPortal(
+        <div
+          ref={tooltipRef}
+          className={`absolute z-50 duration-200 transition-opacity ${
+            visible ? "opacity-100" : "opacity-0 pointer-events-none"
+          }`}
+          style={getTooltipPosition()}
+        >
+          {position === "bottom" && (
+            <div className="flex justify-center">
+              <div style={getTooltipArrowPosition()}></div>
+            </div>
+          )}
+          <div className="flex items-center">
+            {position === "right" && (
+              <div className="flex justify-center">
+                <div style={getTooltipArrowPosition()}></div>
+              </div>
+            )}
+            <div className="max-w-96 w-fit px-3 py-1.5 rounded-md bg-black/75 text-sm text-white">
+              {content}
+            </div>
+            {position === "left" && (
+              <div className="flex justify-center">
+                <div style={getTooltipArrowPosition()}></div>
+              </div>
+            )}
+          </div>
+          {position === "top" && (
+            <div className="flex justify-center">
+              <div style={getTooltipArrowPosition()}></div>
+            </div>
+          )}
+        </div>,
+        document.body
+      )}
+    </div>
   );
 };