@dnb/eufemia/components/date-picker/DatePickerPortal.js

DNB Eufemia Design System UI Library

"use client";

import "core-js/modules/web.dom-collections.iterator.js";
import React, { useCallback, useEffect, useLayoutEffect, useState } from 'react';
import PortalRoot from '../PortalRoot';
import { debounce } from '../../shared/helpers';
export default function DatePickerPortal(_ref) {
  let {
    skipPortal,
    alignment,
    targetElementRef,
    children
  } = _ref;
  const [position, setPosition] = useState({});
  useLayoutEffect(() => {
    if (targetElementRef.current) {
      setPosition(getPosition(targetElementRef.current, alignment));
    }
  }, [alignment, targetElementRef]);
  const setPositionDebounce = useCallback(() => {
    const debounced = debounce(() => {
      if (targetElementRef.current) {
        setPosition(getPosition(targetElementRef.current, alignment));
      }
    }, 200);
    debounced();
  }, [alignment, targetElementRef]);
  useEffect(() => {
    if (!skipPortal) {
      window.addEventListener('resize', setPositionDebounce);
      window.addEventListener('scroll', setPositionDebounce);
    }
    return () => {
      if (!skipPortal) {
        window.removeEventListener('resize', setPositionDebounce);
        window.removeEventListener('scroll', setPositionDebounce);
      }
    };
  }, [setPositionDebounce, skipPortal]);
  return position && (!skipPortal ? React.createElement(PortalRoot, null, React.createElement("div", {
    className: "dnb-date-picker__portal",
    style: position
  }, children)) : children);
}
function getPosition(targetElement, alignment) {
  const rect = targetElement === null || targetElement === void 0 ? void 0 : targetElement.getBoundingClientRect();
  const scrollY = window.scrollY;
  const scrollX = window.scrollX;
  return {
    top: `${rect.top + scrollY}px`,
    left: `${alignment === 'right' ? rect.left + rect.width + scrollX : rect.left + scrollX}px`
  };
}
//# sourceMappingURL=DatePickerPortal.js.map