Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

| Ultima modificación | Ver Log |

Rev Autor Línea Nro. Línea
1 www 1 
import React from "react";
2 
import { useState } from "react";
3 
import { Button, Modal } from "react-bootstrap";
4 
import { useForm } from "react-hook-form";
5 
import styled from "styled-components";
6 
import FormErrorFeedback from "../../../../../../shared/form-error-feedback/FormErrorFeedback";
7 
import Spinner from "../../../../../../shared/loading-spinner/Spinner";
8 
import UbicationInput from "../../../../../../shared/ubication-input/UbicationInput";
9 
 
10 
const StyledSpinnerContainer = styled.div`
11 
  position: absolute;
12 
  left: 0;
13 
  top: 0;
14 
  width: 100%;
15 
  height: 100%;
16 
  background: rgba(255, 255, 255, 0.4);
17 
  display: flex;
18 
  justify-content: center;
19 
  align-items: center;
20 
  z-index: 300;
21 
`;
22 
 
23 
const StyledSwitch = styled.label`
24 
  position: relative;
25 
  display: inline-block;
26 
  width: 60px;
27 
  height: 34px;
28 
  input {
29 
    opacity: 0;
30 
    width: 0;
31 
    height: 0;
32 
  }
33 
  .slider {
34 
    position: absolute;
35 
    cursor: pointer;
36 
    top: 0;
37 
    left: 0;
38 
    right: 0;
39 
    bottom: 0;
40 
    background-color: #ccc;
41 
    -webkit-transition: 0.4s;
42 
    transition: 0.4s;
43 
  }
44 
  .slider:before {
45 
    position: absolute;
46 
    content: "";
47 
    height: 26px;
48 
    width: 26px;
49 
    left: 4px;
50 
    bottom: 4px;
51 
    background-color: white;
52 
    -webkit-transition: 0.4s;
53 
    transition: 0.4s;
54 
  }
55 
  input:checked + .slider {
56 
    background-color: #2196f3;
57 
  }
58 
  input:focus + .slider {
59 
    box-shadow: 0 0 1px #2196f3;
60 
  }
61 
  input:checked + .slider:before {
62 
    -webkit-transform: translateX(26px);
63 
    -ms-transform: translateX(26px);
64 
    transform: translateX(26px);
65 
  }
66 
  .slider.round {
67 
    border-radius: 34px;
68 
  }
69 
 
70 
  .slider.round:before {
71 
    border-radius: 50%;
72 
  }
73 
`;
74 
 
75 
const AddLocationModal = (props) => {
76 
  // props destructuring
77 
  const {
78 
    isModalOpen,
79 
    handleModalOpen,
80 
    handleSubmit,
81 
    watch,
82 
    getAddressHandler,
83 
    errors,
84 
    modalLoading,
85 
    onSubmitHandler,
86 
    register,
87 
  } = props;
88 
 
89 
  // states
90 
  const [locationType, setLocationType] = useState("");
91 
 
92 
  return (
93 
    <Modal
94 
      show={isModalOpen}
95 
      onHide={handleModalOpen}
96 
      style={{ overflowY: "scroll" }}
97 
    >
98 
      <Modal.Header closeButton>
99 
        <Modal.Title>Ubicación</Modal.Title>
100 
      </Modal.Header>
101 
      <form onSubmit={handleSubmit(onSubmitHandler)}>
102 
        <Modal.Body>
103 
          <div className="form-group datefm">
104 
            <UbicationInput
105 
              onGetAddress={getAddressHandler}
106 
              settedQuery={watch("formatted_address")}
107 
            />
108 
            <i className="fa fa-map-marker"></i>
109 
            {errors.formatted_address && (
110 
              <FormErrorFeedback>
111 
                {errors.formatted_address.message}
112 
              </FormErrorFeedback>
113 
            )}
114 
          </div>
115 
          <label htmlFor="is_main"> Principal </label>
116 
          <div className="form-group datefm">
117 
            <StyledSwitch className="switch">
118 
              <input
119 
                type="checkbox"
120 
                name="is_main"
121 
                id="is_main"
122 
                value="y"
123 
                ref={register}
124 
              />
125 
              <span className="slider round"></span>
126 
            </StyledSwitch>
127 
          </div>
128 
        </Modal.Body>
129 
        <Modal.Footer>
130 
          <Button type="submit">Enviar</Button>
131 
          <Button variant="danger" onClick={handleModalOpen}>
132 
            Cancel
133 
          </Button>
134 
        </Modal.Footer>
135 
      </form>
136 
      {modalLoading && (
137 
        <StyledSpinnerContainer>
138 
          <Spinner />
139 
        </StyledSpinnerContainer>
140 
      )}
141 
    </Modal>
142 
  );
143 
};
144 
 
145 
export default AddLocationModal;