@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 = _interopRequireWildcard(require("react"));
var _classnames = _interopRequireDefault(require("classnames"));
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");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
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 = (0, _react.useContext)(_ModalContext.default);
  const {
    minWidth,
    maxWidth
  } = (0, _helpers3.checkMinMaxWidth)(min_width, max_width);
  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, _classnames.default)(`dnb-drawer dnb-drawer--${containerPlacement || 'right'}`, (0, _componentHelper.isTrue)(fullscreen) ? `dnb-drawer--fullscreen` : fullscreen === 'auto' && `dnb-drawer--auto-fullscreen`, className, !(0, _componentHelper.isTrue)(preventCoreStyle) && 'dnb-core-style', (0, _componentHelper.isTrue)(spacing) && 'dnb-drawer--spacing', alignContent && `dnb-drawer__align--${alignContent}`, (0, _componentHelper.isTrue)(context === null || context === void 0 ? void 0 : context.hide) && `dnb-drawer--hide`, (0, _componentHelper.isTrue)(noAnimation) && `dnb-drawer--no-animation`, (0, _componentHelper.isTrue)(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
  };
  _react.default.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 _react.default.createElement(_ScrollView.default, _extends({}, innerParams, {
    ref: context === null || context === void 0 ? void 0 : context.scrollRef
  }), navigationElement ? navigationElement : _react.default.createElement(_DrawerNavigation.default, null, navContent), headerElement ? headerElement : _react.default.createElement(_DrawerHeader.default, {
    title: context === null || context === void 0 ? void 0 : context.title
  }, headerContent), _react.default.createElement("div", {
    tabIndex: -1,
    className: "dnb-drawer__inner dnb-no-focus",
    ref: context === null || context === void 0 ? void 0 : context.contentRef
  }, _react.default.createElement("div", {
    id: (context === null || context === void 0 ? void 0 : context.contentId) + '-content',
    className: "dnb-drawer__content"
  }, _react.default.createElement(_DrawerContentContext.DrawerContentContext.Provider, {
    value: {
      navigationElement,
      headerElement
    }
  }, content))));
}
//# sourceMappingURL=DrawerContent.js.map