Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1567 | Rev 1906 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1904 stevensc 1 
import React, { useState } from 'react'
1426 stevensc 2 
import { useSelector } from 'react-redux'
1904 stevensc 3 
import { Box } from '@mui/material'
1426 stevensc 4 
import BootstrapModal from 'react-bootstrap/Modal'
5 
 
1567 stevensc 6 
import Button from '../buttons/Buttons'
1904 stevensc 7 
import Spinner from '../Spinner'
1426 stevensc 8 
 
9 
import styles from './Modal.module.scss'
1904 stevensc 10 
import { isPromise } from '@app/utils'
1426 stevensc 11 
 
12 
const Modal = ({
13 
  show = false,
14 
  title = '',
15 
  onAccept = () => {},
16 
  onClose = () => {},
17 
  onShow = () => {},
18 
  onReject = null,
19 
  labelAccept = '',
20 
  labelReject = '',
21 
  size = 'md',
22 
  centered = true,
23 
  animation = true,
24 
  showFooter = true,
25 
  dialogClassName,
26 
  children
27 
}) => {
1904 stevensc 28 
  const [loading, setLoading] = useState(false)
1426 stevensc 29 
  const labels = useSelector(({ intl }) => intl.labels)
30 
 
1904 stevensc 31 
  const handleAccept = () => {
32 
    const enableLoading = isPromise(onAccept)
33 
 
34 
    if (!enableLoading) {
35 
      onAccept()
36 
    }
37 
 
38 
    setLoading(true)
39 
    onAccept().finally(() => setLoading(false))
40 
  }
41 
 
1426 stevensc 42 
  return (
43 
    <BootstrapModal
44 
      animation={animation}
45 
      className={dialogClassName}
46 
      centered={centered}
47 
      show={show}
48 
      size={size}
49 
      onHide={onClose}
50 
      onShow={onShow}
51 
    >
52 
      <BootstrapModal.Header className={styles['modal-header']} closeButton>
53 
        <BootstrapModal.Title>{title}</BootstrapModal.Title>
54 
      </BootstrapModal.Header>
55 
 
56 
      <BootstrapModal.Body className={styles['modal-content']}>
57 
        {children}
1904 stevensc 58 
        {loading && (
59 
          <Box
60 
            sx={{
61 
              position: 'absolute',
62 
              zIndex: 50,
63 
              width: '100%',
64 
              height: '100%',
65 
              top: 0,
66 
              left: 0,
67 
              display: 'grid',
68 
              placeItems: 'center'
69 
            }}
70 
          >
71 
            <Spinner />
72 
          </Box>
73 
        )}
1426 stevensc 74 
      </BootstrapModal.Body>
75 
 
76 
      {showFooter ? (
77 
        <BootstrapModal.Footer className={styles['modal-footer']}>
1904 stevensc 78 
          <Button variant='primary' onClick={handleAccept}>
1567 stevensc 79 
            {labelAccept || labels.accept}
80 
          </Button>
81 
          <Button variant='secondary' onClick={onReject || onClose}>
82 
            {labelReject || labels.cancel}
83 
          </Button>
1426 stevensc 84 
        </BootstrapModal.Footer>
85 
      ) : null}
86 
    </BootstrapModal>
87 
  )
88 
}
89 
 
90 
export default Modal