Proyectos de Subversion LeadersLinked - SPA

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