Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 3260 | Rev 5290 | 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) => {
117 
    switch (modalType) {
118 
      case shareModalTypes.IMAGE:
119 
        return (
120 
          <div style={thumbStyle} key={file.name}>
121 
            <div style={thumbInnerStyle}>
122 
              <img src={URL.createObjectURL(file)} style={imgStyle} />
123 
            </div>
124 
            <div
125 
              style={CloseButtonContainer}
126 
              onClick={() => onDeleteFileHandler(id)}
127 
            >
128 
              <img
129 
                src="/css/icons/x-circle-fill.svg"
130 
                alt="close-button"
5289 stevensc 131 
                style={{ width: '100%', height: '100%' }}
1 www 132 
              />
133 
            </div>
134 
          </div>
5289 stevensc 135 
        )
1 www 136 
      case shareModalTypes.FILE:
137 
        return (
3257 stevensc 138 
          <div style={{
139 
            ...thumbStyle,
5289 stevensc 140 
            width: '90%',
141 
            height: 'auto',
3257 stevensc 142 
            margin: 'auto',
143 
            maxWidth: '90%'
144 
          }}
1 www 145 
            key={file.name}
146 
          >
3257 stevensc 147 
            <div style={fileInnerStyle}>
3260 stevensc 148 
              <object
149 
                data={URL.createObjectURL(file)}
150 
                type="application/pdf"
151 
              />
1 www 152 
            </div>
153 
            <div
154 
              style={CloseButtonContainer}
155 
              onClick={() => onDeleteFileHandler(id)}
156 
            >
157 
              <img
158 
                src="/css/icons/x-circle-fill.svg"
159 
                alt="close-button"
5289 stevensc 160 
                style={{ width: '100%', height: '100%' }}
1 www 161 
              />
162 
            </div>
163 
          </div>
5289 stevensc 164 
        )
1 www 165 
      case shareModalTypes.VIDEO:
166 
        return (
167 
          <div
5289 stevensc 168 
            style={{ ...thumbStyle, width: 'auto', height: 'auto', maxWidth: '100%' }}
1 www 169 
            key={file.name}
170 
          >
171 
            <div style={thumbInnerStyle}>
172 
              <video
173 
                src={URL.createObjectURL(file)}
174 
                width="400"
175 
                height="300"
176 
                controls
177 
                autoPlay
178 
                muted
179 
              ></video>
180 
            </div>
181 
            <div
182 
              style={CloseButtonContainer}
183 
              onClick={() => onDeleteFileHandler(id)}
184 
            >
185 
              <img
186 
                src="/css/icons/x-circle-fill.svg"
187 
                alt="close-button"
5289 stevensc 188 
                style={{ width: '100%', height: '100%' }}
1 www 189 
              />
190 
            </div>
191 
          </div>
5289 stevensc 192 
        )
1 www 193 
      case shareModalTypes.CHAT:
194 
        switch (file.type) {
5289 stevensc 195 
          case 'video/mp4':
196 
          case 'video/mpeg':
197 
          case 'video/webm':
1 www 198 
            return (
199 
              <div
5289 stevensc 200 
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
1 www 201 
                key={file.name}
202 
              >
203 
                <div style={thumbInnerStyle}>
204 
                  <video
205 
                    src={URL.createObjectURL(file)}
206 
                    width="400"
207 
                    height="300"
208 
                    controls
209 
                    autoPlay
210 
                    muted
211 
                  ></video>
212 
                </div>
213 
                <div
214 
                  style={CloseButtonContainer}
215 
                  onClick={() => onDeleteFileHandler(id)}
216 
                >
217 
                  <img
218 
                    src="/css/icons/x-circle-fill.svg"
219 
                    alt="close-button"
5289 stevensc 220 
                    style={{ width: '100%', height: '100%' }}
1 www 221 
                  />
222 
                </div>
223 
              </div>
5289 stevensc 224 
            )
225 
          case 'image/jpeg':
226 
          case 'image/png':
227 
          case 'image/jpg':
1 www 228 
            return (
229 
              <div style={thumbStyle} key={file.name}>
230 
                <div style={thumbInnerStyle}>
231 
                  <img src={URL.createObjectURL(file)} style={imgStyle} />
232 
                </div>
233 
                <div
234 
                  style={CloseButtonContainer}
235 
                  onClick={() => onDeleteFileHandler(id)}
236 
                >
237 
                  <img
238 
                    src="/css/icons/x-circle-fill.svg"
239 
                    alt="close-button"
5289 stevensc 240 
                    style={{ width: '100%', height: '100%' }}
1 www 241 
                  />
242 
                </div>
243 
              </div>
5289 stevensc 244 
            )
245 
          case 'application/pdf':
1 www 246 
            return (
247 
              <div
5289 stevensc 248 
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
1 www 249 
                key={file.name}
250 
              >
251 
                <div style={thumbInnerStyle}>
3259 stevensc 252 
                  <object
253 
                    data={URL.createObjectURL(file)}
254 
                    type="application/pdf"
255 
                    width="400"
256 
                    height="200"
257 
                  ></object>
1 www 258 
                </div>
259 
                <div
260 
                  style={CloseButtonContainer}
261 
                  onClick={() => onDeleteFileHandler(id)}
262 
                >
263 
                  <img
264 
                    src="/css/icons/x-circle-fill.svg"
265 
                    alt="close-button"
5289 stevensc 266 
                    style={{ width: '100%', height: '100%' }}
1 www 267 
                  />
268 
                </div>
269 
              </div>
5289 stevensc 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 
            )
1 www 281 
          default:
5289 stevensc 282 
            break
1 www 283 
        }
5289 stevensc 284 
        break
1 www 285 
      default:
5289 stevensc 286 
        break
1 www 287 
    }
5289 stevensc 288 
  }
1 www 289 
 
290 
  const thumbsContainerStyle = {
5289 stevensc 291 
    display: 'flex',
292 
    flexDirection: 'row',
293 
    flexWrap: 'wrap',
1 www 294 
    marginTop: 16,
5289 stevensc 295 
    position: 'relative',
296 
    justifyContent: 'center'
297 
  }
1 www 298 
 
299 
  const baseStyle = {
5289 stevensc 300 
    display: 'flex',
301 
    flexDirection: 'column',
302 
    alignItems: 'center',
303 
    padding: '2rem 0',
1 www 304 
    borderWidth: 2,
305 
    borderRadius: 2,
5289 stevensc 306 
    borderColor: '#eeeeee',
307 
    borderStyle: 'dashed',
308 
    backgroundColor: '#fafafa',
309 
    color: '#bdbdbd',
310 
    outline: 'none',
311 
    transition: 'border .24s ease-in-out',
312 
    marginTop: '1rem',
313 
    cursor: 'pointer'
314 
  }
1 www 315 
 
316 
  return (
317 
    <div>
1282 stevensc 318 
      {
5289 stevensc 319 
        !files.length &&
320 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
1 www 321 
          <input {...getInputProps()} />
322 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
323 
          {recomendationText}
324 
        </div>
1282 stevensc 325 
      }
1 www 326 
      <aside>
327 
        <div style={thumbsContainerStyle}>
1282 stevensc 328 
          {
329 
            files.map((file, id) => filePreviewTest(file, id))
330 
          }
1 www 331 
        </div>
332 
        {errors.map((error, index) => (
333 
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
334 
        ))}
335 
      </aside>
336 
    </div>
5289 stevensc 337 
  )
338 
}
1 www 339 
 
5289 stevensc 340 
export default React.memo(DropzoneComponent, areEqual)