@ozen-ui/kit
Version:
React component library
56 lines (55 loc) • 3.96 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.Drawer = exports.cnDrawer = void 0;
var tslib_1 = require("tslib");
require("./Drawer.css");
require("./modules/DrawerBody/DrawerBody.css");
require("./modules/DrawerFooter/DrawerFooter.css");
require("./modules/DrawerFooterButtonsGroup/DrawerFooterButtonsGroup.css");
require("./modules/DrawerHeader/DrawerHeader.css");
require("./modules/DrawerSubtitle/DrawerSubtitle.css");
require("./modules/DrawerTitle/DrawerTitle.css");
var react_1 = tslib_1.__importStar(require("react"));
var useThemeProps_1 = require("../../hooks/useThemeProps");
var classname_1 = require("../../utils/classname");
var css_1 = require("../../utils/css");
var renderContent_1 = require("../../utils/renderContent");
var Modal_1 = require("../Modal");
var constants_1 = require("./constants");
var DrawerContext_1 = require("./DrawerContext");
var hooks_1 = require("./hooks");
var modules_1 = require("./modules");
var utils_1 = require("./utils");
exports.cnDrawer = (0, classname_1.cn)('DrawerNext');
exports.Drawer = (0, react_1.forwardRef)(function (inProps, ref) {
var _a;
var props = (0, useThemeProps_1.useThemeProps)({
props: inProps,
name: 'DrawerNext',
});
var _b = props.variant, variant = _b === void 0 ? constants_1.DRAWER_DEFAULT_VARIANT : _b, _c = props.size, size = _c === void 0 ? constants_1.DRAWER_DEFAULT_SIZE : _c, _d = props.placement, placement = _d === void 0 ? constants_1.DRAWER_DEFAULT_PLACEMENT : _d, _e = props.hideCloseButton, hideCloseButton = _e === void 0 ? constants_1.DRAWER_DEFAULT_HIDE_CLOSE_BUTTON : _e, _f = props.deviceType, deviceType = _f === void 0 ? constants_1.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_1.default.createElement(modules_1.DrawerCloseButton, null) : _h, style = props.style, other = tslib_1.__rest(props, ["variant", "size", "placement", "hideCloseButton", "deviceType", "open", "onClose", "children", "className", "windowProps", "transitionProps", "renderCloseButton", "style"]);
var _j = (0, hooks_1.useDrawerWidth)({ variant: variant }), isFullWidth = _j.isFullWidth, maxWidth = _j.maxWidth;
var radius = utils_1.paperRadiusBySize[deviceType][size];
return (react_1.default.createElement(DrawerContext_1.DrawerContext.Provider, { value: {
size: size,
variant: variant,
onClose: onClose,
deviceType: deviceType,
} },
react_1.default.createElement(Modal_1.Modal, tslib_1.__assign({}, other, { open: open, style: tslib_1.__assign(tslib_1.__assign({}, style), (0, css_1.generateCSSVariables)((_a = {},
_a[constants_1.DRAWER_CSS_VARIABLE.MAX_WIDTH] = "".concat(maxWidth, "px"),
_a))), onClose: onClose, windowProps: tslib_1.__assign({ radius: radius, shadow: 'l' }, windowProps), className: (0, exports.cnDrawer)({
variant: variant,
size: size,
placement: placement,
deviceType: deviceType,
hasCloseButton: !hideCloseButton,
fullScreen: isFullWidth,
}, [className]), transitionProps: tslib_1.__assign({ classNames: (0, exports.cnDrawer)({ animation: true }) }, transitionProps), ref: ref }),
!hideCloseButton && (react_1.default.createElement("div", { className: (0, exports.cnDrawer)('CloseButtonContainer') }, (0, renderContent_1.renderContent)({
content: renderCloseButton,
props: {},
}))),
react_1.default.createElement("div", { className: (0, exports.cnDrawer)('InnerContainer') }, children))));
});
exports.Drawer.displayName = 'Drawer';