Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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