react forms
v4.0.0
Los formularios de datos de datos son una biblioteca React utilizada para representar y administrar formularios con muchas características proporcionadas basadas en la forma final React.
❓ ¿Por qué usar formularios basados en datos? ❓
? Características ?
Para obtener más información, visite la documentación.
Tabla de contenido
$ npm install @data-driven-forms/react-form-renderer -S $ yarn add @data-driven-forms/react-form-renderer $ npm install @data-driven-forms/mui-component-mapper -S $ yarn add @data-driven-forms/mui-component-mapper$ npm install @data-driven-forms/pf4-component-mapper -S $ yarn add @data-driven-forms/pf4-component-mapper$ npm install @data-driven-forms/blueprint-component-mapper -S $ yarn add @data-driven-forms/blueprint-component-mapper$ npm install @data-driven-forms/suir-component-mapper -S $ yarn add @data-driven-forms/suir-component-mapper$ npm install @data-driven-forms/ant-component-mapper -S $ yarn add @data-driven-forms/ant-component-mapper$ npm install @data-driven-forms/carbon-component-mapper -S $ yarn add @data-driven-forms/carbon-component-mapperLas bibliotecas de componentes en los mapeadores son dependencias externas. Asegúrese de instalarlos y sus estilos en sus paquetes.
Mapeadores proporcionados de los formularios de datos de datos contiene el siguiente conjunto de componentes:
Cualquier otro componente se puede agregar al mapeador y al renderizador con el renderizador del formulario. Los componentes existentes también pueden ser anulados.
Para los formularios de datos impulsados por los datos en su componente, necesita el renderizador y un mapeador de componentes, que proporciona mapeador de componentes y plantilla de formulario.
import React from 'react' ;
import { FormRenderer , componentTypes } from '@data-driven-forms/react-form-renderer' ;
import { componentMapper , FormTemplate } from '@data-driven-forms/pf4-component-mapper' ;
const schema = {
fields : [ {
component : componentTypes . TEXT_FIELD ,
name : 'name' ,
label : 'Your name'
} ]
}
const Form = ( ) => (
< FormRenderer
schema = { schema }
componentMapper = { componentMapper }
FormTemplate = { FormTemplate }
onSubmit = { console . log }
/>
) También puede usar el mapeador personalizado.
import React from 'react' ;
import { FormRenderer , componentTypes , useFieldApi } from '@data-driven-forms/react-form-renderer' ;
const TextField = props => {
const { label , input , meta , ... rest } = useFieldApi ( props )
return (
< div >
< label htmlForm = { input . name } > { label } </ label >
< input { ... input } { ... rest } id = { input . name } />
{ meta . error && < p > { meta . error } </ p > }
</ div >
)
}
const componentMapper = {
[ componentTypes . TEXT_FIELD ] : TextField ,
'custom-type' : TextField
}
const schema = {
fields : [ {
component : componentTypes . TEXT_FIELD ,
name : 'name' ,
label : 'Your name'
type : 'search' ,
} ]
}Para obtener más información, consulte esta página.
Los mapeadores también se pueden generar utilizando el comando yarn generate-template .
Utilice nuestro sitio de documentación. En el caso de cualquier problema, puede acceder a archivos de documentación directamente en GitHub.
Los formularios de datos de datos son un monoreso que utiliza los espacios de trabajo de Lerna y el hilo, por lo que también puede usar todos sus comandos.
○ NodeJs 16
○ Unix como OS (MacOS, Linux)
No admitimos el desarrollo en Windows en este momento. Sin embargo, daríamos la bienvenida a cualquier RP para cambiar esto.
yarn installyarn build Todos los paquetes están vinculados de forma predeterminada, por lo que si ejecuta una yarn build en un paquete, todos los demás paquetes se actualizan a la última versión de ese paquete. Un paquete debe construirse primero antes de que se use en otro paquete.
Cada paquete tiene un pequeño package/demo de juegos, donde puede probar sus cambios.
cd packages/pf3-component-mapper
yarn startLa documentación es una aplicación React renderizada del lado del servidor basada en NextJS Framework.
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesPara limpiar los archivos construidos, use el siguiente comando: (este script también se ejecuta automáticamente antes de cada compilación).
yarn clean-buildLas pruebas se pueden ejecutar desde la carpeta central o desde un paquete específico.
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test Siga la siguiente lista de verificación si va a abrir un PR. Te ayudará a terminar el PR.
Ejecute yarn build en la carpeta raíz para construir todos los paquetes. Puede ejecutar este comando solo en el paquete que cambió. Todos los paquetes están vinculados de forma predeterminada, primero debe construirlos.
Ejecute yarn lint en la carpeta raíz para verificar si el código está formateado correctamente. Puede usar yarn lint --fix para corregir automáticamente los problemas.
Todo el código nuevo debe probarse correctamente. Ejecute yarn test en la carpeta raíz para probar todos los archivos. Verifique el informe de CodeCoverage para ver las líneas de código descubiertas. Estamos utilizando la biblioteca de pruebas de broma y reacción.
Si presenta una nueva función, debe documentar este cambio en nuestra documentación. La documentación se encuentra en el paquete react-renderer-demo y es una aplicación web basada en NEXTJS. No escribimos pruebas para la documentación.
yarn dev inicia una versión local de la documentación.
yarn build archivos preparados para la implementación.
yarn serve emula la aplicación web que se ejecuta en el emulador local.
Un mensaje de confirmación correcto es importante, porque estamos utilizando la liberación semántica para relatar automáticamente nuevas versiones. Estos mensajes también se usan en nuestras notas de versión, para que otros usuarios puedan ver lo que se está cambiando.
Mi cambio presenta una nueva característica
Prefijo su mensaje de confirmación con feat y especifique el paquete que se está cambiando. Un ejemplo: feat(pf4): a new dual list integration . Si cambia múltiples paquetes, puede usar feat(common): ... o feat(all): ...
Mi cambio corrige un error o deuda técnica
Prefijo su mensaje de confirmación con fix . De lo contrario, se aplican las mismas reglas. Un ejemplo: fix(pf4): fixed missed proptype in select .
Mi cambio no cambia ningún paquete lanzado
Si su cambio no cambia ninguno de los paquetes lanzados, puede simplemente descifrar el cambio, un ejemplo: Fix button on documenation example page . Esto también se aplica a cualquier cambio en el repositorio de documentación.
Mi cambio presenta un cambio de ruptura
Estamos tratando de evitar los cambios de ruptura. Por favor, abra un problema y discuta el problema con nosotros, intentaremos encontrar opciones alternativas.
Agradecemos cualquier contribución de la comunidad. ¡No tengas miedo de informar el error o crear problemas y solicitudes de extracción! ?
Licencia de Apache 2.0
