Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3694 | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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