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