Proyectos de Subversion LeadersLinked - SPA

Rev

Autoría | Ultima modificación | Ver Log |

import { Button, Modal, IconButton } from '@mui/material';
import { Close } from '@mui/icons-material';
import React from 'react';
import Widget from '../Widget';
import Spinner from '../Spinner';

const GlobalModal = ({
  title = '',
  size = 'md',
  onAccept,
  onClose,
  onReject = null,
  labelAccept = 'Aceptar',
  labelReject = 'Cancelar',
  showFooter = true,
  dialogClassName,
  loading = false,
  formId,
  children
}) => {
  const labels = {
    accept: 'Aceptar',
    cancel: 'Cancelar'
  };

  return (
    <Modal open onClose={onClose}>
      <Widget
        styles={{
          position: 'absolute',
          top: '50%',
          left: '50%',
          transform: 'translate(-50%, -50%)',
          maxWidth: size === 'sm' ? '300px' : size === 'md' ? '500px' : '700px',
          width: '100%',
          maxHeight: '90vh',
          overflowY: 'auto'
        }}
        className={dialogClassName}
      >
        <Widget.Header
          title={title}
          renderAction={() => (
            <IconButton onClick={onClose}>
              <Close />
            </IconButton>
          )}
        />

        <Widget.Body styles={{ position: 'relative' }}>
          {loading && <Spinner absolute />}
          {children}
        </Widget.Body>

        {showFooter && (
          <Widget.Footer styles={{ display: 'flex', justifyContent: 'flex-start', gap: 1 }}>
            <Button
              color='primary'
              onClick={onAccept}
              disabled={loading}
              form={formId}
              type={formId ? 'submit' : 'button'}
            >
              {labelAccept || labels.accept}
            </Button>
            <Button color='secondary' onClick={onReject || onClose}>
              {labelReject || labels.cancel}
            </Button>
          </Widget.Footer>
        )}
      </Widget>
    </Modal>
  );
};

export default GlobalModal;