109 lines
2.6 KiB
JavaScript
109 lines
2.6 KiB
JavaScript
import React, { useEffect, useMemo, useRef, useState } from "react";
|
|
import { useDispatch, useSelector } from "react-redux";
|
|
import {
|
|
closePopup,
|
|
openPopup,
|
|
togglePopup,
|
|
} from "../../slices/localVariablesSlice";
|
|
|
|
const HoverPopup = ({
|
|
id,
|
|
title,
|
|
content,
|
|
children,
|
|
className = "",
|
|
Mode = "hover",
|
|
}) => {
|
|
const dispatch = useDispatch();
|
|
const visible = useSelector((s) => s.localVariables.popups[id] || false);
|
|
|
|
const triggerRef = useRef(null);
|
|
const popupRef = useRef(null);
|
|
|
|
const handleMouseEnter = () => {
|
|
if (Mode === "hover") dispatch(openPopup(id));
|
|
};
|
|
|
|
const handleMouseLeave = () => {
|
|
if (Mode === "hover") dispatch(closePopup(id));
|
|
};
|
|
|
|
const handleClick = (e) => {
|
|
if (Mode === "click") {
|
|
e.stopPropagation();
|
|
dispatch(togglePopup(id));
|
|
}
|
|
};
|
|
|
|
useEffect(() => {
|
|
if (Mode !== "click" || !visible) return;
|
|
|
|
const handleOutside = (e) => {
|
|
if (
|
|
!popupRef.current?.contains(e.target) &&
|
|
!triggerRef.current?.contains(e.target)
|
|
) {
|
|
dispatch(closePopup(id));
|
|
}
|
|
};
|
|
document.addEventListener("click", handleOutside);
|
|
return () => document.removeEventListener("click", handleOutside);
|
|
}, [visible, Mode, id]);
|
|
|
|
useEffect(() => {
|
|
if (!visible || !popupRef.current) return;
|
|
|
|
const popup = popupRef.current;
|
|
const rect = popup.getBoundingClientRect();
|
|
|
|
popup.style.left = "50%";
|
|
popup.style.right = "auto";
|
|
popup.style.transform = "translateX(-50%)";
|
|
|
|
if (rect.right > window.innerWidth) {
|
|
popup.style.left = "auto";
|
|
popup.style.right = "0";
|
|
popup.style.transform = "none";
|
|
}
|
|
|
|
if (rect.left < 0) {
|
|
popup.style.left = "0";
|
|
popup.style.right = "auto";
|
|
popup.style.transform = "none";
|
|
}
|
|
}, [visible]);
|
|
|
|
return (
|
|
<div className="d-inline-block position-relative">
|
|
<div
|
|
ref={triggerRef}
|
|
onMouseEnter={handleMouseEnter}
|
|
onMouseLeave={handleMouseLeave}
|
|
onClick={handleClick}
|
|
style={{ cursor: "pointer" }}
|
|
>
|
|
{children}
|
|
</div>
|
|
|
|
{visible && (
|
|
<div
|
|
ref={popupRef}
|
|
className={`bg-white border rounded shadow-sm p-3 w-max position-absolute top-100 mt-2 ${className}`}
|
|
style={{
|
|
zIndex: 2000,
|
|
left: "50%",
|
|
transform: "translateX(-50%)",
|
|
}}
|
|
onClick={(e) => e.stopPropagation()}
|
|
>
|
|
{title && <h6 className="fw-semibold mb-2">{title}</h6>}
|
|
|
|
<div>{content}</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default HoverPopup;
|