infinity-forge
Version:
132 lines • 6.51 kB
JavaScript
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.useToolTip = useToolTip;
var react_1 = require("react");
function useToolTip(position, rest) {
var _a = (0, react_1.useState)(false), isOpen = _a[0], setIsOpen = _a[1];
var _b = (0, react_1.useState)({}), tooltipStyle = _b[0], setTooltipStyle = _b[1];
var toolTipRef = (0, react_1.useRef)(null);
var contentRef = (0, react_1.useRef)(null);
var handleToggle = (0, react_1.useCallback)(function (state) {
setIsOpen(function (prev) { return (typeof state === 'boolean' ? state : !prev); });
}, [isOpen]);
function closeToolTip() {
setTimeout(function () { return setIsOpen(false); }, 0);
}
function handleClickOutside(event) {
var _a;
var target = event.target;
if (!target.hasAttribute('isToolTip') && !((_a = toolTipRef === null || toolTipRef === void 0 ? void 0 : toolTipRef.current) === null || _a === void 0 ? void 0 : _a.contains(target))) {
setIsOpen(false);
}
}
function updateTooltipStyle() {
if (toolTipRef.current && contentRef.current) {
var triggerRect = toolTipRef.current.getBoundingClientRect();
var contentRect = contentRef.current.getBoundingClientRect();
if (triggerRect && contentRect) {
var triggerStyle = getComputedStyle(toolTipRef.current);
var marginTop = parseInt(triggerStyle.marginTop || '0', 10);
var marginLeft = parseInt(triggerStyle.marginLeft || '0', 10);
var positions = {
'top-left': {
top: triggerRect.top - contentRect.height - 8 - marginTop,
left: triggerRect.left - marginLeft,
},
'top-center': {
top: triggerRect.top - contentRect.height - 8 - marginTop,
left: triggerRect.left + (triggerRect.width - contentRect.width) / 2 - marginLeft,
},
'top-right': {
top: triggerRect.top - contentRect.height - 8 - marginTop,
left: triggerRect.left + triggerRect.width - contentRect.width - marginLeft,
},
'left-center': {
top: triggerRect.top + (triggerRect.height - contentRect.height) / 2 - marginTop,
left: triggerRect.left - contentRect.width - 8 - marginLeft,
},
'right-center': {
top: triggerRect.top + (triggerRect.height - contentRect.height) / 2 - marginTop,
left: triggerRect.left + triggerRect.width + 8 - marginLeft,
},
'bottom-left': {
top: triggerRect.top + triggerRect.height + 8 - marginTop,
left: triggerRect.left - marginLeft,
},
'bottom-center': {
top: triggerRect.top + triggerRect.height + 8 - marginTop,
left: triggerRect.left + (triggerRect.width - contentRect.width) / 2 - marginLeft,
},
'bottom-right': {
top: triggerRect.top + triggerRect.height + 8 - marginTop,
left: triggerRect.left + triggerRect.width - contentRect.width - marginLeft,
},
auto: {
top: triggerRect.top + triggerRect.height + 8 - marginTop,
left: triggerRect.left + triggerRect.width - contentRect.width - marginLeft,
},
};
var _a = positions[position] || positions.auto, top_1 = _a.top, left = _a.left;
var windowHeight = window.innerHeight;
var windowWidth = window.innerWidth;
// Ajuste para levar em consideração o scroll
var offsetTop = triggerRect.top + window.scrollY;
var offsetLeft = triggerRect.left + window.scrollX;
// Verifica se o tooltip ultrapassa os limites da tela e ajusta a posição
if (top_1 < 0) {
top_1 = offsetTop + triggerRect.height + 8; // Ajusta para baixo
}
if (top_1 + contentRect.height > windowHeight) {
top_1 = offsetTop - contentRect.height - 8; // Ajusta para cima
}
if (left < 0) {
left = offsetLeft + triggerRect.width + 8; // Ajusta para a direita
}
if (left + contentRect.width > windowWidth) {
left = offsetLeft - contentRect.width - 8; // Ajusta para a esquerda
}
setTooltipStyle(__assign({ top: "".concat(top_1, "px"), left: "".concat(left, "px"), position: 'fixed', zIndex: 99999999999 }, rest.style));
}
}
}
(0, react_1.useEffect)(function () {
document.addEventListener('click', handleClickOutside);
window.addEventListener('scroll', updateTooltipStyle, true);
window.addEventListener('resize', updateTooltipStyle);
return function () {
document.removeEventListener('click', handleClickOutside);
window.removeEventListener('scroll', updateTooltipStyle, true);
window.removeEventListener('resize', updateTooltipStyle);
};
}, []);
(0, react_1.useEffect)(function () {
if (isOpen) {
if (contentRef.current) {
contentRef.current.removeEventListener('click', handleClickOutside);
}
}
}, [isOpen]);
(0, react_1.useEffect)(function () {
updateTooltipStyle();
}, [isOpen]);
return {
isOpen: isOpen,
contentRef: contentRef,
toolTipRef: toolTipRef,
tooltipStyle: tooltipStyle,
closeToolTip: closeToolTip,
handleToggle: handleToggle,
};
}
//# sourceMappingURL=use-tool-tip.js.map