Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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