Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5498 | | Comparar con el anterior | Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
5498 stevensc 1 
import React, { useRef, useEffect } from 'react'
1 www 2 
 
5498 stevensc 3 
const ConfirmationBox = ({ show, onClose, onAccept }) => {
4 
  const confirmationBoxRef = useRef()
1 www 5 
 
6 
  const clickOutsideConfirmationBoxHandler = (event) => {
7 
    if (show) {
8 
      if (!confirmationBoxRef.current.contains(event.target)) {
5498 stevensc 9 
        onClose()
1 www 10 
      }
11 
    }
5498 stevensc 12 
  }
1 www 13 
 
14 
  useEffect(() => {
5498 stevensc 15 
    document.addEventListener('mousedown', clickOutsideConfirmationBoxHandler)
1 www 16 
    return () => {
17 
      document.removeEventListener(
5498 stevensc 18 
        'mousedown',
1 www 19 
        clickOutsideConfirmationBoxHandler
5498 stevensc 20 
      )
21 
    }
22 
  }, [show])
1 www 23 
 
24 
  return (
25 
    <div
26 
      className="popover confirmation fade bs-popover-top show"
27 
      id="confirmation937427"
28 
      style={{
5498 stevensc 29 
        position: 'absolute',
30 
        top: '-2.5rem',
31 
        left: '50%',
32 
        transform: 'translate(-50%, -100%)',
33 
        width: '120px',
34 
        display: show ? 'block' : 'none',
1 www 35 
      }}
36 
      ref={confirmationBoxRef}
37 
    >
5498 stevensc 38 
      <div className="arrow" style={{ left: '46px' }}></div>
5995 stevensc 39 
      <p className="popover-header">¿Está seguro?</p>
1 www 40 
      <div className="popover-body">
5498 stevensc 41 
        <p className="confirmation-content" style={{ display: 'none' }}></p>
1 www 42 
        <div className="confirmation-buttons text-center">
43 
          <div className="btn-group">
1096 stevensc 44 
            <button
45 
              type="button"
1 www 46 
              className="h-100 d-flex align-items-center btn btn-sm btn-primary"
1096 stevensc 47 
              onClick={() => {
5498 stevensc 48 
                onAccept()
49 
                onClose()
1 www 50 
              }}
51 
            >
52 
              Si
1096 stevensc 53 
            </button>
54 
            <button
55 
              type="button"
1 www 56 
              className="h-100 d-flex align-items-center btn btn-sm btn-secondary"
1096 stevensc 57 
              onClick={() => {
5498 stevensc 58 
                onClose()
1 www 59 
              }}
60 
            >
61 
              No
1096 stevensc 62 
            </button>
1 www 63 
          </div>
64 
        </div>
65 
      </div>
66 
    </div>
5498 stevensc 67 
  )
68 
}
1 www 69 
 
5498 stevensc 70 
export default ConfirmationBox