Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev Autor Línea Nro. Línea
1 www 1
import React from "react";
2
import { Button, Modal } from "react-bootstrap";
3
import styled from "styled-components";
4
import Spinner from "../loading-spinner/Spinner";
5
import styles from "./ConfirmModal.module.scss";
6
import "../../css/shared/global.scss";
7
 
8
const StyledModalBody = styled.div`
9
  width: 100%;
10
  height: 100%;
11
  display: flex;
12
  justify-content: space-evenly;
13
  align-items: center;
14
  margin-top: 1rem;
15
`;
16
 
17
const StyledModal = styled.div`
18
  .modal {
19
    width: 200px;
20
  }
21
`;
22
 
23
const ConfirmModal = (props) => {
24
  // props destructuring
25
  const {
26
    show,
27
    onClose,
28
    title = "Está seguro?",
29
    loading,
30
    onAccept,
31
    message,
32
    acceptLabel = "Enviar",
33
  } = props;
34
 
35
  // states
36
  // const [isLoading, setisLoading] = useState(false);
37
  // useEffect(() => {
38
 
39
  // }, [input])
40
  return (
41
    <StyledModal>
42
      <Modal
43
        size="sm"
44
        show={show}
45
        onHide={() => {
46
          onClose(false);
47
        }}
48
        style={{ overflowY: "scroll" }}
49
      >
50
        <Modal.Header closeButton>
51
          <Modal.Title>{title}</Modal.Title>
52
        </Modal.Header>
53
        <Modal.Body>
54
          {message && message}
55
          <StyledModalBody>
56
            <Button size="lg" type="submit" onClick={onAccept}>
57
              {acceptLabel}
58
            </Button>
59
            <Button
60
              size="lg"
61
              onClick={() => {
62
                onClose(false);
63
              }}
64
            >
65
              Cancelar
66
            </Button>
67
          </StyledModalBody>
68
        </Modal.Body>
69
 
70
        {loading && (
71
          <div className="spinner-container">
72
            <Spinner />
73
          </div>
74
        )}
75
      </Modal>
76
    </StyledModal>
77
  );
78
};
79
 
80
export default ConfirmModal;