@dnb/eufemia
Version:
DNB Eufemia Design System UI Library
89 lines (88 loc) • 4.14 kB
JavaScript
"use client";
import React, { useContext } from 'react';
import clsx from 'clsx';
import { 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";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
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: minWidthProp = null,
maxWidth: maxWidthProp = null,
...rest
}) {
const context = useContext(ModalContext);
const {
minWidth,
maxWidth
} = checkMinMaxWidth(minWidthProp, maxWidthProp);
const content = modalContent || getContent(typeof rest.children === 'function' ? Object.freeze({
...rest,
close: context === null || context === void 0 ? void 0 : context.close
}) : rest);
const innerParams = {
className: clsx(`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
};
React.useEffect(() => {
try {
const height = 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) {
warn(e);
}
}, [content, context === null || context === void 0 ? void 0 : context.scrollRef, context === null || context === void 0 ? void 0 : 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 _jsxs(ScrollView, {
...innerParams,
ref: context === null || context === void 0 ? void 0 : context.scrollRef,
children: [navigationElement ? navigationElement : _jsx(DrawerNavigation, {
children: navContent
}), headerElement ? headerElement : _jsx(DrawerHeader, {
title: context === null || context === void 0 ? void 0 : context.title,
children: headerContent
}), _jsx("div", {
tabIndex: -1,
className: "dnb-drawer__inner dnb-no-focus",
ref: context === null || context === void 0 ? void 0 : context.contentRef,
children: _jsx("div", {
id: (context === null || context === void 0 ? void 0 : context.contentId) + '-content',
className: "dnb-drawer__content",
children: _jsx(DrawerContentContext, {
value: {
navigationElement,
headerElement
},
children: content
})
})
})]
});
}
//# sourceMappingURL=DrawerContent.js.map