@dnb/eufemia/cjs/components/tooltip/TooltipPortal.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireDefault(require("react"));
var _reactDom = _interopRequireDefault(require("react-dom"));
var _componentHelper = require("../../shared/component-helper");
var _TooltipContainer = _interopRequireDefault(require("./TooltipContainer"));
var _shared = require("../../shared");
var _Theme = require("../../shared/Theme");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
let tooltipPortal;
if (typeof globalThis !== 'undefined') {
  globalThis.tooltipPortal = globalThis.tooltipPortal || {};
  tooltipPortal = globalThis.tooltipPortal;
} else {
  tooltipPortal = {};
}
function TooltipPortal(props) {
  var _tooltipPortal$id3;
  const {
    active,
    targetElement,
    hideDelay,
    keepInDOM,
    noAnimation,
    children
  } = props;
  const [isMounted, setIsMounted] = _react.default.useState(false);
  const [isActive, setIsActive] = _react.default.useState(active);
  const [id] = _react.default.useState(() => (0, _componentHelper.makeUniqueId)());
  const isInDOM = _react.default.useRef(false);
  const theme = (0, _shared.useTheme)();
  const makePortal = () => {
    if (!tooltipPortal[id]) {
      tooltipPortal[id] = {
        count: 0,
        node: createRootElement(theme)
      };
    }
  };
  const clearTimers = () => {
    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);
  };
  const removeFromDOM = hide => {
    if (isActive && hide) {
      return;
    }
    const ref = tooltipPortal[id];
    if (ref !== null && ref !== void 0 && ref.node) {
      ref.count--;
      if (ref.count <= 0) {
        delete tooltipPortal[id];
      }
    }
  };
  _react.default.useEffect(() => {
    setIsMounted(true);
    clearTimers();
    if (active) {
      makePortal();
      setIsActive(true);
      isInDOM.current = true;
      if (!isMounted) {
        tooltipPortal[id].count++;
      }
    } else if (!active && isMounted) {
      const delayRender = () => {
        setIsActive(false);
      };
      const delayHidden = () => {
        isInDOM.current = false;
        removeFromDOM(true);
      };
      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;
  }, [children, active, id, hideDelay, noAnimation]);
  _react.default.useEffect(() => {
    if (keepInDOM) {
      makePortal();
    }
    return removeFromDOM;
  }, []);
  const root = (_tooltipPortal$id3 = tooltipPortal[id]) === null || _tooltipPortal$id3 === void 0 ? void 0 : _tooltipPortal$id3.node;
  if (root) {
    return _reactDom.default.createPortal(isInDOM.current || keepInDOM ? _react.default.createElement(_TooltipContainer.default, _extends({}, props, {
      targetElement: targetElement,
      active: isActive
    }), children) : null, root);
  }
  return null;
}
var _default = exports.default = TooltipPortal;
const createRootElement = function (theme) {
  let className = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : null;
  if (!className) {
    className = 'dnb-tooltip__portal';
  }
  try {
    const element = document.querySelector(`.${className}`);
    if (element) {
      return element;
    }
    const elem = document.createElement('div');
    elem.classList.add(className);
    elem.classList.add('dnb-core-style');
    if (theme) {
      elem.classList.add.call(elem.classList, ...(0, _Theme.getThemeClasses)(theme).split(' '));
    }
    document.body.appendChild(elem);
    return elem;
  } catch (e) {
    (0, _componentHelper.warn)(e);
  }
};
//# sourceMappingURL=TooltipPortal.js.map