@jackiemacklein/nettz-utils
Version:
Serviços de imagem, e-mail, códigos de barras, utilitários numéricos e componentes React para apps Node.js com TypeScript
103 lines (102 loc) • 4.68 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.PopoverBody = exports.PopoverHeader = exports.Popover = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
require("./Popover.css");
const Popover = ({ isOpen, onToggle, target, children, placement = "bottom", className = "" }) => {
const [position, setPosition] = (0, react_1.useState)({ top: 0, left: 0 });
const popoverRef = (0, react_1.useRef)(null);
(0, react_1.useEffect)(() => {
if (isOpen) {
const targetElement = document.getElementById(target);
if (targetElement && popoverRef.current) {
const targetRect = targetElement.getBoundingClientRect();
const popoverRect = popoverRef.current.getBoundingClientRect();
let top = 0;
let left = 0;
console.log(targetRect.bottom, targetRect.left, targetRect.top, targetRect.right);
console.log(popoverRect.height, popoverRect.width);
switch (placement) {
case "bottom":
top = targetRect.bottom + window.scrollY + 8;
left = targetRect.left + window.scrollX;
break;
case "top":
top = targetRect.top + window.scrollY - popoverRect.height - 8;
left = targetRect.left + window.scrollX;
break;
case "left":
top = targetRect.top + window.scrollY;
left = targetRect.left + window.scrollX - popoverRect.width - 8;
break;
case "right":
top = targetRect.top + window.scrollY;
left = targetRect.right + window.scrollX + 8;
break;
default:
top = targetRect.bottom + window.scrollY + 8;
left = targetRect.left + window.scrollX;
break;
}
// Ajustar posição para evitar que saia da tela
const viewportWidth = window.innerWidth;
const viewportHeight = window.innerHeight;
// Ajustar horizontalmente
if (left + popoverRect.width > viewportWidth) {
left = viewportWidth - popoverRect.width - 8;
}
if (left < 8) {
left = 8;
}
// Ajustar verticalmente
if (top + popoverRect.height > viewportHeight) {
// Se não couber embaixo, tenta colocar em cima
if (targetRect.top - popoverRect.height > 8) {
top = targetRect.top - popoverRect.height - 8;
}
else {
top = viewportHeight - popoverRect.height - 8;
}
}
if (top < 8) {
top = 8;
}
setPosition({ top, left });
}
}
}, [isOpen, target, placement]);
(0, react_1.useEffect)(() => {
const handleClickOutside = (event) => {
if (popoverRef.current && !popoverRef.current.contains(event.target)) {
const targetElement = document.getElementById(target);
if (targetElement && !targetElement.contains(event.target)) {
onToggle();
}
}
};
if (isOpen) {
document.addEventListener("mousedown", handleClickOutside);
}
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [isOpen, target, onToggle]);
if (!isOpen)
return null;
return ((0, jsx_runtime_1.jsx)("div", { ref: popoverRef, className: `nettz-popover nettz-popover-${placement} ${className}`, style: {
position: "fixed",
top: `${position.top}px`,
left: `${position.left}px`,
zIndex: 1050,
}, children: children }));
};
exports.Popover = Popover;
const PopoverHeader = ({ children, className = "" }) => {
return (0, jsx_runtime_1.jsx)("div", { className: `nettz-popover-header ${className}`, children: children });
};
exports.PopoverHeader = PopoverHeader;
const PopoverBody = ({ children, className = "" }) => {
return (0, jsx_runtime_1.jsx)("div", { className: `nettz-popover-body ${className}`, children: children });
};
exports.PopoverBody = PopoverBody;