Proyectos de Subversion LeadersLinked - SPA

Rev

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