Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 6019 | Rev 6021 | 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'
6019 stevensc 6 
import IconButton from '@mui/material/IconButton'
7 
import CloseIcon from '@mui/icons-material/Close'
1 www 8 
const areEqual = (prevProps, nextProps) => {
5289 stevensc 9 
  return prevProps.settedFile === nextProps.settedFile
10 
}
1 www 11 
 
3193 stevensc 12 
const DropzoneComponent = (props) => {
5289 stevensc 13 
  const { modalType, onUploaded, settedFile, recomendationText } = props
1 www 14 
 
5289 stevensc 15 
  const [errors, setErrors] = useState([])
16 
  const [files, setFiles] = useState([])
1 www 17 
 
18 
  const onDropRejected = useCallback((rejectedFiles) => {
19 
    rejectedFiles.map((fileRejection) => {
20 
      switch (fileRejection.errors[0].code) {
5289 stevensc 21 
        case 'too-many-files':
22 
          setErrors([...errors, 'solo puedes agregar 1 archivo'])
23 
          break
24 
        case 'file-invalid-type':
25 
          setErrors([...errors, 'por favor seleccione un archivo valido'])
26 
          break
1 www 27 
        default:
5289 stevensc 28 
          setErrors(errors)
29 
          break
1 www 30 
      }
5289 stevensc 31 
    })
32 
  }, [])
1 www 33 
 
34 
  useEffect(() => {
5289 stevensc 35 
    if (settedFile) setFiles([settedFile])
36 
  }, [settedFile])
1 www 37 
 
38 
  const acceptedMimeTypes = () => {
39 
    switch (modalType) {
40 
      case shareModalTypes.IMAGE:
5289 stevensc 41 
        return 'image/jpeg, image/png, image/jpg'
1 www 42 
      case shareModalTypes.FILE:
5289 stevensc 43 
        return 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation'
1 www 44 
      case shareModalTypes.VIDEO:
5289 stevensc 45 
        return 'video/mp4, video/mpeg, video/webm'
1 www 46 
      case shareModalTypes.CHAT:
5289 stevensc 47 
        return 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
1 www 48 
      default:
5289 stevensc 49 
        return null
1 www 50 
    }
5289 stevensc 51 
  }
2661 stevensc 52 
 
6019 stevensc 53 
  const { getRootProps, getInputProps } = useDropzone({
54 
    accept: acceptedMimeTypes(),
55 
    multiple: false,
56 
    onDrop: (acceptedFiles) => {
57 
      onUploaded(acceptedFiles[0])
58 
      setFiles(acceptedFiles.map((file) => file))
59 
    },
60 
    onDropRejected,
61 
    onDropAccepted: () => {
62 
      setErrors([])
63 
    },
64 
    maxFiles: 1,
65 
  })
66 
 
1 www 67 
  const imgStyle = {
5289 stevensc 68 
    display: 'block',
69 
    width: 'auto',
70 
    height: '100%',
5918 stevensc 71 
    objectFit: 'contain',
5289 stevensc 72 
  }
1 www 73 
 
74 
  const onDeleteFileHandler = (index) => {
5289 stevensc 75 
    onUploaded('')
6019 stevensc 76 
    setFiles([])
5289 stevensc 77 
  }
1 www 78 
 
6019 stevensc 79 
  const filePreviewTest = (file) => {
1 www 80 
    switch (modalType) {
81 
      case shareModalTypes.IMAGE:
6019 stevensc 82 
        return <img src={URL.createObjectURL(file)} style={imgStyle} />
1 www 83 
      case shareModalTypes.FILE:
5290 stevensc 84 
        switch (file.type) {
85 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
86 
            return (
87 
              <iframe
5918 stevensc 88 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
89 
                  file
90 
                )}`}
5290 stevensc 91 
                width="100%"
92 
                height="600px"
5292 stevensc 93 
              />
5290 stevensc 94 
            )
95 
          case 'application/pdf':
96 
            return (
6019 stevensc 97 
              <object data={URL.createObjectURL(file)} type="application/pdf" />
5290 stevensc 98 
            )
6019 stevensc 99 
          case shareModalTypes.VIDEO:
100 
            return (
1 www 101 
              <video
102 
                src={URL.createObjectURL(file)}
103 
                width="400"
104 
                height="300"
105 
                controls
106 
                autoPlay
107 
                muted
108 
              />
6019 stevensc 109 
            )
110 
          case shareModalTypes.CHAT:
111 
            switch (file.type) {
112 
              case 'video/mp4':
113 
              case 'video/mpeg':
114 
              case 'video/webm':
115 
                return (
1 www 116 
                  <video
117 
                    src={URL.createObjectURL(file)}
118 
                    width="400"
119 
                    height="300"
120 
                    controls
121 
                    autoPlay
122 
                    muted
123 
                  />
6019 stevensc 124 
                )
125 
              case 'image/jpeg':
126 
              case 'image/png':
127 
              case 'image/jpg':
128 
                return <img src={URL.createObjectURL(file)} style={imgStyle} />
129 
              case 'application/pdf':
130 
                return (
3259 stevensc 131 
                  <object
132 
                    data={URL.createObjectURL(file)}
133 
                    type="application/pdf"
134 
                    width="400"
135 
                    height="200"
1 www 136 
                  />
6019 stevensc 137 
                )
138 
              default:
139 
                break
140 
            }
141 
            break
1 www 142 
          default:
5289 stevensc 143 
            break
1 www 144 
        }
145 
    }
5289 stevensc 146 
  }
1 www 147 
 
148 
  const baseStyle = {
5289 stevensc 149 
    display: 'flex',
150 
    flexDirection: 'column',
151 
    alignItems: 'center',
152 
    padding: '2rem 0',
1 www 153 
    borderWidth: 2,
154 
    borderRadius: 2,
5289 stevensc 155 
    borderColor: '#eeeeee',
156 
    borderStyle: 'dashed',
157 
    backgroundColor: '#fafafa',
158 
    color: '#bdbdbd',
159 
    outline: 'none',
160 
    transition: 'border .24s ease-in-out',
161 
    marginTop: '1rem',
5918 stevensc 162 
    cursor: 'pointer',
5289 stevensc 163 
  }
1 www 164 
 
6019 stevensc 165 
  const thumbsContainerStyle = {
166 
    display: 'flex',
167 
    marginTop: 16,
168 
    position: 'relative',
169 
    justifyContent: 'center',
170 
  }
171 
 
1 www 172 
  return (
5918 stevensc 173 
    <>
6020 stevensc 174 
      {!files.length ? (
5289 stevensc 175 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
1 www 176 
          <input {...getInputProps()} />
177 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
178 
          {recomendationText}
179 
        </div>
6020 stevensc 180 
      ) : (
181 
        <div style={thumbsContainerStyle}>
182 
          {files.map((file, id) => filePreviewTest(file, id))}
183 
          <IconButton className="close" onClick={() => onDeleteFileHandler()}>
184 
            <CloseIcon />
185 
          </IconButton>
186 
        </div>
5918 stevensc 187 
      )}
188 
      {errors.map((error, index) => (
189 
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
190 
      ))}
191 
    </>
5289 stevensc 192 
  )
193 
}
1 www 194 
 
5289 stevensc 195 
export default React.memo(DropzoneComponent, areEqual)