Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

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

Rev 6020 Rev 6021
Línea 3... Línea 3...
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'
 6 
import IconButton from '@mui/material/IconButton'
7 
import CloseIcon from '@mui/icons-material/Close'
 7 
import CloseIcon from '@mui/icons-material/Close'
- 
 
 8 
import styled from 'styled-components'
- 
 
 9 
 
- 
 
 10 
const DragAndDropContainer = styled.div`
- 
 
 11 
  display: flex;
- 
 
 12 
  flex-direction: column;
- 
 
 13 
  align-items: center;
- 
 
 14 
  padding: 2rem 0;
- 
 
 15 
  border-width: 2;
- 
 
 16 
  border-radius: 2;
- 
 
 17 
  border-color: #eeeeee;
- 
 
 18 
  border-style: dashed;
- 
 
 19 
  background-color: #fafafa;
- 
 
 20 
  color: #bdbdbd;
- 
 
 21 
  outline: none;
- 
 
 22 
  transition: border 0.24s ease-in-out;
- 
 
 23 
  margin-top: 1rem;
- 
 
 24 
  cursor: pointer;
- 
 
 25 
`
- 
 
 26 
 
- 
 
 27 
const PreviewContainer = styled.div`
- 
 
 28 
  display: flex;
- 
 
 29 
  margin-top: 16px;
- 
 
 30 
  position: relative;
- 
 
 31 
  justify-content: center;
- 
 
 32 
 
- 
 
 33 
  img {
- 
 
 34 
    width: auto;
- 
 
 35 
    height: 100%;
- 
 
 36 
    max-height: 200px;
- 
 
 37 
    max-width: 350px;
- 
 
 38 
    object-fit: contain;
- 
 
 39 
  }
- 
 
 40 
`
- 
 
 41 
 
- 
 
 42 
const CloseButton = styled(IconButton)`
- 
 
 43 
  position: absolute;
- 
 
 44 
  background-color: #000;
- 
 
 45 
  color: #fff;
- 
 
 46 
`
- 
 
 47 
 
8 
const areEqual = (prevProps, nextProps) => {
 48 
const areEqual = (prevProps, nextProps) => {
9 
  return prevProps.settedFile === nextProps.settedFile
 49 
  return prevProps.settedFile === nextProps.settedFile
10 
}
 50 
}
Línea 11... Línea 51...
11 
 
 51 
 
- 
 
 52 
const DropzoneComponent = ({
- 
 
 53 
  modalType,
- 
 
 54 
  onUploaded,
12 
const DropzoneComponent = (props) => {
 55 
  settedFile,
13 
  const { modalType, onUploaded, settedFile, recomendationText } = props
 56 
  recomendationText,
14 
 
 57 
}) => {
15 
  const [errors, setErrors] = useState([])
 58 
  const [errors, setErrors] = useState([])
Línea -... Línea 59...
- 
 
 59 
  const [files, setFiles] = useState([])
- 
 
 60 
 
- 
 
 61 
  const acceptedMimeTypes = () => {
- 
 
 62 
    switch (modalType) {
- 
 
 63 
      case shareModalTypes.IMAGE:
- 
 
 64 
        return 'image/jpeg, image/png, image/jpg'
- 
 
 65 
      case shareModalTypes.FILE:
- 
 
 66 
        return 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation'
- 
 
 67 
      case shareModalTypes.VIDEO:
- 
 
 68 
        return 'video/mp4, video/mpeg, video/webm'
- 
 
 69 
      case shareModalTypes.CHAT:
- 
 
 70 
        return 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
- 
 
 71 
      default:
- 
 
 72 
        return null
- 
 
 73 
    }
16 
  const [files, setFiles] = useState([])
 74 
  }
17 
 
 75 
 
18 
  const onDropRejected = useCallback((rejectedFiles) => {
 76 
  const onDropRejected = useCallback((rejectedFiles) => {
19 
    rejectedFiles.map((fileRejection) => {
 77 
    rejectedFiles.map((fileRejection) => {
20 
      switch (fileRejection.errors[0].code) {
 78 
      switch (fileRejection.errors[0].code) {
Línea 29... Línea 87...
29 
          break
 87 
          break
30 
      }
 88 
      }
31 
    })
 89 
    })
32 
  }, [])
 90 
  }, [])
Línea 33... Línea -...
33 
 
 - 
 
34 
  useEffect(() => {
 - 
 
35 
    if (settedFile) setFiles([settedFile])
 - 
 
36 
  }, [settedFile])
 - 
 
37 
 
 - 
 
38 
  const acceptedMimeTypes = () => {
 - 
 
39 
    switch (modalType) {
 - 
 
40 
      case shareModalTypes.IMAGE:
 - 
 
41 
        return 'image/jpeg, image/png, image/jpg'
 - 
 
42 
      case shareModalTypes.FILE:
 - 
 
43 
        return 'application/pdf, application/vnd.openxmlformats-officedocument.presentationml.presentation'
 - 
 
44 
      case shareModalTypes.VIDEO:
 - 
 
45 
        return 'video/mp4, video/mpeg, video/webm'
 - 
 
46 
      case shareModalTypes.CHAT:
 - 
 
47 
        return 'video/mp4, video/mpeg, video/webm, application/pdf, image/jpeg, image/png, image/jpg'
 - 
 
48 
      default:
 - 
 
49 
        return null
 - 
 
50 
    }
 - 
 
51 
  }
 - 
 
52 
 
 91 
 
53 
  const { getRootProps, getInputProps } = useDropzone({
 92 
  const { getRootProps, getInputProps } = useDropzone({
54 
    accept: acceptedMimeTypes(),
 93 
    accept: acceptedMimeTypes(),
55 
    multiple: false,
 94 
    multiple: false,
56 
    onDrop: (acceptedFiles) => {
 95 
    onDrop: (acceptedFiles) => {
Línea 62... Línea 101...
62 
      setErrors([])
 101 
      setErrors([])
63 
    },
 102 
    },
64 
    maxFiles: 1,
 103 
    maxFiles: 1,
65 
  })
 104 
  })
Línea 66... Línea -...
66 
 
 - 
 
67 
  const imgStyle = {
 - 
 
68 
    display: 'block',
 - 
 
69 
    width: 'auto',
 - 
 
70 
    height: '100%',
 - 
 
71 
    objectFit: 'contain',
 - 
 
72 
  }
 - 
 
73 
 
 105 
 
74 
  const onDeleteFileHandler = (index) => {
 106 
  const onDeleteFileHandler = (index) => {
75 
    onUploaded('')
 107 
    onUploaded('')
76 
    setFiles([])
 108 
    setFiles([])
Línea -... Línea 109...
- 
 
 109 
  }
- 
 
 110 
 
- 
 
 111 
  useEffect(() => {
- 
 
 112 
    if (!settedFile) return
- 
 
 113 
    setFiles([settedFile])
77 
  }
 114 
  }, [settedFile])
78 
 
 115 
 
79 
  const filePreviewTest = (file) => {
 116 
  const filePreviewTest = (file) => {
80 
    switch (modalType) {
 117 
    switch (modalType) {
81 
      case shareModalTypes.IMAGE:
 118 
      case shareModalTypes.IMAGE:
82 
        return <img src={URL.createObjectURL(file)} style={imgStyle} />
 119 
        return <img src={URL.createObjectURL(file)} />
83 
      case shareModalTypes.FILE:
 120 
      case shareModalTypes.FILE:
84 
        switch (file.type) {
 121 
        switch (file.type) {
85 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
 122 
          case 'application/vnd.openxmlformats-officedocument.presentationml.presentation':
Línea 123... Línea 160...
123 
                  />
 160 
                  />
124 
                )
 161 
                )
125 
              case 'image/jpeg':
 162 
              case 'image/jpeg':
126 
              case 'image/png':
 163 
              case 'image/png':
127 
              case 'image/jpg':
 164 
              case 'image/jpg':
128 
                return <img src={URL.createObjectURL(file)} style={imgStyle} />
 165 
                return <img src={URL.createObjectURL(file)} />
129 
              case 'application/pdf':
 166 
              case 'application/pdf':
130 
                return (
 167 
                return (
131 
                  <object
 168 
                  <object
132 
                    data={URL.createObjectURL(file)}
 169 
                    data={URL.createObjectURL(file)}
133 
                    type="application/pdf"
 170 
                    type="application/pdf"
Línea 143... Línea 180...
143 
            break
 180 
            break
144 
        }
 181 
        }
145 
    }
 182 
    }
146 
  }
 183 
  }
Línea 147... Línea -...
147 
 
 - 
 
148 
  const baseStyle = {
 - 
 
149 
    display: 'flex',
 - 
 
150 
    flexDirection: 'column',
 - 
 
151 
    alignItems: 'center',
 - 
 
152 
    padding: '2rem 0',
 - 
 
153 
    borderWidth: 2,
 - 
 
154 
    borderRadius: 2,
 - 
 
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',
 - 
 
162 
    cursor: 'pointer',
 - 
 
163 
  }
 - 
 
164 
 
 - 
 
165 
  const thumbsContainerStyle = {
 - 
 
166 
    display: 'flex',
 - 
 
167 
    marginTop: 16,
 - 
 
168 
    position: 'relative',
 - 
 
169 
    justifyContent: 'center',
 - 
 
170 
  }
 - 
 
171 
 
 184 
 
172 
  return (
 185 
  return (
173 
    <>
 186 
    <>
174 
      {!files.length ? (
 187 
      {!files.length ? (
175 
        <div {...getRootProps({ className: 'dropzone', style: baseStyle })}>
 188 
        <DragAndDropContainer {...getRootProps({ className: 'dropzone' })}>
176 
          <input {...getInputProps()} />
 189 
          <input {...getInputProps()} />
177 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
 190 
          <p>Arrastra el archivo aqui, o haga click para seleccionar</p>
178 
          {recomendationText}
 191 
          {recomendationText}
179 
        </div>
 192 
        </DragAndDropContainer>
180 
      ) : (
 193 
      ) : (
181 
        <div style={thumbsContainerStyle}>
 194 
        <PreviewContainer>
182 
          {files.map((file, id) => filePreviewTest(file, id))}
 195 
          {files.map((file) => filePreviewTest(file))}
183 
          <IconButton className="close" onClick={() => onDeleteFileHandler()}>
 196 
          <CloseButton className="close" onClick={() => onDeleteFileHandler()}>
184 
            <CloseIcon />
 197 
            <CloseIcon />
185 
          </IconButton>
 198 
          </CloseButton>
186 
        </div>
 199 
        </PreviewContainer>
187 
      )}
 200 
      )}
188 
      {errors.map((error, index) => (
 201 
      {errors.map((error, index) => (
189 
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
 202 
        <FormErrorFeedback key={index}>{error}</FormErrorFeedback>
190 
      ))}
 203 
      ))}