Proyectos de Subversion LeadersLinked - Antes de SPA

import React, { useRef, useEffect } from "react";

const ConfirmationBox = (props) => {
  // props destructuring
  const { show, onClose, onAccept } = props;

  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"
      x-placement="top"
      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;