react forms
v4.0.0
Les formulaires basés sur les données sont une bibliothèque React utilisée pour le rendu et la gestion des formulaires avec de nombreuses fonctionnalités fournies basées sur le formulaire final React.
❓ Pourquoi utiliser des formulaires basés sur les données? ❓
? Caractéristiques ?
Pour plus d'informations, veuillez visiter la documentation.
Table des matières
$ 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-mapperLes bibliothèques de composants dans les mappeurs sont des dépendances externes. Assurez-vous de les installer ainsi que leurs styles dans vos paquets.
Les mappeurs fournis des formulaires basés sur des données sont en train de prendre un ensemble suivant des composants:
Tous les autres composants peuvent être ajoutés au mappeur et au rendu avec le rendu de formulaire. Les composants existants peuvent également être remplacés.
Afin de formes basées sur les données dans votre composant, vous avez besoin du rendu et d'un mappeur de composant, qui fournit un mappeur et un modèle de formulaire de composant.
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 }
/>
) Vous pouvez également utiliser un mappeur personnalisé.
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' ,
} ]
}Pour plus d'informations, veuillez consulter cette page.
Les mappeurs peuvent également être générés à l'aide de la commande yarn generate-template .
Veuillez utiliser notre site de documentation. En cas de problème, vous pouvez accéder aux fichiers de documentation directement dans GitHub.
Les formulaires basés sur les données sont un monorepo qui utilise les espaces de travail Lerna et Yarn, vous pouvez donc également utiliser toutes ses commandes.
○ Nodejs 16
○ Unix comme OS (macOS, Linux)
Nous ne prenons pas en charge le développement sur Windows en ce moment. Cependant, nous accueillerions tout RP pour changer cela.
yarn installyarn build Tous les packages sont liés ensemble par défaut, donc si vous exécutez une yarn build dans un package, tous les autres packages sont mis à jour vers la dernière version de ce package. Un package doit être construit avant d'être utilisé dans un autre package.
Chaque package a un petit package/demo , où vous pouvez tester vos modifications.
cd packages/pf3-component-mapper
yarn startLa documentation est une application REACT renvoyée côté serveur basé sur le framework NextJS.
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesPour nettoyer les fichiers construits, utilisez la commande suivante: (Ce script est également exécuté automatiquement avant chaque version.)
yarn clean-buildLes tests peuvent être passés à partir du dossier de base ou à partir d'un package spécifique.
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test Veuillez suivre la liste de contrôle suivante si vous allez ouvrir un PR. Cela vous aidera à terminer le PR.
Exécutez yarn build dans le dossier racine pour construire tous les packages. Vous pouvez exécuter cette commande uniquement dans le package que vous avez changé. Tous les packages sont liés par défaut, vous devez d'abord les construire.
Exécutez yarn lint dans le dossier racine pour vérifier si le code est correctement formaté. Vous pouvez utiliser yarn lint --fix pour corriger automatiquement les problèmes.
Tous les nouveaux code doivent être correctement testés. Exécutez yarn test dans le dossier racine pour tester tous les fichiers. Vérifiez le rapport de code de code pour voir les lignes de code découvertes. Nous utilisons la bibliothèque de tests de plaisanterie et de réaction.
Si vous introduisez une nouvelle fonctionnalité, vous devez documenter ce changement dans notre documentation. La documentation est située dans le package react-renderer-demo et il s'agit d'une application Web basée sur NIXTJS. Nous n'écrivons pas de tests pour la documentation.
yarn dev démarre une version locale de la documentation.
yarn build prépare des fichiers pour le déploiement.
yarn serve émule l'application Web en cours d'exécution dans l'émulateur local.
Un message de validation correct est important, car nous utilisons la version sémantique pour release automatiquement de nouvelles versions. Ces messages sont également utilisés dans nos notes de version, afin que d'autres utilisateurs puissent voir ce qui est modifié.
Mon changement présente une nouvelle fonctionnalité
Préfixez votre message de validation avec feat et spécifiez le package qui est en cours de modification. Un exemple: feat(pf4): a new dual list integration . Si vous modifiez plusieurs packages, vous pouvez utiliser feat(common): ... ou feat(all): ...
Ma modification corrige un bogue ou une dette technique
Préfixez votre message de validation avec fix . Sinon, les mêmes règles s'appliquent. Un exemple: fix(pf4): fixed missed proptype in select .
Ma modification ne modifie aucun package publié
Si votre modification ne modifie aucun des packages publiés, vous pouvez simplement déconcerter la modification, un exemple: Fix button on documenation example page . Cela s'applique également à tout changement dans le dépôt de documentation.
Mon changement introduit un changement de rupture
Nous essayons d'éviter de briser les changements. S'il vous plaît, ouvrez un problème et discutez du problème avec nous, nous essaierons de proposer d'autres options.
Nous accueillons toute contribution communautaire. N'ayez pas peur de signaler le bug ou de créer des problèmes et des requêtes de traction! ?
Licence Apache 2.0
