Proyectos de Subversion LeadersLinked - SPA

Rev

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

Rev Autor Línea Nro. Línea
3584 stevensc 1 
import React from 'react';
2 
import { useSelector } from 'react-redux';
3 
import { Button, IconButton } from '@mui/material';
4 
import { Modal as MuiModal } from '@mui/material';
5 
import { Close } from '@mui/icons-material';
1426 stevensc 6 
 
3584 stevensc 7 
import Spinner from '../Spinner';
8 
import Widget from '../Widget';
1426 stevensc 9 
 
10 
const Modal = ({
11 
  show = false,
12 
  title = '',
3172 stevensc 13 
  onAccept,
14 
  onClose,
1426 stevensc 15 
  onReject = null,
16 
  labelAccept = '',
17 
  labelReject = '',
18 
  size = 'md',
19 
  showFooter = true,
1960 stevensc 20 
  dialogClassName,
2722 stevensc 21 
  loading = false,
3171 stevensc 22 
  children,
23 
  formId = ''
1426 stevensc 24 
}) => {
3584 stevensc 25 
  const labels = useSelector(({ intl }) => intl.labels);
1426 stevensc 26 
 
27 
  return (
3584 stevensc 28 
    <MuiModal open={show} onClose={onClose}>
29 
      <Widget
30 
        styles={{
31 
          position: 'absolute',
32 
          top: '50%',
33 
          left: '50%',
34 
          transform: 'translate(-50%, -50%)',
3679 stevensc 35 
          maxWidth: size === 'sm' ? '300px' : size === 'md' ? '500px' : '700px',
36 
          width: '100%',
3584 stevensc 37 
          maxHeight: '90vh',
38 
          overflowY: 'auto'
39 
        }}
40 
        className={dialogClassName}
41 
      >
42 
        <Widget.Header
43 
          title={title}
44 
          renderAction={() => (
45 
            <IconButton onClick={onClose}>
46 
              <Close />
47 
            </IconButton>
48 
          )}
49 
        />
1426 stevensc 50 
 
3584 stevensc 51 
        <Widget.Body styles={{ position: 'relative' }}>
52 
          {loading && <Spinner absolute />}
53 
          {children}
54 
        </Widget.Body>
1426 stevensc 55 
 
3584 stevensc 56 
        {showFooter && (
3585 stevensc 57 
          <Widget.Footer styles={{ display: 'flex', justifyContent: 'flex-start', gap: 1 }}>
3584 stevensc 58 
            <Button
59 
              color='primary'
60 
              onClick={onAccept}
61 
              disabled={loading}
62 
              form={formId}
63 
              type={formId ? 'submit' : 'button'}
64 
            >
65 
              {labelAccept || labels.accept}
66 
            </Button>
67 
            <Button color='secondary' onClick={onReject || onClose}>
68 
              {labelReject || labels.cancel}
69 
            </Button>
3585 stevensc 70 
          </Widget.Footer>
3584 stevensc 71 
        )}
72 
      </Widget>
73 
    </MuiModal>
74 
  );
75 
};
1426 stevensc 76 
 
3584 stevensc 77 
export default Modal;