zent
Version:
一套前端设计语言和基于React的实现
36 lines (35 loc) • 2.06 kB
JavaScript
import { __assign, __rest } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import Portal from '../portal';
import DrawerBackdrop from './components/DrawerBackdrop';
import DrawerContent from './components/DrawerContent';
import { useDrawerExiting } from './hooks/useDrawerExiting';
var drawerSizeWidthMap = {
default: '728px',
small: '364px',
};
export var Drawer = function (_a) {
var _b;
var onClose = _a.onClose, title = _a.title, children = _a.children, className = _a.className, visible = _a.visible, maskClosable = _a.maskClosable, closeOnESC = _a.closeOnESC, mask = _a.mask, footer = _a.footer, placement = _a.placement, closeBtn = _a.closeBtn, size = _a.size, rest = __rest(_a, ["onClose", "title", "children", "className", "visible", "maskClosable", "closeOnESC", "mask", "footer", "placement", "closeBtn", "size"]);
var width = drawerSizeWidthMap[size] || '45%';
if ('width' in rest) {
width = rest.width;
}
var height = 'height' in rest ? rest.height : '45%';
var _c = useDrawerExiting(visible), exiting = _c.exiting, onExited = _c.onExited;
return (_jsx(Portal, __assign({ visible: visible || exiting, onClose: onClose, closeOnESC: closeOnESC, blockPageScroll: mask }, { children: _jsxs("div", __assign({ className: cx((_b = {}, _b[className] = !!className, _b)), "data-zv": '10.0.17' }, { children: [_jsx(DrawerBackdrop, { mask: mask, maskClosable: maskClosable, visible: visible, onClose: onClose }, void 0), _jsx(DrawerContent, __assign({ mask: mask, visible: visible, title: title, footer: footer, onClose: onClose, onExited: onExited, placement: placement, width: width, height: height, closeBtn: closeBtn }, { children: children }), void 0)] }), void 0) }), void 0));
};
Drawer.defaultProps = {
className: '',
visible: false,
maskClosable: false,
closeOnESC: true,
mask: true,
footer: null,
title: null,
onClose: function () { },
placement: 'right',
closeBtn: true,
};
export default Drawer;