Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useEffect } from 'react'

const ConfirmationBox = ({ show, onClose, onAccept }) => {
  const confirmationBoxRef = useRef()

  const clickOutsideConfirmationBoxHandler = (event) => {
    if (show) {
      if (!confirmationBoxRef.current.contains(event.target)) {
        onClose()
      }
    }
  }

  useEffect(() => {
    document.addEventListener('mousedown', clickOutsideConfirmationBoxHandler)
    return () => {
      document.removeEventListener(
        'mousedown',
        clickOutsideConfirmationBoxHandler
      )
    }
  }, [show])

  return (
    <div
      className="popover confirmation fade bs-popover-top show"
      id="confirmation937427"
      style={{
        position: 'absolute',
        top: '-2.5rem',
        left: '50%',
        transform: 'translate(-50%, -100%)',
        width: '120px',
        display: show ? 'block' : 'none',
      }}
      ref={confirmationBoxRef}
    >
      <div className="arrow" style={{ left: '46px' }}></div>
      <p className="popover-header">¿Está seguro?</p>
      <div className="popover-body">
        <p className="confirmation-content" style={{ display: 'none' }}></p>
        <div className="confirmation-buttons text-center">
          <div className="btn-group">
            <button
              type="button"
              className="h-100 d-flex align-items-center btn btn-sm btn-primary"
              onClick={() => {
                onAccept()
                onClose()
              }}
            >
              Si
            </button>
            <button
              type="button"
              className="h-100 d-flex align-items-center btn btn-sm btn-secondary"
              onClick={() => {
                onClose()
              }}
            >
              No
            </button>
          </div>
        </div>
      </div>
    </div>
  )
}

export default ConfirmationBox