Dynamic Form CS3

Es un proyecto desarrollado para la empresa CS3, el cual consiste en renderizar un formulario a través de un string.

El proyecto consta de varios componentes, como por ejemplo, inputs, layouts, modales, entre otros.

Los cuales, al colocarlos dentro de un string y enviarlo como argumento, se visualizará como un componente natural de React.

Ejemplo de template:
        <Layouts.InputsWrapper className="_mb-2">
          <FormInput.InputFormCntx currentId="cont_firstName" label="Primer Nombre*" />
          <FormInput.InputFileSimpleContext currentId="cont_secondName" label="Segundo Nombre" />
        </Layouts.InputsWrapper>

En este ejemplo, estamos renderizando dos campos de texto en una misma fila.

label: Es el título del campo de texto currentId: Es el nombre de la variable como se enviará en el formulario

Una vez teniendo el template, podemos utilizar el componente principal llamado Formjson de la siguiente manera:

Ejemplo de uso:

<Formjson
    queryConfig={queryClient}
    imageBaseURL='https://urlsubirimage.com'
    submitCallback={(data: any) => {onSubmit(data)}}
    formString={`
        <Layouts.InputsWrapper className="_mb-2">
          <FormInput.InputFormCntx currentId="cont_firstName" label="Primer Nombre*" />
          <FormInput.InputFileSimpleContext currentId="cont_secondName" label="Segundo Nombre" />
        </Layouts.InputsWrapper>
      `}
    />

Props

queryConfig: Hace referencia a la configuración del QueryClient de ReactQuery Ejemplo:

const queryClient = {
    defaultOptions: {
        queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        retry: false,
        },
    },
};

imageBaseURL: Hace referencia a la URL del sitio para el cargue de imágenes con el componente de FileInput (en caso de que requiera subir imágenes, de lo contrario, puede ser un string vacío)

formString: Hace referencia al template principal para renderizar el formulario (puede verlo en el primer ejemplo)

formSchema: Hace referencia a una función que devuelve el esquema de validación del formulario:

Ejemplo:
    const validationScheme = (yup) =>
        yup.object({
          cont_asunto: yup.string().required('Requerido'),
          cont_accept: yup
            .boolean()
            .default(false)
            .required('Requerido')
            .oneOf([true], 'Debe aceptar'),
    })

submitCallback: Hace referencia al callback que recibe la data del formulario al hacer submit Para utilizar el botón submit debe proporcionarse en el template como se muestra en el siguiente ejemplo:

<Buttons.FormButton className="_bg-primary">
    Radicar Solicitud
</Buttons.FormButton>

cancelCallback: Hace referencia al callback que ejecuta el botón de cancelar. Para utilizar el botón cancelar, se debe proporcionar en el template como se muestra en el siguiente ejemplo:

<Buttons.CancelButton>
    Regresar
</Buttons.CancelButton>