@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
51 lines (50 loc) • 2.49 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Drawer = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
require("./Drawer.css");
const Button_1 = require("../Button");
const Icon_1 = require("../Icon");
const Drawer = ({ open, onClose, title, placement = 'right', size = 'medium', children, footer, className = '', }) => {
// Block body scroll when drawer is open
(0, react_1.useEffect)(() => {
if (open) {
document.body.style.overflow = 'hidden';
}
else {
document.body.style.overflow = '';
}
return () => {
document.body.style.overflow = '';
};
}, [open]);
// Close on Escape key
(0, react_1.useEffect)(() => {
const handleEscape = (e) => {
if (e.key === 'Escape' && open) {
onClose();
}
};
document.addEventListener('keydown', handleEscape);
return () => document.removeEventListener('keydown', handleEscape);
}, [open, onClose]);
if (!open)
return null;
const handleOverlayClick = (e) => {
if (e.target === e.currentTarget) {
onClose();
}
};
const drawerClassName = [
'ds-drawer',
`ds-drawer--${placement}`,
`ds-drawer--${size}`,
className,
]
.filter(Boolean)
.join(' ');
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-drawer__overlay", onClick: handleOverlayClick }), (0, jsx_runtime_1.jsx)("div", { className: drawerClassName, role: "dialog", "aria-modal": "true", children: (0, jsx_runtime_1.jsxs)("div", { className: "ds-drawer__content", children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: "ds-drawer__header", children: [(0, jsx_runtime_1.jsx)("h2", { className: "ds-drawer__title", children: title }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", shape: "icon", size: "medium", onClick: onClose, "aria-label": "Cerrar drawer", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 24 }) })] })), (0, jsx_runtime_1.jsx)("div", { className: "ds-drawer__body", children: children }), footer && (0, jsx_runtime_1.jsx)("div", { className: "ds-drawer__footer", children: footer })] }) })] }), document.body);
};
exports.Drawer = Drawer;