144 lines
3.7 KiB
JavaScript
144 lines
3.7 KiB
JavaScript
import React, { useEffect, useRef } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
closePopup,
|
|
openPopup,
|
|
togglePopup,
|
|
} from "../../slices/localVariablesSlice";
|
|
|
|
const HoverPopup = ({
|
|
id,
|
|
title,
|
|
content,
|
|
children,
|
|
className = "",
|
|
Mode = "hover",
|
|
align = "auto", // <-- dynamic placement
|
|
minWidth = "250px",
|
|
maxWidth = "350px",
|
|
boundaryRef = null,
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const visible = useSelector((s) => s.localVariables.popups[id] || false);
|
|
|
|
const triggerRef = useRef(null);
|
|
const popupRef = useRef(null);
|
|
|
|
const handleMouseEnter = () => Mode === "hover" && dispatch(openPopup(id));
|
|
const handleMouseLeave = () => Mode === "hover" && dispatch(closePopup(id));
|
|
const handleClick = (e) => {
|
|
if (Mode !== "click") return;
|
|
e.stopPropagation();
|
|
dispatch(togglePopup(id));
|
|
};
|
|
|
|
// Close popup when clicking outside (click mode)
|
|
useEffect(() => {
|
|
if (Mode !== "click" || !visible) return;
|
|
|
|
const handler = (e) => {
|
|
if (
|
|
popupRef.current &&
|
|
!popupRef.current.contains(e.target) &&
|
|
triggerRef.current &&
|
|
!triggerRef.current.contains(e.target)
|
|
) {
|
|
dispatch(closePopup(id));
|
|
}
|
|
};
|
|
|
|
document.addEventListener("click", handler);
|
|
return () => document.removeEventListener("click", handler);
|
|
}, [visible, Mode, id, dispatch]);
|
|
|
|
// ---------- DYNAMIC POSITIONING LOGIC ----------
|
|
useEffect(() => {
|
|
if (!visible || !popupRef.current || !triggerRef.current) return;
|
|
|
|
requestAnimationFrame(() => {
|
|
const popup = popupRef.current;
|
|
const trigger = triggerRef.current;
|
|
|
|
const boundaryEl =
|
|
(boundaryRef && boundaryRef.current) || popup.parentElement;
|
|
|
|
const boundaryRect = boundaryEl.getBoundingClientRect();
|
|
const triggerRect = trigger.getBoundingClientRect();
|
|
const popupRect = popup.getBoundingClientRect();
|
|
|
|
let left;
|
|
|
|
// AUTO ALIGN (smart)
|
|
if (align === "auto") {
|
|
const center =
|
|
triggerRect.left +
|
|
triggerRect.width / 2 -
|
|
boundaryRect.left -
|
|
popupRect.width / 2;
|
|
|
|
left = Math.max(
|
|
0,
|
|
Math.min(center, boundaryRect.width - popupRect.width)
|
|
);
|
|
}
|
|
|
|
// LEFT ALIGN
|
|
else if (align === "left") {
|
|
left = triggerRect.left - boundaryRect.left;
|
|
if (left + popupRect.width > boundaryRect.width) {
|
|
left = boundaryRect.width - popupRect.width; // clamp right
|
|
}
|
|
}
|
|
|
|
// RIGHT ALIGN
|
|
else if (align === "right") {
|
|
left =
|
|
triggerRect.left +
|
|
triggerRect.width -
|
|
boundaryRect.left -
|
|
popupRect.width;
|
|
|
|
if (left < 0) left = 0; // clamp left
|
|
}
|
|
|
|
popup.style.left = `${left}px`;
|
|
popup.style.top = `100%`;
|
|
});
|
|
}, [visible, align, boundaryRef]);
|
|
|
|
// ------------------------------------------------
|
|
|
|
return (
|
|
<div className="d-inline-block position-relative" style={{ overflow: "visible" }}>
|
|
<div
|
|
ref={triggerRef}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
onClick={handleClick}
|
|
style={{ cursor: "pointer", display: "inline-block" }}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{visible && (
|
|
<div
|
|
ref={popupRef}
|
|
className={`hover-popup bg-white border rounded shadow-sm p-3 position-absolute mt-2 ${className}`}
|
|
style={{
|
|
zIndex: 2000,
|
|
minWidth,
|
|
maxWidth,
|
|
wordWrap: "break-word",
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
|
{content}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HoverPopup;
|