Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5292 | Rev 6019 | Ir a la última revisión | | Comparar con el anterior | Ultima modificación | Ver Log |

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