@dnb/eufemia/es/components/modal/parts/ModalHeaderBar.js

DNB Eufemia Design System UI Library

"use client";

import React, { useContext, useEffect, useRef, useState } from 'react';
import clsx from 'clsx';
import Section from "../../section/Section.js";
import ModalContext from "../ModalContext.js";
import CloseButton from "./CloseButton.js";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
export default function ModalHeaderBar({
  className = null,
  children = null,
  ref: _ref,
  shadowClass = null,
  ...props
}) {
  const context = useContext(ModalContext);
  const sectionRef = useRef(null);
  const [showShadow, setShowShadow] = useState(false);
  useEffect(() => {
    if (typeof window === 'undefined' || typeof IntersectionObserver === 'undefined' || !sectionRef.current) {
      return undefined;
    }
    const element = sectionRef.current;
    const marginTop = -element.clientHeight;
    let scrollRoot = null;
    let parent = element.parentElement;
    while (parent) {
      if (parent.classList?.contains('dnb-scroll-view')) {
        scrollRoot = parent;
        break;
      }
      parent = parent.parentElement;
    }
    const observer = new IntersectionObserver(entries => {
      const [entry] = entries;
      setShowShadow(!entry.isIntersecting);
    }, {
      root: scrollRoot,
      rootMargin: `${marginTop}px 0px 0px 0px`,
      threshold: 0.001
    });
    observer.observe(element);
    return () => {
      observer.disconnect();
    };
  }, [children]);
  const {
    hideCloseButton = false,
    closeButtonAttributes,
    onCloseClickHandler,
    closeTitle
  } = context;
  return _jsxs(Section, {
    className: clsx('dnb-modal__header__bar', className, showShadow && shadowClass),
    ref: sectionRef,
    ...props,
    children: [_jsx("div", {
      className: "dnb-modal__header__bar__inner",
      children: children
    }), !hideCloseButton && _jsx("div", {
      className: "dnb-modal__header__bar__close",
      children: _jsx(CloseButton, {
        onClick: onCloseClickHandler,
        closeTitle: closeTitle,
        ...closeButtonAttributes
      })
    })]
  });
}
//# sourceMappingURL=ModalHeaderBar.js.map