Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 2556 | Rev 2722 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

import React, { useCallback, useState, useEffect } from 'react'
import { useSelector } from 'react-redux'

import BootstrapModal from 'react-bootstrap/Modal'

import { isPromise } from '@app/utils'

import Button from '../buttons/Buttons'

import styles from './Modal.module.scss'

const Modal = ({
  show = false,
  title = '',
  onAccept = () => null,
  onClose = () => {},
  onShow = () => {},
  onReject = null,
  labelAccept = '',
  labelReject = '',
  size = 'md',
  centered = true,
  animation = true,
  showFooter = true,
  dialogClassName,
  children
}) => {
  const [loading, setLoading] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const handleAccept = useCallback(() => {
    const enableLoading = isPromise(onAccept)

    if (enableLoading) setLoading(true)
    onAccept()
  }, [onAccept])

  useEffect(() => {
    if (!show && loading) setLoading(false)
  }, [show, loading])

  return (
    <BootstrapModal
      animation={animation}
      className={dialogClassName}
      centered={centered}
      show={show}
      size={size}
      onHide={onClose}
      onShow={onShow}
      autoFocus={false}
      enforceFocus={false}
    >
      <BootstrapModal.Header className={styles['modal-header']} closeButton>
        <BootstrapModal.Title>{title}</BootstrapModal.Title>
      </BootstrapModal.Header>

      <BootstrapModal.Body className={styles['modal-content']}>
        {children}
      </BootstrapModal.Body>

      {showFooter ? (
        <BootstrapModal.Footer className={styles['modal-footer']}>
          <Button variant='primary' onClick={handleAccept} disabled={loading}>
            {labelAccept || labels.accept}
          </Button>
          <Button variant='secondary' onClick={onReject || onClose}>
            {labelReject || labels.cancel}
          </Button>
        </BootstrapModal.Footer>
      ) : null}
    </BootstrapModal>
  )
}

export default Modal