@ozen-ui/kit
Version:
React component library
53 lines (52 loc) • 3.64 kB
JavaScript
import { __assign, __rest } from "tslib";
import './Drawer.css';
import './modules/DrawerBody/DrawerBody.css';
import './modules/DrawerFooter/DrawerFooter.css';
import './modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css';
import './modules/DrawerHeader/DrawerHeader.css';
import './modules/DrawerSubtitle/DrawerSubtitle.css';
import './modules/DrawerTitle/DrawerTitle.css';
import React, { forwardRef } from 'react';
import { useThemeProps } from '../../hooks/useThemeProps';
import { cn } from '../../utils/classname';
import { generateCSSVariables } from '../../utils/css';
import { renderContent } from '../../utils/renderContent';
import { Modal } from '../Modal';
import { DRAWER_DEFAULT_SIZE, DRAWER_DEFAULT_HIDE_CLOSE_BUTTON, DRAWER_DEFAULT_PLACEMENT, DRAWER_DEFAULT_VARIANT, DRAWER_CSS_VARIABLE, DRAWER_DEFAULT_DEVICE_TYPE, } from './constants';
import { DrawerContext } from './DrawerContext';
import { useDrawerWidth } from './hooks';
import { DrawerCloseButton } from './modules';
import { paperRadiusBySize } from './utils';
export var cnDrawer = cn('DrawerNext');
export var Drawer = forwardRef(function (inProps, ref) {
var _a;
var props = useThemeProps({
props: inProps,
name: 'DrawerNext',
});
var _b = props.variant, variant = _b === void 0 ? DRAWER_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? DRAWER_DEFAULT_SIZE : _c, _d = props.placement, placement = _d === void 0 ? DRAWER_DEFAULT_PLACEMENT : _d, _e = props.hideCloseButton, hideCloseButton = _e === void 0 ? DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _e, _f = props.deviceType, deviceType = _f === void 0 ? DRAWER_DEFAULT_DEVICE_TYPE : _f, open = props.open, _g = props.onClose, onClose = _g === void 0 ? function () { } : _g, children = props.children, className = props.className, windowProps = props.windowProps, transitionProps = props.transitionProps, _h = props.renderCloseButton, renderCloseButton = _h === void 0 ? React.createElement(DrawerCloseButton, null) : _h, style = props.style, other = __rest(props, ["variant", "size", "placement", "hideCloseButton", "deviceType", "open", "onClose", "children", "className", "windowProps", "transitionProps", "renderCloseButton", "style"]);
var _j = useDrawerWidth({ variant: variant }), isFullWidth = _j.isFullWidth, maxWidth = _j.maxWidth;
var radius = paperRadiusBySize[deviceType][size];
return (React.createElement(DrawerContext.Provider, { value: {
size: size,
variant: variant,
onClose: onClose,
deviceType: deviceType,
} },
React.createElement(Modal, __assign({}, other, { open: open, style: __assign(__assign({}, style), generateCSSVariables((_a = {},
_a[DRAWER_CSS_VARIABLE.MAX_WIDTH] = "".concat(maxWidth, "px"),
_a))), onClose: onClose, windowProps: __assign({ radius: radius, shadow: 'l' }, windowProps), className: cnDrawer({
variant: variant,
size: size,
placement: placement,
deviceType: deviceType,
hasCloseButton: !hideCloseButton,
fullScreen: isFullWidth,
}, [className]), transitionProps: __assign({ classNames: cnDrawer({ animation: true }) }, transitionProps), ref: ref }),
!hideCloseButton && (React.createElement("div", { className: cnDrawer('CloseButtonContainer') }, renderContent({
content: renderCloseButton,
props: {},
}))),
React.createElement("div", { className: cnDrawer('InnerContainer') }, children))));
});
Drawer.displayName = 'Drawer';