Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 5292 Rev 5918
Línea 46... Línea 46...
46 
      default:
 46 
      default:
47 
        return null
 47 
        return null
48 
    }
 48 
    }
49 
  }
 49 
  }
Línea 50... Línea -...
50 
 
 - 
 
51 
  const {
 - 
 
52 
    getRootProps,
 - 
 
53 
    getInputProps,
 - 
 
54 
    acceptedFiles,
 50 
 
55 
    fileRejections
 51 
  const { getRootProps, getInputProps, acceptedFiles, fileRejections } =
56 
  } = useDropzone({
 52 
    useDropzone({
57 
    accept: acceptedMimeTypes(),
 53 
      accept: acceptedMimeTypes(),
58 
    multiple: false,
 54 
      multiple: false,
59 
    onDrop: (acceptedFiles) => {
 55 
      onDrop: (acceptedFiles) => {
60 
      onUploaded(acceptedFiles[0])
 56 
        onUploaded(acceptedFiles[0])
61 
      setFiles(acceptedFiles.map((file) => file))
 57 
        setFiles(acceptedFiles.map((file) => file))
62 
    },
 58 
      },
63 
    onDropRejected,
 59 
      onDropRejected,
64 
    onDropAccepted: () => {
 60 
      onDropAccepted: () => {
65 
      setErrors([])
 61 
        setErrors([])
66 
    },
 62 
      },
67 
    maxFiles: 1
 63 
      maxFiles: 1,
68 
  })
 64 
    })
69 
  const thumbStyle = {
 65 
  const thumbStyle = {
70 
    display: 'inline-flex',
 66 
    display: 'inline-flex',
71 
    borderRadius: '2px',
 67 
    borderRadius: '2px',
72 
    border: '1px solid #eaeaea',
 68 
    border: '1px solid #eaeaea',
Línea 75... Línea 71...
75 
    width: '150px',
 71 
    width: '150px',
76 
    height: '150px',
 72 
    height: '150px',
77 
    padding: '4px',
 73 
    padding: '4px',
78 
    boxSizing: 'border-box',
 74 
    boxSizing: 'border-box',
79 
    position: 'relative',
 75 
    position: 'relative',
80 
    zIndex: '100'
 76 
    zIndex: '100',
81 
  }
 77 
  }
82 
  const thumbInnerStyle = {
 78 
  const thumbInnerStyle = {
83 
    display: 'flex',
 79 
    display: 'flex',
84 
    minWidth: 0,
 80 
    minWidth: 0,
85 
    overflow: 'hidden',
 81 
    overflow: 'hidden',
86 
    marginRight: '1.5rem'
 82 
    marginRight: '1.5rem',
87 
  }
 83 
  }
88 
  const fileInnerStyle = {
 84 
  const fileInnerStyle = {
89 
    display: 'flex',
 85 
    display: 'flex',
90 
    overflow: 'hidden',
 86 
    overflow: 'hidden',
91 
    margin: 'auto'
 87 
    margin: 'auto',
92 
  }
 88 
  }
93 
  const imgStyle = {
 89 
  const imgStyle = {
94 
    display: 'block',
 90 
    display: 'block',
95 
    width: 'auto',
 91 
    width: 'auto',
96 
    height: '100%',
 92 
    height: '100%',
97 
    objectFit: 'contain'
 93 
    objectFit: 'contain',
98 
  }
 94 
  }
Línea 99... Línea 95...
99 
 
 95 
 
100 
  const onDeleteFileHandler = (index) => {
 96 
  const onDeleteFileHandler = (index) => {
101 
    const newFiles = files.filter((_, id) => id !== index)
 97 
    const newFiles = files.filter((_, id) => id !== index)
Línea 108... Línea 104...
108 
    height: '20px',
 104 
    height: '20px',
109 
    position: 'absolute',
 105 
    position: 'absolute',
110 
    top: '5px',
 106 
    top: '5px',
111 
    right: '0px',
 107 
    right: '0px',
112 
    cursor: 'pointer',
 108 
    cursor: 'pointer',
113 
    zIndex: '200'
 109 
    zIndex: '200',
114 
  }
 110 
  }
Línea 115... Línea 111...
115 
 
 111 
 
116 
  const filePreviewTest = (file, id) => {
 - 
 
117 
    console.log(file.type)
 112 
  const filePreviewTest = (file, id) => {
118 
    switch (modalType) {
 113 
    switch (modalType) {
119 
      case shareModalTypes.IMAGE:
 114 
      case shareModalTypes.IMAGE:
120 
        return (
 115 
        return (
121 
          <div style={thumbStyle} key={file.name}>
 116 
          <div style={thumbStyle} key={file.name}>
Línea 137... Línea 132...
137 
      case shareModalTypes.FILE:
 132 
      case shareModalTypes.FILE:
138 
        switch (file.type) {
 133 
        switch (file.type) {
139 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
 134 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
140 
            return (
 135 
            return (
141 
              <iframe
 136 
              <iframe
142 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(file)}`}
 137 
                src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
- 
 
 138 
                  file
- 
 
 139 
                )}`}
143 
                width="100%"
 140 
                width="100%"
144 
                height="600px"
 141 
                height="600px"
145 
                frameBorder="0"
 142 
                frameBorder="0"
146 
              />
 143 
              />
147 
            )
 144 
            )
148 
          case 'application/pdf':
 145 
          case 'application/pdf':
149 
            return (
 146 
            return (
- 
 
 147 
              <div
150 
              <div style={{
 148 
                style={{
151 
                ...thumbStyle,
 149 
                  ...thumbStyle,
152 
                width: '90%',
 150 
                  width: '90%',
153 
                height: 'auto',
 151 
                  height: 'auto',
154 
                margin: 'auto',
 152 
                  margin: 'auto',
155 
                maxWidth: '90%'
 153 
                  maxWidth: '90%',
156 
              }}
 154 
                }}
157 
                key={file.name}
 155 
                key={file.name}
158 
              >
 156 
              >
159 
                <div style={fileInnerStyle}>
 157 
                <div style={fileInnerStyle}>
160 
                  <object
 158 
                  <object
161 
                    data={URL.createObjectURL(file)}
 159 
                    data={URL.createObjectURL(file)}
Línea 176... Línea 174...
176 
            )
 174 
            )
177 
        }
 175 
        }
178 
      case shareModalTypes.VIDEO:
 176 
      case shareModalTypes.VIDEO:
179 
        return (
 177 
        return (
180 
          <div
 178 
          <div
- 
 
 179 
            style={{
- 
 
 180 
              ...thumbStyle,
- 
 
 181 
              width: 'auto',
- 
 
 182 
              height: 'auto',
181 
            style={{ ...thumbStyle, width: 'auto', height: 'auto', maxWidth: '100%' }}
 183 
              maxWidth: '100%',
- 
 
 184 
            }}
182 
            key={file.name}
 185 
            key={file.name}
183 
          >
 186 
          >
184 
            <div style={thumbInnerStyle}>
 187 
            <div style={thumbInnerStyle}>
185 
              <video
 188 
              <video
186 
                src={URL.createObjectURL(file)}
 189 
                src={URL.createObjectURL(file)}
Línea 208... Línea 211...
208 
          case 'video/mp4':
 211 
          case 'video/mp4':
209 
          case 'video/mpeg':
 212 
          case 'video/mpeg':
210 
          case 'video/webm':
 213 
          case 'video/webm':
211 
            return (
 214 
            return (
212 
              <div
 215 
              <div
- 
 
 216 
                style={{
- 
 
 217 
                  ...thumbStyle,
- 
 
 218 
                  width: '90%',
213 
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
 219 
                  height: 'auto',
- 
 
 220 
                  margin: 'auto',
- 
 
 221 
                }}
214 
                key={file.name}
 222 
                key={file.name}
215 
              >
 223 
              >
216 
                <div style={thumbInnerStyle}>
 224 
                <div style={thumbInnerStyle}>
217 
                  <video
 225 
                  <video
218 
                    src={URL.createObjectURL(file)}
 226 
                    src={URL.createObjectURL(file)}
Línea 256... Línea 264...
256 
              </div>
 264 
              </div>
257 
            )
 265 
            )
258 
          case 'application/pdf':
 266 
          case 'application/pdf':
259 
            return (
 267 
            return (
260 
              <div
 268 
              <div
- 
 
 269 
                style={{
- 
 
 270 
                  ...thumbStyle,
- 
 
 271 
                  width: '90%',
261 
                style={{ ...thumbStyle, width: '90%', height: 'auto', margin: 'auto' }}
 272 
                  height: 'auto',
- 
 
 273 
                  margin: 'auto',
- 
 
 274 
                }}
262 
                key={file.name}
 275 
                key={file.name}
263 
              >
 276 
              >
264 
                <div style={thumbInnerStyle}>
 277 
                <div style={thumbInnerStyle}>
265 
                  <object
 278 
                  <object
266 
                    data={URL.createObjectURL(file)}
 279 
                    data={URL.createObjectURL(file)}
Línea 294... Línea 307...
294 
    display: 'flex',
 307 
    display: 'flex',
295 
    flexDirection: 'row',
 308 
    flexDirection: 'row',
296 
    flexWrap: 'wrap',
 309 
    flexWrap: 'wrap',
297 
    marginTop: 16,
 310 
    marginTop: 16,
298 
    position: 'relative',
 311 
    position: 'relative',
299 
    justifyContent: 'center'
 312 
    justifyContent: 'center',
300 
  }
 313 
  }
Línea 301... Línea 314...
301 
 
 314 
 
302 
  const baseStyle = {
 315 
  const baseStyle = {
303 
    display: 'flex',
 316 
    display: 'flex',
Línea 311... Línea 324...
311 
    backgroundColor: '#fafafa',
 324 
    backgroundColor: '#fafafa',
312 
    color: '#bdbdbd',
 325 
    color: '#bdbdbd',
313 
    outline: 'none',
 326 
    outline: 'none',
314 
    transition: 'border .24s ease-in-out',
 327 
    transition: 'border .24s ease-in-out',
315 
    marginTop: '1rem',
 328 
    marginTop: '1rem',
316 
    cursor: 'pointer'
 329 
    cursor: 'pointer',
317 
  }
 330 
  }
Línea 318... Línea 331...
318 
 
 331 
 
319 
  return (
 332 
  return (
320 
    <div>
 - 
 
321 
      {
 333 
    <>
322 
        !files.length &&
 334 
      {!files.length && (
323 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
 335 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
324 
          <input {...getInputProps()} />
 336 
          <input {...getInputProps()} />
325 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
 337 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
326 
          {recomendationText}
 338 
          {recomendationText}
327 
        </div>
 339 
        </div>
328 
      }
 - 
 
329 
      <aside>
 340 
      )}
330 
        <div style={thumbsContainerStyle}>
 - 
 
331 
          {
 341 
      <div style={thumbsContainerStyle}>
332 
            files.map((file, id) => filePreviewTest(file, id))
 - 
 
333 
          }
 342 
        {files.map((file, id) => filePreviewTest(file, id))}
334 
        </div>
 343 
      </div>
335 
        {errors.map((error, index) => (
 344 
      {errors.map((error, index) => (
336 
          <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
 345 
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
337 
        ))}
 - 
 
338 
      </aside>
 346 
      ))}
339 
    </div>
 347 
    </>
340 
  )
 348 
  )
Línea 341... Línea 349...
341 
}
 349 
}