Rev 12749 | Rev 12793 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React from 'react'
import parse from 'html-react-parser'
import { Button, Modal } from 'react-bootstrap'
import { useForm } from 'react-hook-form'
import DescriptionInput from '../../../shared/DescriptionInput'
const SectionModal = ({ show, closeModal, section, onSubmit }) => {
const { handleSubmit, errors, register, setValue, watch } = useForm()
const submit = (data) => {
onSubmit({ ...section, name: data.name })
closeModal()
}
return (
<Modal size="md" onHide={closeModal} show={show}>
<Modal.Header closeButton>
<Modal.Title>Nuevo candidato</Modal.Title>
</Modal.Header>
<form onSubmit={handleSubmit(submit)}>
<Modal.Body>
<div className='form-group'>
<label className="form-label">Nombre</label>
<input type="text" name='name' className='form-control' ref={register({ required: true })} />
{errors.name && <p>{errors.name.message}</p>}
</div>
<div className='form-group'>
<label className="form-label">Texto</label>
<DescriptionInput
defaultValue={watch('text') ? parse(watch('text')) : ''}
name='text'
onChange={setValue}
/>
</div>
</Modal.Body>
<Modal.Footer>
<Button
variant="primary"
type='submit'
>
Enviar
</Button>
<Button variant="danger" onClick={closeModal}>
Cancelar
</Button>
</Modal.Footer>
</form>
</Modal >
)
}
export default SectionModal