Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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