AutorÃa | Ultima modificación | Ver Log |
import { Button, Modal, IconButton } from '@mui/material';
import { Close } from '@mui/icons-material';
import React from 'react';
import Widget from '../Widget';
import Spinner from '../Spinner';
const GlobalModal = ({
title = '',
size = 'md',
onAccept,
onClose,
onReject = null,
labelAccept = 'Aceptar',
labelReject = 'Cancelar',
showFooter = true,
dialogClassName,
loading = false,
formId,
children
}) => {
const labels = {
accept: 'Aceptar',
cancel: 'Cancelar'
};
return (
<Modal open onClose={onClose}>
<Widget
styles={{
position: 'absolute',
top: '50%',
left: '50%',
transform: 'translate(-50%, -50%)',
maxWidth: size === 'sm' ? '300px' : size === 'md' ? '500px' : '700px',
width: '100%',
maxHeight: '90vh',
overflowY: 'auto'
}}
className={dialogClassName}
>
<Widget.Header
title={title}
renderAction={() => (
<IconButton onClick={onClose}>
<Close />
</IconButton>
)}
/>
<Widget.Body styles={{ position: 'relative' }}>
{loading && <Spinner absolute />}
{children}
</Widget.Body>
{showFooter && (
<Widget.Footer styles={{ display: 'flex', justifyContent: 'flex-start', gap: 1 }}>
<Button
color='primary'
onClick={onAccept}
disabled={loading}
form={formId}
type={formId ? 'submit' : 'button'}
>
{labelAccept || labels.accept}
</Button>
<Button color='secondary' onClick={onReject || onClose}>
{labelReject || labels.cancel}
</Button>
</Widget.Footer>
)}
</Widget>
</Modal>
);
};
export default GlobalModal;