Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 2530 | Rev 2532 | 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,
2531 stevensc 58 
    getFilesFromEvent: async (event) => {
59 
      if (modalType === shareModalTypes.IMAGE) {
60 
        const files = event.target.files || event.dataTransfer.files
61 
        const promises = []
62 
        for (let index = 0; index < files.length; index++) {
63 
          const file = files[index]
64 
          const promise = new Promise((resolve, reject) => {
65 
            const image = new Image()
66 
            let url
67 
            image.onload = function () {
68 
              file.width = image.width
69 
              file.height = image.height
70 
              resolve(file)
71 
            }
72 
            url = URL.createObjectURL(file)
73 
            image.src = url
74 
          })
75 
          promises.push(promise)
76 
        }
77 
        return await Promise.all(promises)
78 
      }
79 
 
80 
      return event
81 
    },
2530 stevensc 82 
    validator: (file) => {
83 
      // You can access width/height properties
84 
      if (file.width > 720) {
85 
        return {
86 
          code: "Tamaño de imagen superior al sugerido",
87 
          message: `Ancho de imagen superior a los 720px`,
88 
        }
89 
      }
90 
      return null
91 
    },
1 www 92 
    onDrop: (acceptedFiles) => {
93 
      onUploaded(acceptedFiles[0]);
94 
      setFiles(acceptedFiles.map((file) => file));
95 
    },
96 
    onDropRejected,
97 
    onDropAccepted: () => {
98 
      setErrors([]);
99 
    },
100 
    maxFiles: 1,
101 
  });
102 
  const thumbStyle = {
103 
    display: "inline-flex",
104 
    borderRadius: "2px",
105 
    border: "1px solid #eaeaea",
106 
    marginBottom: "8px",
107 
    marginRight: "8px",
108 
    width: "150px",
109 
    height: "150px",
110 
    padding: "4px",
111 
    boxSizing: "border-box",
112 
    position: "relative",
113 
    zIndex: "100",
114 
  };
115 
  const thumbInnerStyle = {
116 
    display: "flex",
117 
    minWidth: 0,
118 
    overflow: "hidden",
119 
    marginRight: "1.5rem",
120 
  };
121 
  const imgStyle = {
122 
    display: "block",
123 
    width: "auto",
124 
    height: "100%",
125 
    objectFit: "contain",
126 
  };
127 
 
128 
  const onDeleteFileHandler = (index) => {
129 
    const newFiles = files.filter((_, id) => id !== index);
130 
    onUploaded("");
131 
    setFiles(newFiles);
132 
  };
133 
 
134 
  const CloseButtonContainer = {
135 
    width: "20px",
136 
    height: "20px",
137 
    position: "absolute",
138 
    top: "5px",
139 
    right: "0px",
140 
    cursor: "pointer",
141 
    zIndex: "200",
142 
  };
143 
 
144 
  const filePreviewTest = (file, id) => {
1282 stevensc 145 
    console.log(file)
146 
    console.log(id)
147 
    console.log(shareModalTypes)
1 www 148 
    switch (modalType) {
149 
      case shareModalTypes.IMAGE:
150 
        return (
151 
          <div style={thumbStyle} key={file.name}>
152 
            <div style={thumbInnerStyle}>
153 
              <img src={URL.createObjectURL(file)} style={imgStyle} />
154 
            </div>
155 
            <div
156 
              style={CloseButtonContainer}
157 
              onClick={() => onDeleteFileHandler(id)}
158 
            >
159 
              <img
160 
                src="/css/icons/x-circle-fill.svg"
161 
                alt="close-button"
162 
                style={{ width: "100%", height: "100%" }}
163 
              />
164 
            </div>
165 
          </div>
166 
        );
167 
      case shareModalTypes.FILE:
168 
        return (
169 
          <div
170 
            style={{ ...thumbStyle, width: "auto", height: "auto" }}
171 
            key={file.name}
172 
          >
173 
            <div style={thumbInnerStyle}>
174 
              <object
175 
                data={URL.createObjectURL(file)}
176 
                type="application/pdf"
177 
                width="400"
178 
                height="200"
179 
              ></object>
180 
            </div>
181 
            <div
182 
              style={CloseButtonContainer}
183 
              onClick={() => onDeleteFileHandler(id)}
184 
            >
185 
              <img
186 
                src="/css/icons/x-circle-fill.svg"
187 
                alt="close-button"
188 
                style={{ width: "100%", height: "100%" }}
189 
              />
190 
            </div>
191 
          </div>
192 
        );
193 
      case shareModalTypes.VIDEO:
194 
        return (
195 
          <div
196 
            style={{ ...thumbStyle, width: "auto", height: "auto" }}
197 
            key={file.name}
198 
          >
199 
            <div style={thumbInnerStyle}>
200 
              <video
201 
                src={URL.createObjectURL(file)}
202 
                width="400"
203 
                height="300"
204 
                controls
205 
                autoPlay
206 
                muted
207 
              ></video>
208 
            </div>
209 
            <div
210 
              style={CloseButtonContainer}
211 
              onClick={() => onDeleteFileHandler(id)}
212 
            >
213 
              <img
214 
                src="/css/icons/x-circle-fill.svg"
215 
                alt="close-button"
216 
                style={{ width: "100%", height: "100%" }}
217 
              />
218 
            </div>
219 
          </div>
220 
        );
221 
      case shareModalTypes.CHAT:
222 
        switch (file.type) {
223 
          case "video/mp4":
224 
          case "video/mpeg":
225 
          case "video/webm":
226 
            return (
227 
              <div
228 
                style={{ ...thumbStyle, width: "auto", height: "auto" }}
229 
                key={file.name}
230 
              >
231 
                <div style={thumbInnerStyle}>
232 
                  <video
233 
                    src={URL.createObjectURL(file)}
234 
                    width="400"
235 
                    height="300"
236 
                    controls
237 
                    autoPlay
238 
                    muted
239 
                  ></video>
240 
                </div>
241 
                <div
242 
                  style={CloseButtonContainer}
243 
                  onClick={() => onDeleteFileHandler(id)}
244 
                >
245 
                  <img
246 
                    src="/css/icons/x-circle-fill.svg"
247 
                    alt="close-button"
248 
                    style={{ width: "100%", height: "100%" }}
249 
                  />
250 
                </div>
251 
              </div>
252 
            );
253 
          case "image/jpeg":
254 
          case "image/png":
255 
          case "image/jpg":
256 
            return (
257 
              <div style={thumbStyle} key={file.name}>
258 
                <div style={thumbInnerStyle}>
259 
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
260 
                </div>
261 
                <div
262 
                  style={CloseButtonContainer}
263 
                  onClick={() => onDeleteFileHandler(id)}
264 
                >
265 
                  <img
266 
                    src="/css/icons/x-circle-fill.svg"
267 
                    alt="close-button"
268 
                    style={{ width: "100%", height: "100%" }}
269 
                  />
270 
                </div>
271 
              </div>
272 
            );
273 
          case "application/pdf":
274 
            return (
275 
              <div
276 
                style={{ ...thumbStyle, width: "auto", height: "auto" }}
277 
                key={file.name}
278 
              >
279 
                <div style={thumbInnerStyle}>
280 
                  <object
281 
                    data={URL.createObjectURL(file)}
282 
                    type="application/pdf"
283 
                    width="400"
284 
                    height="200"
285 
                  ></object>
286 
                </div>
287 
                <div
288 
                  style={CloseButtonContainer}
289 
                  onClick={() => onDeleteFileHandler(id)}
290 
                >
291 
                  <img
292 
                    src="/css/icons/x-circle-fill.svg"
293 
                    alt="close-button"
294 
                    style={{ width: "100%", height: "100%" }}
295 
                  />
296 
                </div>
297 
              </div>
298 
            );
299 
          default:
300 
            break;
301 
        }
302 
        break;
303 
      default:
304 
        break;
305 
    }
306 
  };
307 
 
308 
  const thumbsContainerStyle = {
309 
    display: "flex",
310 
    flexDirection: "row",
311 
    flexWrap: "wrap",
312 
    marginTop: 16,
313 
    position: "relative",
314 
    justifyContent: "center",
315 
  };
316 
 
317 
  const baseStyle = {
318 
    display: "flex",
319 
    flexDirection: "column",
320 
    alignItems: "center",
321 
    padding: "2rem 0",
322 
    borderWidth: 2,
323 
    borderRadius: 2,
324 
    borderColor: "#eeeeee",
325 
    borderStyle: "dashed",
326 
    backgroundColor: "#fafafa",
327 
    color: "#bdbdbd",
328 
    outline: "none",
329 
    transition: "border .24s ease-in-out",
330 
    marginTop: "1rem",
331 
    cursor: "pointer",
332 
  };
333 
 
334 
  return (
335 
    <div>
1282 stevensc 336 
      {
1283 stevensc 337 
        !files.length
1282 stevensc 338 
        &&
1 www 339 
        <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
340 
          <input {...getInputProps()} />
341 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
342 
          {recomendationText}
343 
        </div>
1282 stevensc 344 
      }
1 www 345 
      <aside>
346 
        <div style={thumbsContainerStyle}>
1282 stevensc 347 
          {
348 
            files.map((file, id) => filePreviewTest(file, id))
349 
          }
1 www 350 
        </div>
351 
        {errors.map((error, index) => (
352 
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
353 
        ))}
354 
      </aside>
355 
    </div>
356 
  );
357 
}, areEqual);
358 
 
359 
export default DropzoneComponent;