Rev 8437 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import { useForm } from 'react-hook-form';
import SubmitModal from './SubmitModal'
const SalaryModal = ({
modalData,
closeModal,
dataLink
}) => {
const [isActive, setIsActive] = useState(false)
const { register, watch } = useForm()
return (
<SubmitModal
title='Título'
closeModal={closeModal}
submitData={{
visible: isActive,
min: watch("minimo"),
max: watch("maximo")
}}
postLink={dataLink}
>
<div
className={`toggle btn btn-primary ${!isActive && "off"}`}
data-toggle="toggle"
role="button"
style={{ width: '130px' }}
onClick={() => setIsActive(!isActive)}
>
<input
type="checkbox"
checked={isActive}
/>
<div className="toggle-group">
<label for="status" className="btn btn-primary toggle-on">Principal</label>
<label for="status" className="btn btn-light toggle-off">Secundaria</label>
<span className="toggle-handle btn btn-light"></span>
</div>
</div>
<div className='form-group'>
<label className="form-label">Minimo</label>
<input
type='text'
className='form-control'
name='minimo'
ref={register({
required: true,
valueAsNumber: true,
min: 1
})}
/>
</div>
<div className='form-group'>
<label className="form-label">Maximo</label>
<input
type='text'
className='form-control'
name='maximo'
ref={register({
required: true,
valueAsNumber: true,
validate: value => value > watch("minimo")
})}
/>
</div>
</SubmitModal>
)
}
export default SalaryModal