Rev 3175 | Rev 3584 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import { useSelector } from 'react-redux'
import { Button } from '@mui/material'
import BootstrapModal from 'react-bootstrap/Modal'
import Spinner from '../Spinner'
import styles from './Modal.module.scss'
const Modal = ({
show = false,
title = '',
onAccept,
onClose,
onShow,
onReject = null,
labelAccept = '',
labelReject = '',
size = 'md',
centered = true,
animation = true,
showFooter = true,
dialogClassName,
loading = false,
children,
formId = ''
}) => {
const labels = useSelector(({ intl }) => intl.labels)
return (
<BootstrapModal
animation={animation}
className={dialogClassName}
centered={centered}
show={show}
size={size}
onHide={onClose}
onShow={onShow}
autoFocus={false}
enforceFocus={false}
>
<BootstrapModal.Header className={styles['modal-header']} closeButton>
<BootstrapModal.Title>{title}</BootstrapModal.Title>
</BootstrapModal.Header>
<BootstrapModal.Body className={styles['modal-content']}>
{loading && <Spinner absolute />}
{children}
</BootstrapModal.Body>
{showFooter ? (
<BootstrapModal.Footer className={styles['modal-footer']}>
<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>
</BootstrapModal.Footer>
) : null}
</BootstrapModal>
)
}
export default Modal