@penaprieto/design-system
Version:
Multi-brand React design system with design tokens from Figma
61 lines (60 loc) • 4.36 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Modal = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const react_dom_1 = require("react-dom");
require("./Modal.css");
const Button_1 = require("../Button");
const Icon_1 = require("../Icon");
const Modal = ({ open, onClose, title, children, footer, variant = 'classic', size = 'md', image, imageAlt = '', className = '', }) => {
// Block body scroll when modal 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 modalClassName = [
'ds-modal',
`ds-modal--${variant}`,
`ds-modal--${size}`,
className,
]
.filter(Boolean)
.join(' ');
const renderContent = () => {
if (variant === 'image-left') {
return ((0, jsx_runtime_1.jsxs)("div", { className: "ds-modal__dialog", children: [image && ((0, jsx_runtime_1.jsx)("div", { className: "ds-modal__image-left", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt }) })), (0, jsx_runtime_1.jsxs)("div", { className: "ds-modal__content", children: [(0, jsx_runtime_1.jsxs)("header", { className: "ds-modal__header", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "ds-modal__title", children: title }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", shape: "icon", size: "medium", onClick: onClose, "aria-label": "Cerrar modal", className: "ds-modal__close", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 24 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "ds-modal__body", children: children }), footer && (0, jsx_runtime_1.jsx)("footer", { className: "ds-modal__footer", children: footer })] })] }));
}
if (variant === 'image-top') {
return ((0, jsx_runtime_1.jsxs)("div", { className: "ds-modal__dialog", children: [image && ((0, jsx_runtime_1.jsx)("div", { className: "ds-modal__image-top", children: (0, jsx_runtime_1.jsx)("img", { src: image, alt: imageAlt }) })), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", shape: "icon", size: "medium", onClick: onClose, "aria-label": "Cerrar modal", className: "ds-modal__close ds-modal__close--absolute", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 24 }) }), (0, jsx_runtime_1.jsx)("div", { className: "ds-modal__body", children: children }), footer && (0, jsx_runtime_1.jsx)("footer", { className: "ds-modal__footer", children: footer })] }));
}
// Classic variant
return ((0, jsx_runtime_1.jsxs)("div", { className: "ds-modal__dialog", children: [(0, jsx_runtime_1.jsxs)("header", { className: "ds-modal__header", children: [title && (0, jsx_runtime_1.jsx)("h2", { className: "ds-modal__title", children: title }), (0, jsx_runtime_1.jsx)(Button_1.Button, { variant: "ghost", shape: "icon", size: "medium", onClick: onClose, "aria-label": "Cerrar modal", className: "ds-modal__close", children: (0, jsx_runtime_1.jsx)(Icon_1.Icon, { name: "x", size: 24 }) })] }), (0, jsx_runtime_1.jsx)("div", { className: "ds-modal__body", children: children }), footer && (0, jsx_runtime_1.jsx)("footer", { className: "ds-modal__footer", children: footer })] }));
};
return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: "ds-modal__overlay", onClick: handleOverlayClick }), (0, jsx_runtime_1.jsx)("div", { className: modalClassName, role: "dialog", "aria-modal": "true", children: renderContent() })] }), document.body);
};
exports.Modal = Modal;