Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 1259 | Rev 5498 | Ir a la última revisión | | Comparar con el anterior | 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",
2320 stevensc 34 
        top: "-2.5rem",
1 www 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>
1259 steven 43 
      <p className="popover-header">Está seguro?</p>
1 www 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">
1096 stevensc 48 
            <button
49 
              type="button"
1 www 50 
              className="h-100 d-flex align-items-center btn btn-sm btn-primary"
1096 stevensc 51 
              onClick={() => {
1 www 52 
                onAccept();
53 
                onClose();
54 
              }}
55 
            >
56 
              Si
1096 stevensc 57 
            </button>
58 
            <button
59 
              type="button"
1 www 60 
              className="h-100 d-flex align-items-center btn btn-sm btn-secondary"
1096 stevensc 61 
              onClick={() => {
1 www 62 
                onClose();
63 
              }}
64 
            >
65 
              No
1096 stevensc 66 
            </button>
1 www 67 
          </div>
68 
        </div>
69 
      </div>
70 
    </div>
71 
  );
72 
};
73 
 
74 
export default ConfirmationBox;