phx-react
Version:
PHX REACT
101 lines • 6.43 kB
JavaScript
import { __assign } from "tslib";
import React, { useRef, useState, useEffect } from 'react';
var PHXTooltip = function (_a) {
var children = _a.children, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.contentClassName, contentClassName = _c === void 0 ? '' : _c, content = _a.content, _d = _a.underLine, underLine = _d === void 0 ? false : _d;
var contentRef = useRef(null);
var titleRef = useRef(null);
var _e = useState({
top: 0,
left: 0,
width: 0,
height: 0,
pos: 'top',
show: false
}), contentProps = _e[0], setContentProps = _e[1];
var getOverflowDirections = function (_a) {
var height = _a.height, left = _a.left, top = _a.top, width = _a.width;
var viewportWidth = window.innerWidth;
var viewportHeight = window.innerHeight;
return {
isOverFlowTop: top < 0,
isOverFlowLeft: left < 10,
isOverFlowBottom: top + height > viewportHeight,
isOverFlowRight: left + width > viewportWidth - 10
};
};
var calculateTooltipPosition = function () {
if (!contentRef.current || !titleRef.current)
return;
var titleBounding = titleRef.current.getBoundingClientRect();
var contentBounding = contentRef.current.getBoundingClientRect();
var titleTop = titleBounding.top;
var titleLeft = titleBounding.left;
var titleWidth = titleBounding.width;
var titleHeight = titleBounding.height;
var newProps = {
width: contentBounding.width,
height: contentBounding.height,
top: titleTop - contentBounding.height - 10,
left: titleLeft - contentBounding.width / 2 + titleWidth / 2,
pos: 'top'
};
var _a = getOverflowDirections(newProps), isOverFlowLeft = _a.isOverFlowLeft, isOverFlowRight = _a.isOverFlowRight;
if (isOverFlowLeft) {
newProps = {
width: contentBounding.width,
height: contentBounding.height,
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
left: titleLeft + titleWidth + 20,
pos: 'right'
};
}
else if (isOverFlowRight) {
newProps = {
width: contentBounding.width,
height: contentBounding.height,
top: titleTop - contentBounding.height / 2 + titleHeight / 2,
left: titleLeft - contentBounding.width - 20,
pos: 'left'
};
}
setContentProps(function (prev) { return (__assign(__assign({}, prev), newProps)); });
};
var handleMouseEnter = function () {
setContentProps(function (prev) { return (__assign(__assign({}, prev), { show: true })); });
calculateTooltipPosition();
};
var handleMouseLeave = function () {
setContentProps(function (prev) { return (__assign(__assign({}, prev), { show: false })); });
};
useEffect(function () {
var animationFrameId;
var updatePosition = function () {
if (contentProps.show) {
calculateTooltipPosition();
animationFrameId = requestAnimationFrame(updatePosition);
}
};
updatePosition();
return function () {
cancelAnimationFrame(animationFrameId);
};
}, [contentProps.show]);
return (React.createElement("div", { className: "relative w-fit text-xs font-normal text-gray-600 ".concat(underLine && 'border-b-2 border-dotted border-[#B5B5B5] pb-[1px]', " ").concat(className), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave },
content && (React.createElement("div", { className: "fixed z-10 mb-2 flex transform flex-col items-center justify-center drop-shadow-md transition-opacity duration-200 ".concat(contentProps.show ? 'visible opacity-100' : 'invisible opacity-0', " ").concat(contentClassName), style: {
top: contentProps.top,
left: contentProps.left
} },
React.createElement("p", { ref: contentRef, className: 'max-w-[18rem] whitespace-pre-wrap rounded-lg border-[1px] border-gray-300 bg-white p-2 text-center text-gray-800' }, content),
contentProps.pos === 'top' && (React.createElement("svg", { className: 'absolute -bottom-[10px] rotate-180', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
contentProps.pos === 'left' && (React.createElement("svg", { className: 'absolute -right-[12px] rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))),
contentProps.pos === 'right' && (React.createElement("svg", { className: 'absolute -left-[12px] -rotate-90', fill: 'none', height: '16', viewBox: '0 0 20 16', width: '20', xmlns: 'http://www.w3.org/2000/svg' },
React.createElement("path", { d: 'M10.6082 1.2699L17.3135 10.5611C17.6715 11.0571 17.3171 11.75 16.7053 11.75H3.29465C2.68295 11.75 2.32852 11.0571 2.68649 10.5611L9.39184 1.2699C9.69119 0.855102 10.3088 0.855102 10.6082 1.2699Z', fill: 'white', stroke: '#D1D5DB', strokeWidth: '1' }),
React.createElement("rect", { fill: 'white', height: '3', rx: '1.5', width: '16', x: '2', y: '10' }))))),
React.createElement("div", { ref: titleRef, className: ' cursor-pointer ' }, children)));
};
export default PHXTooltip;
//# sourceMappingURL=ToolTip.js.map