Proyectos de Subversion LeadersLinked - SPA

import React from 'react';
import { useSelector } from 'react-redux';
import { Button, IconButton } from '@mui/material';
import { Modal as MuiModal } from '@mui/material';
import { Close } from '@mui/icons-material';

import Spinner from '../Spinner';
import Widget from '../Widget';

const Modal = ({
  show = false,
  title = '',
  onAccept,
  onClose,
  onReject = null,
  labelAccept = '',
  labelReject = '',
  size = 'md',
  showFooter = true,
  dialogClassName,
  loading = false,
  children,
  formId = ''
}) => {
  const labels = useSelector(({ intl }) => intl.labels);

  return (
    <MuiModal open={show} 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>
    </MuiModal>
  );
};

export default Modal;