infinity-forge
Version:
146 lines • 7.32 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_1 = contentRef.current.getBoundingClientRect();
if (triggerRect && contentRect_1) {
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_1.height - 8 - marginTop,
left: triggerRect.left - marginLeft,
},
'top-center': {
top: triggerRect.top - contentRect_1.height - 8 - marginTop,
left: triggerRect.left + (triggerRect.width - contentRect_1.width) / 2 - marginLeft,
},
'top-right': {
top: triggerRect.top - contentRect_1.height - 8 - marginTop,
left: triggerRect.left + triggerRect.width - contentRect_1.width - marginLeft,
},
'left-center': {
top: triggerRect.top + (triggerRect.height - contentRect_1.height) / 2 - marginTop,
left: triggerRect.left - contentRect_1.width - 8 - marginLeft,
},
'right-center': {
top: triggerRect.top + (triggerRect.height - contentRect_1.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_1.width) / 2 - marginLeft,
},
'bottom-right': {
top: triggerRect.top + triggerRect.height + 8 - marginTop,
left: triggerRect.left + triggerRect.width - contentRect_1.width - marginLeft,
},
auto: {
top: triggerRect.top + triggerRect.height + 8 - marginTop,
left: triggerRect.left + triggerRect.width - contentRect_1.width - marginLeft,
},
};
var _a = positions[position] || positions.auto, top_1 = _a.top, left = _a.left;
var windowHeight_1 = window.innerHeight;
var windowWidth_1 = window.innerWidth;
var fitsInViewport = function (t, l) {
return t >= 8 && l >= 8 && t + contentRect_1.height <= windowHeight_1 - 8 && l + contentRect_1.width <= windowWidth_1 - 8;
};
if (!fitsInViewport(top_1, left)) {
var oppositePositions = {
'top-left': 'bottom-left',
'top-center': 'bottom-center',
'top-right': 'bottom-right',
'bottom-left': 'top-left',
'bottom-center': 'top-center',
'bottom-right': 'top-right',
'left-center': 'right-center',
'right-center': 'left-center',
};
var flippedPosition = oppositePositions[position] || 'bottom-center';
var flipped = positions[flippedPosition] || positions.auto;
var flippedTop = flipped.top;
var flippedLeft = flipped.left;
// Ajusta para não sair da tela (viewport)
if (flippedTop < 8)
flippedTop = 8;
if (flippedTop + contentRect_1.height > windowHeight_1 - 8)
flippedTop = windowHeight_1 - contentRect_1.height - 8;
if (flippedLeft < 8)
flippedLeft = 8;
if (flippedLeft + contentRect_1.width > windowWidth_1 - 8)
flippedLeft = windowWidth_1 - contentRect_1.width - 8;
top_1 = flippedTop;
left = flippedLeft;
}
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