Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
1914 stevensc 1
import React, { useCallback, 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'
10
 
11
const Modal = ({
12
  show = false,
13
  title = '',
1916 stevensc 14
  onAccept = () => null,
1426 stevensc 15
  onClose = () => {},
16
  onShow = () => {},
17
  onReject = null,
18
  labelAccept = '',
19
  labelReject = '',
20
  size = 'md',
21
  centered = true,
22
  animation = true,
23
  showFooter = true,
24
  dialogClassName,
25
  children
26
}) => {
1911 stevensc 27
  const [loading, setLoading] = useState(false)
1426 stevensc 28
  const labels = useSelector(({ intl }) => intl.labels)
29
 
1914 stevensc 30
  const handleAccept = useCallback(() => {
1918 stevensc 31
    if (!onAccept) return
1904 stevensc 32
 
1918 stevensc 33
    if (!onAccept().finally) {
1904 stevensc 34
      onAccept()
1918 stevensc 35
      return
1904 stevensc 36
    }
37
 
1918 stevensc 38
    setLoading(true)
39
    onAccept().finally(() => setLoading(false))
40
  }, [onAccept])
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}
1912 stevensc 58
 
1908 stevensc 59
        {loading ? (
1904 stevensc 60
          <Box
61
            sx={{
62
              position: 'absolute',
1908 stevensc 63
              zIndex: 1250,
1904 stevensc 64
              width: '100%',
65
              height: '100%',
66
              top: 0,
67
              left: 0,
68
              display: 'grid',
69
              placeItems: 'center'
70
            }}
71
          >
72
            <Spinner />
73
          </Box>
1908 stevensc 74
        ) : null}
1426 stevensc 75
      </BootstrapModal.Body>
76
 
77
      {showFooter ? (
78
        <BootstrapModal.Footer className={styles['modal-footer']}>
1908 stevensc 79
          <Button variant='primary' onClick={handleAccept} disabled={loading}>
1567 stevensc 80
            {labelAccept || labels.accept}
81
          </Button>
82
          <Button variant='secondary' onClick={onReject || onClose}>
83
            {labelReject || labels.cancel}
84
          </Button>
1426 stevensc 85
        </BootstrapModal.Footer>
86
      ) : null}
87
    </BootstrapModal>
88
  )
89
}
90
 
91
export default Modal