@dnb/eufemia/es/components/drawer/DrawerContent.js

DNB Eufemia Design System UI Library

"use client";

import _extends from "@babel/runtime/helpers/esm/extends";
import React, { useContext } from 'react';
import classnames from 'classnames';
import { isTrue, findElementInChildren } from "../../shared/component-helper.js";
import { getOffsetTop, warn } from "../../shared/helpers.js";
import ScrollView from "../../fragments/scroll-view/ScrollView.js";
import DrawerHeader from "./parts/DrawerHeader.js";
import DrawerNavigation from "./parts/DrawerNavigation.js";
import ModalContext from "../modal/ModalContext.js";
import { getContent } from "../modal/helpers.js";
import { checkMinMaxWidth } from "./helpers.js";
import ModalHeaderBar from "../modal/parts/ModalHeaderBar.js";
import ModalHeader from "../modal/parts/ModalHeader.js";
import { DrawerContentContext } from "./parts/DrawerContentContext.js";
export default function DrawerContent({
  modalContent = null,
  navContent = null,
  headerContent = null,
  alignContent = 'left',
  containerPlacement = 'right',
  preventCoreStyle = false,
  className = null,
  spacing = true,
  fullscreen = 'auto',
  noAnimation = false,
  noAnimationOnMobile = false,
  minWidth: min_width = null,
  maxWidth: max_width = null,
  ...rest
}) {
  const context = useContext(ModalContext);
  const {
    minWidth,
    maxWidth
  } = checkMinMaxWidth(min_width, max_width);
  const content = modalContent || getContent(typeof rest.children === 'function' ? Object.freeze({
    ...rest,
    close: context?.close
  }) : rest);
  const innerParams = {
    className: classnames(`dnb-drawer dnb-drawer--${containerPlacement || 'right'}`, isTrue(fullscreen) ? `dnb-drawer--fullscreen` : fullscreen === 'auto' && `dnb-drawer--auto-fullscreen`, className, !isTrue(preventCoreStyle) && 'dnb-core-style', isTrue(spacing) && 'dnb-drawer--spacing', alignContent && `dnb-drawer__align--${alignContent}`, isTrue(context?.hide) && `dnb-drawer--hide`, isTrue(noAnimation) && `dnb-drawer--no-animation`, isTrue(noAnimationOnMobile) && `dnb-drawer--no-animation-on-mobile`),
    style: (minWidth || maxWidth) && {
      minWidth,
      maxWidth
    },
    onClick: context?.preventClick,
    onTouchStart: context?.preventClick,
    onKeyDown: context?.onKeyDownHandler,
    ...rest
  };
  React.useEffect(() => {
    try {
      const height = getOffsetTop(context?.contentRef.current) / 16;
      context?.contentRef.current.style.setProperty('--header-height', `${height}rem`);
    } catch (e) {
      warn(e);
    }
  }, [content, context?.scrollRef, context?.contentRef]);
  const navigationElement = findElementInChildren(content, cur => cur.type === DrawerNavigation || cur.type === ModalHeaderBar);
  const headerElement = findElementInChildren(content, cur => cur.type === DrawerHeader || cur.type === ModalHeader);
  return React.createElement(ScrollView, _extends({}, innerParams, {
    ref: context?.scrollRef
  }), navigationElement ? navigationElement : React.createElement(DrawerNavigation, null, navContent), headerElement ? headerElement : React.createElement(DrawerHeader, {
    title: context?.title
  }, headerContent), React.createElement("div", {
    tabIndex: -1,
    className: "dnb-drawer__inner dnb-no-focus",
    ref: context?.contentRef
  }, React.createElement("div", {
    id: context?.contentId + '-content',
    className: "dnb-drawer__content"
  }, React.createElement(DrawerContentContext.Provider, {
    value: {
      navigationElement,
      headerElement
    }
  }, content))));
}
//# sourceMappingURL=DrawerContent.js.map