@cs3/dynamic-components v0.0.24
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>
12 days ago
28 days ago
29 days ago
28 days ago
28 days ago
29 days ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
4 months ago