Proyectos de Subversion LeadersLinked - Antes de SPA

Rev

Autoría | Ultima modificación | Ver Log |

import React, { useState } from 'react'
import { Button, Modal } from 'react-bootstrap'
import { useSelector } from 'react-redux'
import { shareModalTypes } from '../../redux/share-modal/shareModal.types'

import Spinner from '../UI/Spinner'
import FormErrorFeedback from '../UI/FormErrorFeedback'
import DropzoneComponent from '../dropzone/DropzoneComponent'

const FileModal = ({ isShow, onHide, onComplete, loading }) => {
  const [selectedFile, setSelectedFile] = useState(null)
  const [error, setError] = useState(false)
  const labels = useSelector(({ intl }) => intl.labels)

  const onUpload = (file) => {
    setSelectedFile(file)
  }

  const onClose = () => {
    setSelectedFile(null)
    onHide()
  }

  const handleSubmit = () => {
    if (!selectedFile) {
      setError(true)
      return
    }

    onComplete(selectedFile)
  }

  return (
    <Modal show={isShow} onHide={onClose}>
      <Modal.Body>
        {loading ? (
          <Spinner />
        ) : (
          <DropzoneComponent
            modalType={shareModalTypes.CHAT}
            onUploaded={onUpload}
            settedFile={selectedFile}
            recomendationText={
              <p className="text-center">
                {labels.extensions_allowed}: png, jpg, jpeg, mp4, mpeg, webm,
                pdf.
              </p>
            }
          />
        )}
        {error && <FormErrorFeedback>{labels.select_file}</FormErrorFeedback>}
      </Modal.Body>
      <Modal.Footer>
        <Button variant="primary" onClick={handleSubmit} disabled={loading}>
          {labels.accept}
        </Button>
        <Button variant="danger" onClick={onClose}>
          {labels.cancel}
        </Button>
      </Modal.Footer>
    </Modal>
  )
}

export default FileModal