Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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