Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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