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

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime-corejs3/helpers/esm/extends";
import React, { useCallback, useEffect, useRef, useState } from 'react';
import classnames from 'classnames';
import { warn, getClosestScrollViewElement } from "../../shared/component-helper.js";
import PortalRoot from "../../components/PortalRoot.js";
function DrawerListPortal({
  innerRef,
  id,
  opened,
  rootRef = {
    current: undefined
  },
  include_owner_width,
  independent_width,
  fixed_position,
  skipPortal,
  className,
  children
}) {
  const [isMounted, setIsMounted] = useState(false);
  const [, setForceRerender] = useState();
  const localRef = useRef(null);
  const portalRef = innerRef && typeof innerRef !== 'function' ? innerRef : localRef;
  const setPosition = useRef();
  const positionTimeout = useRef();
  const customElem = useRef();
  const resizeObserver = useRef();
  const init = useCallback(() => {
    setIsMounted(true);
  }, []);
  const removePositionObserver = 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;
  }, []);
  useEffect(() => {
    if (document.readyState === 'complete') {
      init();
    } else if (typeof window !== 'undefined') {
      window.addEventListener('load', init);
    }
  }, [init]);
  useEffect(() => {
    return () => {
      if (typeof window !== 'undefined') {
        window.removeEventListener('load', init);
      }
      removePositionObserver();
    };
  }, [init, removePositionObserver]);
  const makeStyle = 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) {
      warn(e);
    }
  }, [isMounted, rootRef, independent_width, fixed_position, include_owner_width, portalRef]);
  const addPositionObserver = useCallback(() => {
    if (setPosition.current || typeof window === 'undefined') {
      return;
    }
    setPosition.current = () => {
      clearTimeout(positionTimeout.current);
      positionTimeout.current = setTimeout(() => {
        if (opened) {
          setForceRerender(Date.now());
        }
      }, 200);
    };
    customElem.current = 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.createElement(PortalRoot, null, React.createElement("span", {
      className: "dnb-drawer-list__portal",
      id: `${id}-portal`,
      ref: portalRef
    }, React.createElement("span", {
      className: classnames('dnb-drawer-list__portal__style', className, fixed_position && 'dnb-drawer-list__portal__style--fixed'),
      style: style
    }, children)));
  }
  return null;
}
export default React.forwardRef((props, ref) => {
  return React.createElement(DrawerListPortal, _extends({
    innerRef: ref
  }, props));
});
//# sourceMappingURL=DrawerListPortal.js.map