Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2529 | Rev 2531 | 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, { useState, useCallback, useEffect } from "react";
2 
import { useDropzone } from "react-dropzone";
1282 stevensc 3 
import ShareModal from "../../dashboard/components/share-modal/ShareModal";
1 www 4 
import { shareModalTypes } from "../../redux/share-modal/shareModal.types";
5 
const areEqual = (prevProps, nextProps) => {
6 
  return prevProps.settedFile === nextProps.settedFile ? true : false;
7 
};
8 
 
9 
const DropzoneComponent = React.memo((props) => {
10 
  const { modalType, onUploaded, settedFile, recomendationText } = props;
11 
 
12 
  const [errors, setErrors] = useState([]);
13 
  const [files, setFiles] = useState([]);
14 
 
15 
  const onDropRejected = useCallback((rejectedFiles) => {
16 
    rejectedFiles.map((fileRejection) => {
17 
      switch (fileRejection.errors[0].code) {
18 
        case "too-many-files":
19 
          setErrors([...errors, "solo puedes agregar 1 archivo"]);
20 
          break;
21 
        case "file-invalid-type":
22 
          setErrors([...errors, "por favor seleccione un archivo valido"]);
23 
          break;
24 
        default:
25 
          setErrors(errors);
26 
          break;
27 
      }
28 
    });
29 
  }, []);
30 
 
31 
  useEffect(() => {
32 
    if (settedFile) setFiles([settedFile]);
33 
  }, [settedFile]);
34 
 
35 
  const acceptedMimeTypes = () => {
36 
    switch (modalType) {
37 
      case shareModalTypes.IMAGE:
38 
        return "image/jpeg, image/png, image/jpg";
39 
      case shareModalTypes.FILE:
40 
        return "application/pdf";
41 
      case shareModalTypes.VIDEO:
42 
        return "video/mp4, video/mpeg, video/webm";
43 
      case shareModalTypes.CHAT:
44 
        return "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
45 
      default:
46 
        return null;
47 
    }
48 
  };
2529 stevensc 49 
 
1 www 50 
  const {
51 
    getRootProps,
52 
    getInputProps,
53 
    acceptedFiles,
54 
    fileRejections,
55 
  } = useDropzone({
56 
    accept: acceptedMimeTypes(),
57 
    multiple: false,
2530 stevensc 58 
    validator: (file) => {
59 
      // You can access width/height properties
60 
      if (file.width > 720) {
61 
        return {
62 
          code: "Tamaño de imagen superior al sugerido",
63 
          message: `Ancho de imagen superior a los 720px`,
64 
        }
65 
      }
66 
      return null
67 
    },
1 www 68 
    onDrop: (acceptedFiles) => {
69 
      onUploaded(acceptedFiles[0]);
70 
      setFiles(acceptedFiles.map((file) => file));
71 
    },
72 
    onDropRejected,
73 
    onDropAccepted: () => {
74 
      setErrors([]);
75 
    },
76 
    maxFiles: 1,
77 
  });
78 
  const thumbStyle = {
79 
    display: "inline-flex",
80 
    borderRadius: "2px",
81 
    border: "1px solid #eaeaea",
82 
    marginBottom: "8px",
83 
    marginRight: "8px",
84 
    width: "150px",
85 
    height: "150px",
86 
    padding: "4px",
87 
    boxSizing: "border-box",
88 
    position: "relative",
89 
    zIndex: "100",
90 
  };
91 
  const thumbInnerStyle = {
92 
    display: "flex",
93 
    minWidth: 0,
94 
    overflow: "hidden",
95 
    marginRight: "1.5rem",
96 
  };
97 
  const imgStyle = {
98 
    display: "block",
99 
    width: "auto",
100 
    height: "100%",
101 
    objectFit: "contain",
102 
  };
103 
 
104 
  const onDeleteFileHandler = (index) => {
105 
    const newFiles = files.filter((_, id) => id !== index);
106 
    onUploaded("");
107 
    setFiles(newFiles);
108 
  };
109 
 
110 
  const CloseButtonContainer = {
111 
    width: "20px",
112 
    height: "20px",
113 
    position: "absolute",
114 
    top: "5px",
115 
    right: "0px",
116 
    cursor: "pointer",
117 
    zIndex: "200",
118 
  };
119 
 
120 
  const filePreviewTest = (file, id) => {
1282 stevensc 121 
    console.log(file)
122 
    console.log(id)
123 
    console.log(shareModalTypes)
1 www 124 
    switch (modalType) {
125 
      case shareModalTypes.IMAGE:
126 
        return (
127 
          <div style={thumbStyle} key={file.name}>
128 
            <div style={thumbInnerStyle}>
129 
              <img src={URL.createObjectURL(file)} style={imgStyle} />
130 
            </div>
131 
            <div
132 
              style={CloseButtonContainer}
133 
              onClick={() => onDeleteFileHandler(id)}
134 
            >
135 
              <img
136 
                src="/css/icons/x-circle-fill.svg"
137 
                alt="close-button"
138 
                style={{ width: "100%", height: "100%" }}
139 
              />
140 
            </div>
141 
          </div>
142 
        );
143 
      case shareModalTypes.FILE:
144 
        return (
145 
          <div
146 
            style={{ ...thumbStyle, width: "auto", height: "auto" }}
147 
            key={file.name}
148 
          >
149 
            <div style={thumbInnerStyle}>
150 
              <object
151 
                data={URL.createObjectURL(file)}
152 
                type="application/pdf"
153 
                width="400"
154 
                height="200"
155 
              ></object>
156 
            </div>
157 
            <div
158 
              style={CloseButtonContainer}
159 
              onClick={() => onDeleteFileHandler(id)}
160 
            >
161 
              <img
162 
                src="/css/icons/x-circle-fill.svg"
163 
                alt="close-button"
164 
                style={{ width: "100%", height: "100%" }}
165 
              />
166 
            </div>
167 
          </div>
168 
        );
169 
      case shareModalTypes.VIDEO:
170 
        return (
171 
          <div
172 
            style={{ ...thumbStyle, width: "auto", height: "auto" }}
173 
            key={file.name}
174 
          >
175 
            <div style={thumbInnerStyle}>
176 
              <video
177 
                src={URL.createObjectURL(file)}
178 
                width="400"
179 
                height="300"
180 
                controls
181 
                autoPlay
182 
                muted
183 
              ></video>
184 
            </div>
185 
            <div
186 
              style={CloseButtonContainer}
187 
              onClick={() => onDeleteFileHandler(id)}
188 
            >
189 
              <img
190 
                src="/css/icons/x-circle-fill.svg"
191 
                alt="close-button"
192 
                style={{ width: "100%", height: "100%" }}
193 
              />
194 
            </div>
195 
          </div>
196 
        );
197 
      case shareModalTypes.CHAT:
198 
        switch (file.type) {
199 
          case "video/mp4":
200 
          case "video/mpeg":
201 
          case "video/webm":
202 
            return (
203 
              <div
204 
                style={{ ...thumbStyle, width: "auto", height: "auto" }}
205 
                key={file.name}
206 
              >
207 
                <div style={thumbInnerStyle}>
208 
                  <video
209 
                    src={URL.createObjectURL(file)}
210 
                    width="400"
211 
                    height="300"
212 
                    controls
213 
                    autoPlay
214 
                    muted
215 
                  ></video>
216 
                </div>
217 
                <div
218 
                  style={CloseButtonContainer}
219 
                  onClick={() => onDeleteFileHandler(id)}
220 
                >
221 
                  <img
222 
                    src="/css/icons/x-circle-fill.svg"
223 
                    alt="close-button"
224 
                    style={{ width: "100%", height: "100%" }}
225 
                  />
226 
                </div>
227 
              </div>
228 
            );
229 
          case "image/jpeg":
230 
          case "image/png":
231 
          case "image/jpg":
232 
            return (
233 
              <div style={thumbStyle} key={file.name}>
234 
                <div style={thumbInnerStyle}>
235 
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
236 
                </div>
237 
                <div
238 
                  style={CloseButtonContainer}
239 
                  onClick={() => onDeleteFileHandler(id)}
240 
                >
241 
                  <img
242 
                    src="/css/icons/x-circle-fill.svg"
243 
                    alt="close-button"
244 
                    style={{ width: "100%", height: "100%" }}
245 
                  />
246 
                </div>
247 
              </div>
248 
            );
249 
          case "application/pdf":
250 
            return (
251 
              <div
252 
                style={{ ...thumbStyle, width: "auto", height: "auto" }}
253 
                key={file.name}
254 
              >
255 
                <div style={thumbInnerStyle}>
256 
                  <object
257 
                    data={URL.createObjectURL(file)}
258 
                    type="application/pdf"
259 
                    width="400"
260 
                    height="200"
261 
                  ></object>
262 
                </div>
263 
                <div
264 
                  style={CloseButtonContainer}
265 
                  onClick={() => onDeleteFileHandler(id)}
266 
                >
267 
                  <img
268 
                    src="/css/icons/x-circle-fill.svg"
269 
                    alt="close-button"
270 
                    style={{ width: "100%", height: "100%" }}
271 
                  />
272 
                </div>
273 
              </div>
274 
            );
275 
          default:
276 
            break;
277 
        }
278 
        break;
279 
      default:
280 
        break;
281 
    }
282 
  };
283 
 
284 
  const thumbsContainerStyle = {
285 
    display: "flex",
286 
    flexDirection: "row",
287 
    flexWrap: "wrap",
288 
    marginTop: 16,
289 
    position: "relative",
290 
    justifyContent: "center",
291 
  };
292 
 
293 
  const baseStyle = {
294 
    display: "flex",
295 
    flexDirection: "column",
296 
    alignItems: "center",
297 
    padding: "2rem 0",
298 
    borderWidth: 2,
299 
    borderRadius: 2,
300 
    borderColor: "#eeeeee",
301 
    borderStyle: "dashed",
302 
    backgroundColor: "#fafafa",
303 
    color: "#bdbdbd",
304 
    outline: "none",
305 
    transition: "border .24s ease-in-out",
306 
    marginTop: "1rem",
307 
    cursor: "pointer",
308 
  };
309 
 
310 
  return (
311 
    <div>
1282 stevensc 312 
      {
1283 stevensc 313 
        !files.length
1282 stevensc 314 
        &&
1 www 315 
        <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
316 
          <input {...getInputProps()} />
317 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
318 
          {recomendationText}
319 
        </div>
1282 stevensc 320 
      }
1 www 321 
      <aside>
322 
        <div style={thumbsContainerStyle}>
1282 stevensc 323 
          {
324 
            files.map((file, id) => filePreviewTest(file, id))
325 
          }
1 www 326 
        </div>
327 
        {errors.map((error, index) => (
328 
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
329 
        ))}
330 
      </aside>
331 
    </div>
332 
  );
333 
}, areEqual);
334 
 
335 
export default DropzoneComponent;