@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;
require("core-js/modules/web.dom-collections.iterator.js");
var _react = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
var _componentHelper = require("../../shared/component-helper");
var _PortalRoot = _interopRequireDefault(require("../../components/PortalRoot"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
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); }
function DrawerListPortal(_ref) {
  let {
    innerRef,
    id,
    opened,
    rootRef = {
      current: undefined
    },
    include_owner_width,
    independent_width,
    fixed_position,
    skipPortal,
    className,
    children
  } = _ref;
  const [isMounted, setIsMounted] = (0, _react.useState)(false);
  const [, setForceRerender] = (0, _react.useState)();
  const localRef = (0, _react.useRef)(null);
  const portalRef = innerRef && typeof innerRef !== 'function' ? innerRef : localRef;
  const setPosition = (0, _react.useRef)();
  const positionTimeout = (0, _react.useRef)();
  const customElem = (0, _react.useRef)();
  const resizeObserver = (0, _react.useRef)();
  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;
    }
    try {
      const rootElem = rootRef.current;
      if (!rootElem) {
        return;
      }
      const ownerElem = rootElem.parentElement;
      let width = 64;
      const ownerWidth = window.getComputedStyle(ownerElem).width;
      if (independent_width || 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 (!independent_width && (customWidth || 0) >= 64) {
        width = customWidth;
      }
      const rect = rootElem.getBoundingClientRect();
      const scrollY = fixed_position ? 0 : window.scrollY !== undefined ? window.scrollY : window.pageYOffset;
      const scrollX = fixed_position ? 0 : window.scrollX !== undefined ? window.scrollX : window.pageXOffset;
      let top = scrollY + rect.top;
      let left = scrollX + rect.left + (include_owner_width ? 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);
    }
  }, [isMounted, rootRef, independent_width, fixed_position, include_owner_width, portalRef]);
  const addPositionObserver = (0, _react.useCallback)(() => {
    if (setPosition.current || typeof window === 'undefined') {
      return;
    }
    setPosition.current = () => {
      clearTimeout(positionTimeout.current);
      positionTimeout.current = setTimeout(() => {
        if (opened) {
          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);
    }
  }, [opened, rootRef]);
  if (skipPortal) {
    return children;
  }
  if (typeof window !== 'undefined' && isMounted) {
    if (opened) {
      addPositionObserver();
    }
    const style = opened ? makeStyle() : {};
    return _react.default.createElement(_PortalRoot.default, null, _react.default.createElement("span", {
      className: "dnb-drawer-list__portal",
      id: `${id}-portal`,
      ref: portalRef
    }, _react.default.createElement("span", {
      className: (0, _classnames.default)('dnb-drawer-list__portal__style', className, fixed_position && 'dnb-drawer-list__portal__style--fixed'),
      style: style
    }, children)));
  }
  return null;
}
var _default = exports.default = _react.default.forwardRef((props, ref) => {
  return _react.default.createElement(DrawerListPortal, _extends({
    innerRef: ref
  }, props));
});
//# sourceMappingURL=DrawerListPortal.js.map