Proyectos de Subversion LeadersLinked - SPA

Rev

Rev 3325 | Rev 3328 | Ir a la última revisión | Autoría | Comparar con el anterior | Ultima modificación | Ver Log |

import React from 'react'
import { useForm } from 'react-hook-form'

import Form from '@components/common/form'
import Input from '@components/UI/inputs/Input'
import Button from '@components/UI/buttons/Buttons'
import Ckeditor from '@components/common/ckeditor/Ckeditor'
import LoadingWrapper from '@components/common/loading-wrapper'
import DatetimePicker from '@components/common/inputs/datetime-picker'

function ProgressForm({
  onSubmit = () => {},
  defaultValues = {
    date: null,
    quantitative_value: 0,
    qualitative_description: ''
  },
  values = {}
}) {
  const {
    control,
    formState: { errors, isSubmitting },
    handleSubmit
  } = useForm({
    defaultValues,
    values: values ?? { ...values, date: new Date(values.date) }
  })

  return (
    <Form onSubmit={handleSubmit(onSubmit)}>
      <LoadingWrapper loading={isSubmitting} displayChildren>
        <Input
          control={control}
          label='Valor cuantitativo:'
          name='quantitative_value'
          type='number'
          rules={{ required: 'El valor es requerido' }}
          error={errors.quantitative_value?.message}
        />

        <Ckeditor
          control={control}
          name='qualitative_description'
          error={errors.qualitative_description?.message}
          rules={{ required: 'La descripción es requerida' }}
          label='Descripción cualitativa:'
        />

        <DatetimePicker
          label='Fecha'
          name='date'
          control={control}
          rules={{
            required: { value: true, message: 'La fecha es requerida' },
            validate: {
              beGreaterThanToday: (value) =>
                new Date(value) > new Date() ||
                'La fecha debe ser mayor a la fecha actual'
            }
          }}
          displayTime
          parseFormat='YYYY-MM-DD HH:mm:ss'
        />

        <Button color='primary' type='submit'>
          Enviar
        </Button>
      </LoadingWrapper>
    </Form>
  )
}

export default ProgressForm