Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
1926 stevensc 1 
import React, { useCallback, useState, useEffect } 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 
 
1922 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,
1960 stevensc 26 
  dialogClassName,
1426 stevensc 27 
  children
28 
}) => {
1911 stevensc 29 
  const [loading, setLoading] = useState(false)
1426 stevensc 30 
  const labels = useSelector(({ intl }) => intl.labels)
31 
 
1925 stevensc 32 
  const handleAccept = useCallback(() => {
1922 stevensc 33 
    const enableLoading = isPromise(onAccept)
1972 stevensc 34 
    try {
35 
      if (enableLoading) setLoading(true)
1923 stevensc 36 
 
1972 stevensc 37 
      onAccept()
38 
    } finally {
39 
      setLoading(false)
40 
    }
1921 stevensc 41 
  }, [onAccept])
1918 stevensc 42 
 
1926 stevensc 43 
  useEffect(() => {
44 
    if (!show && loading) setLoading(false)
45 
  }, [show, loading])
46 
 
1426 stevensc 47 
  return (
48 
    <BootstrapModal
49 
      animation={animation}
1960 stevensc 50 
      className={dialogClassName}
1426 stevensc 51 
      centered={centered}
52 
      show={show}
53 
      size={size}
54 
      onHide={onClose}
55 
      onShow={onShow}
56 
    >
57 
      <BootstrapModal.Header className={styles['modal-header']} closeButton>
58 
        <BootstrapModal.Title>{title}</BootstrapModal.Title>
59 
      </BootstrapModal.Header>
60 
 
61 
      <BootstrapModal.Body className={styles['modal-content']}>
62 
        {children}
1912 stevensc 63 
 
1908 stevensc 64 
        {loading ? (
1904 stevensc 65 
          <Box
66 
            sx={{
67 
              position: 'absolute',
1908 stevensc 68 
              zIndex: 1250,
1904 stevensc 69 
              width: '100%',
70 
              height: '100%',
71 
              top: 0,
72 
              left: 0,
73 
              display: 'grid',
74 
              placeItems: 'center'
75 
            }}
76 
          >
77 
            <Spinner />
78 
          </Box>
1908 stevensc 79 
        ) : null}
1426 stevensc 80 
      </BootstrapModal.Body>
81 
 
82 
      {showFooter ? (
83 
        <BootstrapModal.Footer className={styles['modal-footer']}>
1908 stevensc 84 
          <Button variant='primary' onClick={handleAccept} disabled={loading}>
1567 stevensc 85 
            {labelAccept || labels.accept}
86 
          </Button>
87 
          <Button variant='secondary' onClick={onReject || onClose}>
88 
            {labelReject || labels.cancel}
89 
          </Button>
1426 stevensc 90 
        </BootstrapModal.Footer>
91 
      ) : null}
92 
    </BootstrapModal>
93 
  )
94 
}
95 
 
96 
export default Modal