Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1096 | Ir a la última revisión | | Ultima modificación | Ver Log |

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