Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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