Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2320 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

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