Rev 8428 | Rev 8449 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |
import React, { useState } from 'react'
import { useEffect } from 'react';
import { useForm } from 'react-hook-form';
import { getData } from '../../../helpers/fetchHelpers';
import SubmitModal from './SubmitModal'
const SalaryModal = ({
modalData,
closeModal,
dataLink
}) => {
const [isActive, setIsActive] = useState(false)
const { register, watch } = useForm()
useEffect(() => {
getData(dataLink)
.then(res => console.log(res))
}, [])
return (
<SubmitModal
title='Título'
closeModal={closeModal}
submitData={{
salary_visible: isActive ? "y" : "n",
salary_min: watch("minimo"),
salary_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='salary_min'
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='salary_max'
ref={register({
required: true,
valueAsNumber: true,
validate: value => value > watch("salary_min")
})}
/>
</div>
</SubmitModal>
)
}
export default SalaryModal