Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3260 | Rev 5290 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 3260 Rev 5289
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useState, useCallback, useEffect } from "react";
 2 
import React, { useState, useCallback, useEffect } from 'react'
3 
import { useDropzone } from "react-dropzone";
 3 
import { useDropzone } from 'react-dropzone'
4 
import { shareModalTypes } from "../../redux/share-modal/shareModal.types";
 4 
import { shareModalTypes } from '../../redux/share-modal/shareModal.types'
5 
import FormErrorFeedback from "../form-error-feedback/FormErrorFeedback";
 5 
import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'
6 
const areEqual = (prevProps, nextProps) => {
 6 
const areEqual = (prevProps, nextProps) => {
7 
  return prevProps.settedFile === nextProps.settedFile ? true : false;
 7 
  return prevProps.settedFile === nextProps.settedFile
8 
};
 8 
}
Línea 9... Línea 9...
9 
 
 9 
 
10 
const DropzoneComponent = (props) => {
 10 
const DropzoneComponent = (props) => {
Línea 11... Línea 11...
11 
  const { modalType, onUploaded, settedFile, recomendationText } = props;
 11 
  const { modalType, onUploaded, settedFile, recomendationText } = props
12 
 
 12 
 
Línea 13... Línea 13...
13 
  const [errors, setErrors] = useState([]);
 13 
  const [errors, setErrors] = useState([])
14 
  const [files, setFiles] = useState([]);
 14 
  const [files, setFiles] = useState([])
15 
 
 15 
 
16 
  const onDropRejected = useCallback((rejectedFiles) => {
 16 
  const onDropRejected = useCallback((rejectedFiles) => {
17 
    rejectedFiles.map((fileRejection) => {
 17 
    rejectedFiles.map((fileRejection) => {
18 
      switch (fileRejection.errors[0].code) {
 18 
      switch (fileRejection.errors[0].code) {
19 
        case "too-many-files":
 19 
        case 'too-many-files':
20 
          setErrors([...errors, "solo puedes agregar 1 archivo"]);
 20 
          setErrors([...errors, 'solo puedes agregar 1 archivo'])
21 
          break;
 21 
          break
22 
        case "file-invalid-type":
 22 
        case 'file-invalid-type':
23 
          setErrors([...errors, "por favor seleccione un archivo valido"]);
 23 
          setErrors([...errors, 'por favor seleccione un archivo valido'])
24 
          break;
 24 
          break
25 
        default:
 25 
        default:
26 
          setErrors(errors);
 26 
          setErrors(errors)
27 
          break;
 27 
          break
Línea 28... Línea 28...
28 
      }
 28 
      }
29 
    });
 29 
    })
30 
  }, []);
 30 
  }, [])
Línea 31... Línea 31...
31 
 
 31 
 
32 
  useEffect(() => {
 32 
  useEffect(() => {
33 
    if (settedFile) setFiles([settedFile]);
 33 
    if (settedFile) setFiles([settedFile])
34 
  }, [settedFile]);
 34 
  }, [settedFile])
35 
 
 35 
 
36 
  const acceptedMimeTypes = () => {
 36 
  const acceptedMimeTypes = () => {
37 
    switch (modalType) {
 37 
    switch (modalType) {
38 
      case shareModalTypes.IMAGE:
 38 
      case shareModalTypes.IMAGE:
39 
        return "image/jpeg, image/png, image/jpg";
 39 
        return 'image/jpeg, image/png, image/jpg'
40 
      case shareModalTypes.FILE:
 40 
      case shareModalTypes.FILE:
41 
        return "application/pdf";
 41 
        return 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation'
42 
      case shareModalTypes.VIDEO:
 42 
      case shareModalTypes.VIDEO:
43 
        return "video/mp4, video/mpeg, video/webm";
 43 
        return 'video/mp4, video/mpeg, video/webm'
44 
      case shareModalTypes.CHAT:
 44 
      case shareModalTypes.CHAT:
Línea 45... Línea 45...
45 
        return "video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg";
 45 
        return 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
46 
      default:
 46 
      default:
47 
        return null;
 47 
        return null
48 
    }
 48 
    }
49 
  };
 49 
  }
50 
 
 50 
 
51 
  const {
 51 
  const {
52 
    getRootProps,
 52 
    getRootProps,
53 
    getInputProps,
 53 
    getInputProps,
54 
    acceptedFiles,
 54 
    acceptedFiles,
55 
    fileRejections,
 55 
    fileRejections
56 
  } = useDropzone({
 56 
  } = useDropzone({
57 
    accept: acceptedMimeTypes(),
 57 
    accept: acceptedMimeTypes(),
58 
    multiple: false,
 58 
    multiple: false,
59 
    onDrop: (acceptedFiles) => {
 59 
    onDrop: (acceptedFiles) => {
60 
      onUploaded(acceptedFiles[0]);
 60 
      onUploaded(acceptedFiles[0])
61 
      setFiles(acceptedFiles.map((file) => file));
 61 
      setFiles(acceptedFiles.map((file) => file))
62 
    },
 62 
    },
63 
    onDropRejected,
 63 
    onDropRejected,
64 
    onDropAccepted: () => {
 64 
    onDropAccepted: () => {
65 
      setErrors([]);
 65 
      setErrors([])
66 
    },
 66 
    },
67 
    maxFiles: 1,
 67 
    maxFiles: 1
68 
  });
 68 
  })
69 
  const thumbStyle = {
 69 
  const thumbStyle = {
70 
    display: "inline-flex",
 70 
    display: 'inline-flex',
71 
    borderRadius: "2px",
 71 
    borderRadius: '2px',
72 
    border: "1px solid #eaeaea",
 72 
    border: '1px solid #eaeaea',
73 
    marginBottom: "8px",
 73 
    marginBottom: '8px',
74 
    marginRight: "8px",
 74 
    marginRight: '8px',
75 
    width: "150px",
 75 
    width: '150px',
76 
    height: "150px",
 76 
    height: '150px',
77 
    padding: "4px",
 77 
    padding: '4px',
78 
    boxSizing: "border-box",
 78 
    boxSizing: 'border-box',
79 
    position: "relative",
 79 
    position: 'relative',
80 
    zIndex: "100",
 80 
    zIndex: '100'
81 
  };
 81 
  }
82 
  const thumbInnerStyle = {
 82 
  const thumbInnerStyle = {
83 
    display: "flex",
 83 
    display: 'flex',
84 
    minWidth: 0,
 84 
    minWidth: 0,
85 
    overflow: "hidden",
 85 
    overflow: 'hidden',
86 
    marginRight: "1.5rem",
 86 
    marginRight: '1.5rem'
87 
  };
 87 
  }
88 
  const fileInnerStyle = {
 88 
  const fileInnerStyle = {
89 
    display: "flex",
 89 
    display: 'flex',
90 
    overflow: "hidden",
 90 
    overflow: 'hidden',
91 
    margin: "auto",
 91 
    margin: 'auto'
92 
  };
 92 
  }
Línea 93... Línea 93...
93 
  const imgStyle = {
 93 
  const imgStyle = {
94 
    display: "block",
 94 
    display: 'block',
95 
    width: "auto",
 95 
    width: 'auto',
96 
    height: "100%",
 96 
    height: '100%',
97 
    objectFit: "contain",
 97 
    objectFit: 'contain'
Línea 98... Línea 98...
98 
  };
 98 
  }
99 
 
 99 
 
100 
  const onDeleteFileHandler = (index) => {
 100 
  const onDeleteFileHandler = (index) => {
101 
    const newFiles = files.filter((_, id) => id !== index);
 101 
    const newFiles = files.filter((_, id) => id !== index)
102 
    onUploaded("");
 102 
    onUploaded('')
103 
    setFiles(newFiles);
 103 
    setFiles(newFiles)
104 
  };
 104 
  }
105 
 
 105 
 
106 
  const CloseButtonContainer = {
 106 
  const CloseButtonContainer = {
Línea 107... Línea 107...
107 
    width: "20px",
 107 
    width: '20px',
108 
    height: "20px",
 108 
    height: '20px',
109 
    position: "absolute",
 109 
    position: 'absolute',
110 
    top: "5px",
 110 
    top: '5px',
Línea 126... Línea 126...
126 
              onClick={() => onDeleteFileHandler(id)}
 126 
              onClick={() => onDeleteFileHandler(id)}
127 
            >
 127 
            >
128 
              <img
 128 
              <img
129 
                src="/css/icons/x-circle-fill.svg"
 129 
                src="/css/icons/x-circle-fill.svg"
130 
                alt="close-button"
 130 
                alt="close-button"
131 
                style={{ width: "100%", height: "100%" }}
 131 
                style={{ width: '100%', height: '100%' }}
132 
              />
 132 
              />
133 
            </div>
 133 
            </div>
134 
          </div>
 134 
          </div>
135 
        );
 135 
        )
136 
      case shareModalTypes.FILE:
 136 
      case shareModalTypes.FILE:
137 
        return (
 137 
        return (
138 
          <div style={{
 138 
          <div style={{
139 
            ...thumbStyle,
 139 
            ...thumbStyle,
140 
            width: "90%",
 140 
            width: '90%',
141 
            height: "auto",
 141 
            height: 'auto',
142 
            margin: 'auto',
 142 
            margin: 'auto',
143 
            maxWidth: '90%'
 143 
            maxWidth: '90%'
144 
          }}
 144 
          }}
145 
            key={file.name}
 145 
            key={file.name}
146 
          >
 146 
          >
Línea 155... Línea 155...
155 
              onClick={() => onDeleteFileHandler(id)}
 155 
              onClick={() => onDeleteFileHandler(id)}
156 
            >
 156 
            >
157 
              <img
 157 
              <img
158 
                src="/css/icons/x-circle-fill.svg"
 158 
                src="/css/icons/x-circle-fill.svg"
159 
                alt="close-button"
 159 
                alt="close-button"
160 
                style={{ width: "100%", height: "100%" }}
 160 
                style={{ width: '100%', height: '100%' }}
161 
              />
 161 
              />
162 
            </div>
 162 
            </div>
163 
          </div>
 163 
          </div>
164 
        );
 164 
        )
165 
      case shareModalTypes.VIDEO:
 165 
      case shareModalTypes.VIDEO:
166 
        return (
 166 
        return (
167 
          <div
 167 
          <div
168 
            style={{ ...thumbStyle, width: "auto", height: "auto", maxWidth: '100%' }}
 168 
            style={{ ...thumbStyle, width: 'auto', height: 'auto', maxWidth: '100%' }}
169 
            key={file.name}
 169 
            key={file.name}
170 
          >
 170 
          >
171 
            <div style={thumbInnerStyle}>
 171 
            <div style={thumbInnerStyle}>
172 
              <video
 172 
              <video
173 
                src={URL.createObjectURL(file)}
 173 
                src={URL.createObjectURL(file)}
Línea 183... Línea 183...
183 
              onClick={() => onDeleteFileHandler(id)}
 183 
              onClick={() => onDeleteFileHandler(id)}
184 
            >
 184 
            >
185 
              <img
 185 
              <img
186 
                src="/css/icons/x-circle-fill.svg"
 186 
                src="/css/icons/x-circle-fill.svg"
187 
                alt="close-button"
 187 
                alt="close-button"
188 
                style={{ width: "100%", height: "100%" }}
 188 
                style={{ width: '100%', height: '100%' }}
189 
              />
 189 
              />
190 
            </div>
 190 
            </div>
191 
          </div>
 191 
          </div>
192 
        );
 192 
        )
193 
      case shareModalTypes.CHAT:
 193 
      case shareModalTypes.CHAT:
194 
        switch (file.type) {
 194 
        switch (file.type) {
195 
          case "video/mp4":
 195 
          case 'video/mp4':
196 
          case "video/mpeg":
 196 
          case 'video/mpeg':
197 
          case "video/webm":
 197 
          case 'video/webm':
198 
            return (
 198 
            return (
199 
              <div
 199 
              <div
200 
                style={{ ...thumbStyle, width: "90%", height: "auto", margin: 'auto' }}
 200 
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
201 
                key={file.name}
 201 
                key={file.name}
202 
              >
 202 
              >
203 
                <div style={thumbInnerStyle}>
 203 
                <div style={thumbInnerStyle}>
204 
                  <video
 204 
                  <video
205 
                    src={URL.createObjectURL(file)}
 205 
                    src={URL.createObjectURL(file)}
Línea 215... Línea 215...
215 
                  onClick={() => onDeleteFileHandler(id)}
 215 
                  onClick={() => onDeleteFileHandler(id)}
216 
                >
 216 
                >
217 
                  <img
 217 
                  <img
218 
                    src="/css/icons/x-circle-fill.svg"
 218 
                    src="/css/icons/x-circle-fill.svg"
219 
                    alt="close-button"
 219 
                    alt="close-button"
220 
                    style={{ width: "100%", height: "100%" }}
 220 
                    style={{ width: '100%', height: '100%' }}
221 
                  />
 221 
                  />
222 
                </div>
 222 
                </div>
223 
              </div>
 223 
              </div>
224 
            );
 224 
            )
225 
          case "image/jpeg":
 225 
          case 'image/jpeg':
226 
          case "image/png":
 226 
          case 'image/png':
227 
          case "image/jpg":
 227 
          case 'image/jpg':
228 
            return (
 228 
            return (
229 
              <div style={thumbStyle} key={file.name}>
 229 
              <div style={thumbStyle} key={file.name}>
230 
                <div style={thumbInnerStyle}>
 230 
                <div style={thumbInnerStyle}>
231 
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
 231 
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
232 
                </div>
 232 
                </div>
Línea 235... Línea 235...
235 
                  onClick={() => onDeleteFileHandler(id)}
 235 
                  onClick={() => onDeleteFileHandler(id)}
236 
                >
 236 
                >
237 
                  <img
 237 
                  <img
238 
                    src="/css/icons/x-circle-fill.svg"
 238 
                    src="/css/icons/x-circle-fill.svg"
239 
                    alt="close-button"
 239 
                    alt="close-button"
240 
                    style={{ width: "100%", height: "100%" }}
 240 
                    style={{ width: '100%', height: '100%' }}
241 
                  />
 241 
                  />
242 
                </div>
 242 
                </div>
243 
              </div>
 243 
              </div>
244 
            );
 244 
            )
245 
          case "application/pdf":
 245 
          case 'application/pdf':
246 
            return (
 246 
            return (
247 
              <div
 247 
              <div
248 
                style={{ ...thumbStyle, width: "90%", height: "auto", margin: 'auto' }}
 248 
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
249 
                key={file.name}
 249 
                key={file.name}
250 
              >
 250 
              >
251 
                <div style={thumbInnerStyle}>
 251 
                <div style={thumbInnerStyle}>
252 
                  <object
 252 
                  <object
253 
                    data={URL.createObjectURL(file)}
 253 
                    data={URL.createObjectURL(file)}
Línea 261... Línea 261...
261 
                  onClick={() => onDeleteFileHandler(id)}
 261 
                  onClick={() => onDeleteFileHandler(id)}
262 
                >
 262 
                >
263 
                  <img
 263 
                  <img
264 
                    src="/css/icons/x-circle-fill.svg"
 264 
                    src="/css/icons/x-circle-fill.svg"
265 
                    alt="close-button"
 265 
                    alt="close-button"
266 
                    style={{ width: "100%", height: "100%" }}
 266 
                    style={{ width: '100%', height: '100%' }}
267 
                  />
 267 
                  />
268 
                </div>
 268 
                </div>
269 
              </div>
 269 
              </div>
270 
            );
 270 
            )
- 
 
 271 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
- 
 
 272 
            return (
- 
 
 273 
              <iframe
- 
 
 274 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${file}`}
- 
 
 275 
                width="100%"
- 
 
 276 
                height="600px"
- 
 
 277 
                frameBorder="0"
- 
 
 278 
              >
- 
 
 279 
              </iframe>
- 
 
 280 
            )
271 
          default:
 281 
          default:
272 
            break;
 282 
            break
273 
        }
 283 
        }
274 
        break;
 284 
        break
275 
      default:
 285 
      default:
276 
        break;
 286 
        break
277 
    }
 287 
    }
278 
  };
 288 
  }
Línea 279... Línea 289...
279 
 
 289 
 
280 
  const thumbsContainerStyle = {
 290 
  const thumbsContainerStyle = {
281 
    display: "flex",
 291 
    display: 'flex',
282 
    flexDirection: "row",
 292 
    flexDirection: 'row',
283 
    flexWrap: "wrap",
 293 
    flexWrap: 'wrap',
284 
    marginTop: 16,
 294 
    marginTop: 16,
285 
    position: "relative",
 295 
    position: 'relative',
286 
    justifyContent: "center",
 296 
    justifyContent: 'center'
Línea 287... Línea 297...
287 
  };
 297 
  }
288 
 
 298 
 
289 
  const baseStyle = {
 299 
  const baseStyle = {
290 
    display: "flex",
 300 
    display: 'flex',
291 
    flexDirection: "column",
 301 
    flexDirection: 'column',
292 
    alignItems: "center",
 302 
    alignItems: 'center',
293 
    padding: "2rem 0",
 303 
    padding: '2rem 0',
294 
    borderWidth: 2,
 304 
    borderWidth: 2,
295 
    borderRadius: 2,
 305 
    borderRadius: 2,
296 
    borderColor: "#eeeeee",
 306 
    borderColor: '#eeeeee',
297 
    borderStyle: "dashed",
 307 
    borderStyle: 'dashed',
298 
    backgroundColor: "#fafafa",
 308 
    backgroundColor: '#fafafa',
299 
    color: "#bdbdbd",
 309 
    color: '#bdbdbd',
300 
    outline: "none",
 310 
    outline: 'none',
301 
    transition: "border .24s ease-in-out",
 311 
    transition: 'border .24s ease-in-out',
302 
    marginTop: "1rem",
 312 
    marginTop: '1rem',
Línea 303... Línea 313...
303 
    cursor: "pointer",
 313 
    cursor: 'pointer'
304 
  };
 314 
  }
305 
 
 315 
 
306 
  return (
 316 
  return (
307 
    <div>
 - 
 
308 
      {
 317 
    <div>
309 
        !files.length
 318 
      {
310 
        &&
 319 
        !files.length &&
311 
        <div {...getRootProps({ className: "dropzone", style: baseStyle })}>
 320 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
312 
          <input {...getInputProps()} />
 321 
          <input {...getInputProps()} />
313 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
 322 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
Línea 323... Línea 332...
323 
        {errors.map((error, index) => (
 332 
        {errors.map((error, index) => (
324 
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
 333 
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
325 
        ))}
 334 
        ))}
326 
      </aside>
 335 
      </aside>
327 
    </div>
 336 
    </div>
328 
  );
 337 
  )
329 
};
 338 
}
Línea 330... Línea 339...
330 
 
 339