Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Rev 5918 | Rev 6020 | Ir a la última revisión | Mostrar el archivo completo | | | Autoría | Ultima modificación | Ver Log |

Rev 5918 Rev 6019
Línea 1... Línea 1...
1 
/* eslint-disable react/prop-types */
 1 
/* eslint-disable react/prop-types */
2 
import React, { useState, useCallback, useEffect } from 'react'
 2 
import React, { useState, useCallback, useEffect } from 'react'
3 
import { useDropzone } from 'react-dropzone'
 3 
import { useDropzone } from 'react-dropzone'
4 
import { shareModalTypes } from '../../redux/share-modal/shareModal.types'
 4 
import { shareModalTypes } from '../../redux/share-modal/shareModal.types'
5 
import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'
 5 
import FormErrorFeedback from '../form-error-feedback/FormErrorFeedback'
- 
 
 6 
import IconButton from '@mui/material/IconButton'
- 
 
 7 
import CloseIcon from '@mui/icons-material/Close'
6 
const areEqual = (prevProps, nextProps) => {
 8 
const areEqual = (prevProps, nextProps) => {
7 
  return prevProps.settedFile === nextProps.settedFile
 9 
  return prevProps.settedFile === nextProps.settedFile
8 
}
 10 
}
Línea 9... Línea 11...
9 
 
 11 
 
Línea 46... Línea 48...
46 
      default:
 48 
      default:
47 
        return null
 49 
        return null
48 
    }
 50 
    }
49 
  }
 51 
  }
Línea 50... Línea 52...
50 
 
 52 
 
51 
  const { getRootProps, getInputProps, acceptedFiles, fileRejections } =
 - 
 
52 
    useDropzone({
 53 
  const { getRootProps, getInputProps } = useDropzone({
53 
      accept: acceptedMimeTypes(),
 54 
    accept: acceptedMimeTypes(),
54 
      multiple: false,
 55 
    multiple: false,
55 
      onDrop: (acceptedFiles) => {
 56 
    onDrop: (acceptedFiles) => {
56 
        onUploaded(acceptedFiles[0])
 57 
      onUploaded(acceptedFiles[0])
57 
        setFiles(acceptedFiles.map((file) => file))
 58 
      setFiles(acceptedFiles.map((file) => file))
58 
      },
 59 
    },
59 
      onDropRejected,
 60 
    onDropRejected,
60 
      onDropAccepted: () => {
 61 
    onDropAccepted: () => {
61 
        setErrors([])
 62 
      setErrors([])
62 
      },
 63 
    },
63 
      maxFiles: 1,
 - 
 
64 
    })
 - 
 
65 
  const thumbStyle = {
 - 
 
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',
 - 
 
76 
    zIndex: '100',
 - 
 
77 
  }
 - 
 
78 
  const thumbInnerStyle = {
 - 
 
79 
    display: 'flex',
 - 
 
80 
    minWidth: 0,
 - 
 
81 
    overflow: 'hidden',
 - 
 
82 
    marginRight: '1.5rem',
 64 
    maxFiles: 1,
83 
  }
 - 
 
84 
  const fileInnerStyle = {
 - 
 
85 
    display: 'flex',
 - 
 
86 
    overflow: 'hidden',
 - 
 
87 
    margin: 'auto',
 65 
  })
88 
  }
 66 
 
89 
  const imgStyle = {
 67 
  const imgStyle = {
90 
    display: 'block',
 68 
    display: 'block',
91 
    width: 'auto',
 69 
    width: 'auto',
92 
    height: '100%',
 70 
    height: '100%',
93 
    objectFit: 'contain',
 71 
    objectFit: 'contain',
Línea 94... Línea 72...
94 
  }
 72 
  }
95 
 
 - 
 
96 
  const onDeleteFileHandler = (index) => {
 73 
 
97 
    const newFiles = files.filter((_, id) => id !== index)
 74 
  const onDeleteFileHandler = (index) => {
98 
    onUploaded('')
 - 
 
99 
    setFiles(newFiles)
 - 
 
100 
  }
 - 
 
101 
 
 - 
 
102 
  const CloseButtonContainer = {
 - 
 
103 
    width: '20px',
 - 
 
104 
    height: '20px',
 - 
 
105 
    position: 'absolute',
 - 
 
106 
    top: '5px',
 - 
 
107 
    right: '0px',
 - 
 
108 
    cursor: 'pointer',
 75 
    onUploaded('')
Línea 109... Línea 76...
109 
    zIndex: '200',
 76 
    setFiles([])
110 
  }
 77 
  }
111 
 
 78 
 
112 
  const filePreviewTest = (file, id) => {
 - 
 
113 
    switch (modalType) {
 - 
 
114 
      case shareModalTypes.IMAGE:
 - 
 
115 
        return (
 79 
  const filePreviewTest = (file) => {
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"
 - 
 
127 
                style={{ width: '100%', height: '100%' }}
 - 
 
128 
              />
 - 
 
129 
            </div>
 80 
    switch (modalType) {
130 
          </div>
 81 
      case shareModalTypes.IMAGE:
131 
        )
 82 
        return <img src={URL.createObjectURL(file)} style={imgStyle} />
132 
      case shareModalTypes.FILE:
 83 
      case shareModalTypes.FILE:
133 
        switch (file.type) {
 84 
        switch (file.type) {
134 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
 85 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
135 
            return (
 86 
            return (
136 
              <iframe
 87 
              <iframe
137 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
 88 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
138 
                  file
 89 
                  file
139 
                )}`}
 - 
 
140 
                width="100%"
 90 
                )}`}
141 
                height="600px"
 91 
                width="100%"
142 
                frameBorder="0"
 92 
                height="600px"
143 
              />
 93 
              />
144 
            )
 - 
 
145 
          case 'application/pdf':
 - 
 
146 
            return (
 - 
 
147 
              <div
 - 
 
148 
                style={{
 - 
 
149 
                  ...thumbStyle,
 - 
 
150 
                  width: '90%',
 - 
 
151 
                  height: 'auto',
 - 
 
152 
                  margin: 'auto',
 - 
 
153 
                  maxWidth: '90%',
 - 
 
154 
                }}
 - 
 
155 
                key={file.name}
 - 
 
156 
              >
 94 
            )
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 
                  />
 95 
          case 'application/pdf':
172 
                </div>
 - 
 
173 
              </div>
 96 
            return (
174 
            )
 97 
              <object data={URL.createObjectURL(file)} type="application/pdf" />
175 
        }
 - 
 
176 
      case shareModalTypes.VIDEO:
 - 
 
177 
        return (
 - 
 
178 
          <div
 - 
 
179 
            style={{
 - 
 
180 
              ...thumbStyle,
 - 
 
181 
              width: 'auto',
 - 
 
182 
              height: 'auto',
 - 
 
183 
              maxWidth: '100%',
 - 
 
184 
            }}
 - 
 
185 
            key={file.name}
 98 
            )
186 
          >
 99 
          case shareModalTypes.VIDEO:
187 
            <div style={thumbInnerStyle}>
 100 
            return (
188 
              <video
 101 
              <video
189 
                src={URL.createObjectURL(file)}
 102 
                src={URL.createObjectURL(file)}
190 
                width="400"
 103 
                width="400"
191 
                height="300"
 104 
                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"
 105 
                controls
203 
                alt="close-button"
 - 
 
204 
                style={{ width: '100%', height: '100%' }}
 - 
 
205 
              />
 106 
                autoPlay
206 
            </div>
 107 
                muted
207 
          </div>
 108 
              />
208 
        )
 109 
            )
209 
      case shareModalTypes.CHAT:
 110 
          case shareModalTypes.CHAT:
210 
        switch (file.type) {
 111 
            switch (file.type) {
211 
          case 'video/mp4':
 112 
              case 'video/mp4':
212 
          case 'video/mpeg':
 - 
 
213 
          case 'video/webm':
 - 
 
214 
            return (
 - 
 
215 
              <div
 - 
 
216 
                style={{
 - 
 
217 
                  ...thumbStyle,
 - 
 
218 
                  width: '90%',
 - 
 
219 
                  height: 'auto',
 - 
 
220 
                  margin: 'auto',
 - 
 
221 
                }}
 - 
 
222 
                key={file.name}
 113 
              case 'video/mpeg':
223 
              >
 114 
              case 'video/webm':
224 
                <div style={thumbInnerStyle}>
 115 
                return (
225 
                  <video
 116 
                  <video
226 
                    src={URL.createObjectURL(file)}
 117 
                    src={URL.createObjectURL(file)}
227 
                    width="400"
 118 
                    width="400"
228 
                    height="300"
 119 
                    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"
 120 
                    controls
240 
                    alt="close-button"
 - 
 
241 
                    style={{ width: '100%', height: '100%' }}
 - 
 
242 
                  />
 121 
                    autoPlay
243 
                </div>
 122 
                    muted
244 
              </div>
 123 
                  />
245 
            )
 124 
                )
246 
          case 'image/jpeg':
 - 
 
247 
          case 'image/png':
 - 
 
248 
          case 'image/jpg':
 - 
 
249 
            return (
 125 
              case 'image/jpeg':
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"
 - 
 
261 
                    style={{ width: '100%', height: '100%' }}
 - 
 
262 
                  />
 - 
 
263 
                </div>
 126 
              case 'image/png':
264 
              </div>
 127 
              case 'image/jpg':
265 
            )
 - 
 
266 
          case 'application/pdf':
 - 
 
267 
            return (
 - 
 
268 
              <div
 - 
 
269 
                style={{
 - 
 
270 
                  ...thumbStyle,
 - 
 
271 
                  width: '90%',
 - 
 
272 
                  height: 'auto',
 - 
 
273 
                  margin: 'auto',
 - 
 
274 
                }}
 - 
 
275 
                key={file.name}
 128 
                return <img src={URL.createObjectURL(file)} style={imgStyle} />
276 
              >
 129 
              case 'application/pdf':
277 
                <div style={thumbInnerStyle}>
 130 
                return (
278 
                  <object
 131 
                  <object
279 
                    data={URL.createObjectURL(file)}
 132 
                    data={URL.createObjectURL(file)}
280 
                    type="application/pdf"
 - 
 
281 
                    width="400"
 - 
 
282 
                    height="200"
 - 
 
283 
                  ></object>
 - 
 
284 
                </div>
 - 
 
285 
                <div
 - 
 
286 
                  style={CloseButtonContainer}
 - 
 
287 
                  onClick={() => onDeleteFileHandler(id)}
 - 
 
288 
                >
 - 
 
289 
                  <img
 - 
 
290 
                    src="/css/icons/x-circle-fill.svg"
 133 
                    type="application/pdf"
291 
                    alt="close-button"
 134 
                    width="400"
- 
 
 135 
                    height="200"
292 
                    style={{ width: '100%', height: '100%' }}
 136 
                  />
293 
                  />
 137 
                )
- 
 
 138 
              default:
294 
                </div>
 139 
                break
295 
              </div>
 140 
            }
296 
            )
 141 
            break
297 
          default:
 - 
 
298 
            break
 - 
 
299 
        }
 - 
 
300 
        break
 142 
          default:
301 
      default:
 143 
            break
Línea 302... Línea -...
302 
        break
 - 
 
303 
    }
 - 
 
304 
  }
 - 
 
305 
 
 - 
 
306 
  const thumbsContainerStyle = {
 - 
 
307 
    display: 'flex',
 - 
 
308 
    flexDirection: 'row',
 - 
 
309 
    flexWrap: 'wrap',
 - 
 
310 
    marginTop: 16,
 - 
 
311 
    position: 'relative',
 144 
        }
312 
    justifyContent: 'center',
 145 
    }
313 
  }
 146 
  }
314 
 
 147 
 
315 
  const baseStyle = {
 148 
  const baseStyle = {
Línea 327... Línea 160...
327 
    transition: 'border .24s ease-in-out',
 160 
    transition: 'border .24s ease-in-out',
328 
    marginTop: '1rem',
 161 
    marginTop: '1rem',
329 
    cursor: 'pointer',
 162 
    cursor: 'pointer',
330 
  }
 163 
  }
Línea -... Línea 164...
- 
 
 164 
 
- 
 
 165 
  const thumbsContainerStyle = {
- 
 
 166 
    display: 'flex',
- 
 
 167 
    flexDirection: 'row',
- 
 
 168 
    flexWrap: 'wrap',
- 
 
 169 
    marginTop: 16,
- 
 
 170 
    position: 'relative',
- 
 
 171 
    justifyContent: 'center',
- 
 
 172 
  }
331 
 
 173 
 
332 
  return (
 174 
  return (
333 
    <>
 175 
    <>
334 
      {!files.length && (
 176 
      {!files.length && (
335 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
 177 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
Línea 338... Línea 180...
338 
          {recomendationText}
 180 
          {recomendationText}
339 
        </div>
 181 
        </div>
340 
      )}
 182 
      )}
341 
      <div style={thumbsContainerStyle}>
 183 
      <div style={thumbsContainerStyle}>
342 
        {files.map((file, id) => filePreviewTest(file, id))}
 184 
        {files.map((file, id) => filePreviewTest(file, id))}
- 
 
 185 
        <IconButton onClick={() => onDeleteFileHandler()}>
- 
 
 186 
          <CloseIcon />
- 
 
 187 
        </IconButton>
343 
      </div>
 188 
      </div>
344 
      {errors.map((error, index) => (
 189 
      {errors.map((error, index) => (
345 
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
 190 
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
346 
      ))}
 191 
      ))}
347 
    </>
 192 
    </>