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

DNB Eufemia Design System UI Library

"use strict";
"use client";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = DrawerContent;
var _react = require("react");
var _clsx = _interopRequireDefault(require("clsx"));
var _componentHelper = require("../../shared/component-helper.js");
var _helpers = require("../../shared/helpers.js");
var _ScrollView = _interopRequireDefault(require("../../fragments/scroll-view/ScrollView.js"));
var _DrawerHeader = _interopRequireDefault(require("./parts/DrawerHeader.js"));
var _DrawerNavigation = _interopRequireDefault(require("./parts/DrawerNavigation.js"));
var _ModalContext = _interopRequireDefault(require("../modal/ModalContext.js"));
var _helpers2 = require("../modal/helpers.js");
var _helpers3 = require("./helpers.js");
var _ModalHeaderBar = _interopRequireDefault(require("../modal/parts/ModalHeaderBar.js"));
var _ModalHeader = _interopRequireDefault(require("../modal/parts/ModalHeader.js"));
var _DrawerContentContext = require("./parts/DrawerContentContext.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
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: minWidthProp = null,
  maxWidth: maxWidthProp = null,
  scrollbarGutter,
  ...rest
}) {
  const context = (0, _react.useContext)(_ModalContext.default);
  const {
    minWidth,
    maxWidth
  } = (0, _helpers3.checkMinMaxWidth)(minWidthProp, maxWidthProp);
  const content = modalContent || (0, _helpers2.getContent)(typeof rest.children === 'function' ? Object.freeze({
    ...rest,
    close: context === null || context === void 0 ? void 0 : context.close
  }) : rest);
  const innerParams = {
    className: (0, _clsx.default)(`dnb-drawer dnb-drawer--${containerPlacement || 'right'}`, fullscreen === true ? `dnb-drawer--fullscreen` : fullscreen === 'auto' && `dnb-drawer--auto-fullscreen`, className, !preventCoreStyle && 'dnb-core-style', spacing && 'dnb-drawer--spacing', alignContent && `dnb-drawer__align--${alignContent}`, (context === null || context === void 0 ? void 0 : context.hide) && `dnb-drawer--hide`, noAnimation && `dnb-drawer--no-animation`, noAnimationOnMobile && `dnb-drawer--no-animation-on-mobile`),
    style: (minWidth || maxWidth) && {
      minWidth,
      maxWidth
    },
    onClick: context === null || context === void 0 ? void 0 : context.preventClick,
    onTouchStart: context === null || context === void 0 ? void 0 : context.preventClick,
    onKeyDown: context === null || context === void 0 ? void 0 : context.onKeyDownHandler,
    ...rest
  };
  (0, _react.useEffect)(() => {
    try {
      const height = (0, _helpers.getOffsetTop)(context === null || context === void 0 ? void 0 : context.contentRef.current) / 16;
      context === null || context === void 0 || context.contentRef.current.style.setProperty('--header-height', `${height}rem`);
    } catch (e) {
      (0, _helpers.warn)(e);
    }
  }, [content, context === null || context === void 0 ? void 0 : context.scrollRef, context === null || context === void 0 ? void 0 : context.contentRef]);
  const navigationElement = (0, _componentHelper.findElementInChildren)(content, cur => cur.type === _DrawerNavigation.default || cur.type === _ModalHeaderBar.default);
  const headerElement = (0, _componentHelper.findElementInChildren)(content, cur => cur.type === _DrawerHeader.default || cur.type === _ModalHeader.default);
  return (0, _jsxRuntime.jsxs)(_ScrollView.default, {
    ...innerParams,
    ref: context === null || context === void 0 ? void 0 : context.scrollRef,
    scrollbarGutter: scrollbarGutter === false ? undefined : scrollbarGutter === 'stable' || spacing !== false ? 'stable' : undefined,
    children: [navigationElement ? navigationElement : (0, _jsxRuntime.jsx)(_DrawerNavigation.default, {
      children: navContent
    }), headerElement ? headerElement : (0, _jsxRuntime.jsx)(_DrawerHeader.default, {
      title: context === null || context === void 0 ? void 0 : context.title,
      children: headerContent
    }), (0, _jsxRuntime.jsx)("div", {
      tabIndex: -1,
      className: "dnb-drawer__inner dnb-no-focus",
      ref: context === null || context === void 0 ? void 0 : context.contentRef,
      children: (0, _jsxRuntime.jsx)("div", {
        id: (context === null || context === void 0 ? void 0 : context.contentId) + '-content',
        className: "dnb-drawer__content",
        children: (0, _jsxRuntime.jsx)(_DrawerContentContext.DrawerContentContext, {
          value: {
            navigationElement,
            headerElement
          },
          children: content
        })
      })
    })]
  });
}
//# sourceMappingURL=DrawerContent.js.map