@dnb/eufemia/cjs/fragments/drawer-list/DrawerListPortal.js

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;
var _react = _interopRequireWildcard(require("react"));
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _PortalRoot = _interopRequireDefault(require("../../components/PortalRoot.js"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function DrawerListPortal({
  ref: refProp,
  id,
  open,
  rootRef = {
    current: undefined
  },
  includeOwnerWidth,
  independentWidth,
  fixedPosition,
  skipPortal,
  className,
  children
}) {
  const [isMounted, setIsMounted] = (0, _react.useState)(false);
  const [, setForceRerender] = (0, _react.useState)();
  const localRef = (0, _react.useRef)(null);
  const portalRef = refProp && typeof refProp !== 'function' ? refProp : localRef;
  const setPosition = (0, _react.useRef)(undefined);
  const positionTimeout = (0, _react.useRef)(undefined);
  const customElem = (0, _react.useRef)(undefined);
  const resizeObserver = (0, _react.useRef)(undefined);
  const init = (0, _react.useCallback)(() => {
    setIsMounted(true);
  }, []);
  const removePositionObserver = (0, _react.useCallback)(() => {
    clearTimeout(positionTimeout.current);
    if (typeof window !== 'undefined' && setPosition.current) {
      if (customElem.current) {
        customElem.current.removeEventListener('scroll', setPosition.current);
      }
      if (resizeObserver.current) {
        resizeObserver.current.disconnect();
        resizeObserver.current = null;
      }
      window.removeEventListener('resize', setPosition.current);
    }
    setPosition.current = null;
  }, []);
  (0, _react.useEffect)(() => {
    if (document.readyState === 'complete') {
      init();
    } else if (typeof window !== 'undefined') {
      window.addEventListener('load', init);
    }
  }, [init]);
  (0, _react.useEffect)(() => {
    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('load', init);
      }
      removePositionObserver();
    };
  }, [init, removePositionObserver]);
  const makeStyle = (0, _react.useCallback)(() => {
    if (typeof window === 'undefined' || !isMounted) {
      return undefined;
    }
    try {
      const rootElem = rootRef.current;
      if (!rootElem) {
        return undefined;
      }
      const ownerElem = rootElem.parentElement;
      let width = 64;
      const ownerWidth = window.getComputedStyle(ownerElem).width;
      if (independentWidth || parseFloat(ownerWidth) < 64) {
        let minWidth = 0;
        if (portalRef.current) {
          minWidth = parseFloat(window.getComputedStyle(portalRef.current).getPropertyValue('--drawer-list-width')) || 0;
        }
        width = minWidth * 16;
      }
      const customWidth = rootElem.getBoundingClientRect().width;
      if (!independentWidth && (customWidth || 0) >= 64) {
        width = customWidth;
      }
      const rect = rootElem.getBoundingClientRect();
      const scrollY = fixedPosition ? 0 : window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
      const scrollX = fixedPosition ? 0 : window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
      let top = scrollY + rect.top;
      let left = scrollX + rect.left + (includeOwnerWidth ? parseFloat(ownerWidth || '0') : 0);
      if (width > window.innerWidth) {
        width = window.innerWidth;
      }
      if (top < 0) {
        top = 0;
      }
      if (left < 0) {
        left = 0;
      }
      const style = {
        width,
        '--drawer-list-width': `${width / 16}rem`,
        top,
        left
      };
      return style;
    } catch (e) {
      (0, _componentHelper.warn)(e);
    }
    return undefined;
  }, [isMounted, rootRef, independentWidth, fixedPosition, includeOwnerWidth, portalRef]);
  const addPositionObserver = (0, _react.useCallback)(() => {
    if (setPosition.current || typeof window === 'undefined') {
      return undefined;
    }
    setPosition.current = () => {
      clearTimeout(positionTimeout.current);
      positionTimeout.current = setTimeout(() => {
        if (open) {
          setForceRerender(Date.now());
        }
      }, 200);
    };
    customElem.current = (0, _componentHelper.getClosestScrollViewElement)(rootRef.current) || window;
    customElem.current.addEventListener('scroll', setPosition.current);
    try {
      resizeObserver.current = new ResizeObserver(setPosition.current);
      resizeObserver.current.observe(document.body);
    } catch (e) {
      window.addEventListener('resize', setPosition.current);
    }
  }, [open, rootRef]);
  if (skipPortal) {
    return children;
  }
  if (typeof window !== 'undefined' && isMounted) {
    if (open) {
      addPositionObserver();
    }
    const style = open ? makeStyle() : {};
    return (0, _jsxRuntime.jsx)(_PortalRoot.default, {
      children: (0, _jsxRuntime.jsx)("span", {
        className: "dnb-drawer-list__portal",
        id: `${id}-portal`,
        ref: portalRef,
        children: (0, _jsxRuntime.jsx)("span", {
          className: (0, _clsx.default)('dnb-drawer-list__portal__style', className, fixedPosition && 'dnb-drawer-list__portal__style--fixed'),
          style: style,
          children: children
        })
      })
    });
  }
  return null;
}
var _default = exports.default = DrawerListPortal;
//# sourceMappingURL=DrawerListPortal.js.map