Proyectos de Subversion LeadersLinked - SPA

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 },

    watch,

    handleSubmit

  } = useForm({

    defaultValues,

    values

  });

  const watchedDate = watch('date', new 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}

          defaultValue={new Date(watchedDate)}

          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;