@grandlinex/react-components
Version:
91 lines (90 loc) • 3.86 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
const react_dom_1 = require("react-dom");
const util_1 = require("../../util");
const Tooltip = (props) => {
const ui = (0, util_1.useUIContext)();
const { preLine, children, text, width, position, className } = props;
const nPos = position ?? 'bottom';
const nPosClass = `glx-tooltip-content-${nPos}`;
const [open, setOpen] = (0, react_1.useState)(false);
const [left, setLeft] = (0, react_1.useState)(0);
const [top, setTop] = (0, react_1.useState)(0);
const chRef = (0, react_1.createRef)();
const tRef = (0, react_1.createRef)();
return (react_1.default.createElement("span", { className: (0, util_1.cnx)('glx-tooltip-container', className), onMouseEnter: () => {
setOpen(true);
}, onMouseMove: (el) => {
const ch = tRef.current?.clientHeight || 0;
const cw = tRef.current?.clientWidth || 0;
let nTop = 0;
let nLeft = 0;
switch (position) {
case 'top':
nTop = el.clientY - 15 - ch;
nLeft = el.clientX - cw / 2;
break;
case 'bottom':
nTop = el.clientY + 10;
nLeft = el.clientX - cw / 2;
break;
case 'left':
nTop = el.clientY - ch / 2;
nLeft = el.clientX - 10 - cw;
break;
case 'right':
default:
nTop = el.clientY - ch / 2;
nLeft = el.clientX + 10;
break;
}
if (nTop + ch >= window.innerHeight) {
nTop = window.innerHeight - ch - 2;
}
if (nTop <= 0) {
nTop = 2;
}
if (nLeft + cw >= window.innerWidth) {
nLeft = window.innerWidth - cw - 4;
}
if (nLeft <= 0) {
nLeft = 2;
}
setLeft(nLeft);
setTop(nTop);
}, onMouseLeave: () => setOpen(false) },
react_1.default.createElement("span", { ref: chRef, className: "glx-tooltip-children" }, children),
text && !ui.tooltipDisabled
? (0, react_dom_1.createPortal)(react_1.default.createElement("div", { ref: tRef, style: {
left: `${left}px`,
top: `${top}px`,
display: open ? 'block' : 'none',
width,
}, className: (0, util_1.cnx)(`glx-tooltip-content glx-fade-in-fast`, nPosClass, [!!preLine, 'glx-tooltip--pre-line']) }, text), ui.portalRoot)
: null));
};
exports.default = Tooltip;