Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 1919 | Rev 1921 | 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 
 
1920 stevensc 30 
  const handleAccept = () => {
1918 stevensc 31 
    setLoading(true)
32 
 
1920 stevensc 33 
    setTimeout(() => setLoading(false), 2000)
34 
  }
35 
 
1426 stevensc 36 
  return (
37 
    <BootstrapModal
38 
      animation={animation}
39 
      className={dialogClassName}
40 
      centered={centered}
41 
      show={show}
42 
      size={size}
43 
      onHide={onClose}
44 
      onShow={onShow}
45 
    >
46 
      <BootstrapModal.Header className={styles['modal-header']} closeButton>
47 
        <BootstrapModal.Title>{title}</BootstrapModal.Title>
48 
      </BootstrapModal.Header>
49 
 
50 
      <BootstrapModal.Body className={styles['modal-content']}>
51 
        {children}
1912 stevensc 52 
 
1908 stevensc 53 
        {loading ? (
1904 stevensc 54 
          <Box
55 
            sx={{
56 
              position: 'absolute',
1908 stevensc 57 
              zIndex: 1250,
1904 stevensc 58 
              width: '100%',
59 
              height: '100%',
60 
              top: 0,
61 
              left: 0,
62 
              display: 'grid',
63 
              placeItems: 'center'
64 
            }}
65 
          >
66 
            <Spinner />
67 
          </Box>
1908 stevensc 68 
        ) : null}
1426 stevensc 69 
      </BootstrapModal.Body>
70 
 
71 
      {showFooter ? (
72 
        <BootstrapModal.Footer className={styles['modal-footer']}>
1908 stevensc 73 
          <Button variant='primary' onClick={handleAccept} disabled={loading}>
1567 stevensc 74 
            {labelAccept || labels.accept}
75 
          </Button>
76 
          <Button variant='secondary' onClick={onReject || onClose}>
77 
            {labelReject || labels.cancel}
78 
          </Button>
1426 stevensc 79 
        </BootstrapModal.Footer>
80 
      ) : null}
81 
    </BootstrapModal>
82 
  )
83 
}
84 
 
85 
export default Modal