@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
91 lines (90 loc) • 3.19 kB
JavaScript
"use client";
import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import { makeUniqueId } from '../../shared/component-helper';
import useMountEffect from '../../shared/helpers/useMountEffect';
import TooltipContainer from './TooltipContainer';
import { useTheme } from '../../shared';
import { getThemeClasses } from '../../shared/Theme';
import PortalRoot from '../PortalRoot';
import ModalContext from '../modal/ModalContext';
let tooltipPortal;
if (typeof globalThis !== 'undefined') {
globalThis.tooltipPortal = globalThis.tooltipPortal || {};
tooltipPortal = globalThis.tooltipPortal;
} else {
tooltipPortal = {};
}
function TooltipPortal(props) {
const {
active,
targetElement,
hideDelay,
keepInDOM,
noAnimation,
children
} = props;
const modalContext = useContext(ModalContext);
const [isMounted, setIsMounted] = useState(false);
const [isActive, setIsActive] = useState(active);
const [id] = useState(() => makeUniqueId());
const isInDOM = useRef(false);
const theme = useTheme();
const makeTooltip = useCallback(() => {
if (!tooltipPortal[id]) {
tooltipPortal[id] = {
count: 0
};
}
}, [id]);
const clearTimers = useCallback(() => {
var _tooltipPortal$id, _tooltipPortal$id2;
clearTimeout((_tooltipPortal$id = tooltipPortal[id]) === null || _tooltipPortal$id === void 0 ? void 0 : _tooltipPortal$id.delayTimeout);
clearTimeout((_tooltipPortal$id2 = tooltipPortal[id]) === null || _tooltipPortal$id2 === void 0 ? void 0 : _tooltipPortal$id2.hiddenTimeout);
}, [id]);
useEffect(() => {
setIsMounted(true);
clearTimers();
if (active) {
makeTooltip();
setIsActive(true);
isInDOM.current = true;
if (!isMounted) {
tooltipPortal[id].count++;
}
} else if (!active && isMounted) {
const delayRender = () => {
setIsActive(false);
};
const delayHidden = () => {
isInDOM.current = false;
};
if (noAnimation || globalThis.IS_TEST) {
delayRender();
delayHidden();
} else if (tooltipPortal[id]) {
const delay = parseFloat(String(hideDelay));
tooltipPortal[id].delayTimeout = setTimeout(delayRender, delay);
tooltipPortal[id].hiddenTimeout = setTimeout(delayHidden, delay + 300);
}
}
return clearTimers;
}, [active, clearTimers, hideDelay, id, isMounted, makeTooltip, noAnimation]);
useMountEffect(() => {
if (keepInDOM) {
makeTooltip();
}
});
if (isInDOM.current || keepInDOM) {
return React.createElement(PortalRoot, null, React.createElement("div", {
className: classnames('dnb-tooltip__portal', theme && getThemeClasses(theme), (modalContext === null || modalContext === void 0 ? void 0 : modalContext.id) && 'dnb-tooltip--inside-modal')
}, React.createElement(TooltipContainer, _extends({}, props, {
targetElement: targetElement,
active: isActive
}), children)));
}
return null;
}
export default TooltipPortal;
//# sourceMappingURL=TooltipPortal.js.map