react forms
v4.0.0
Daten gestaltete Formulare sind eine React -Bibliothek, die zum Rendern und Verwalten von Formularen mit vielen anbasisreichen Funktionen auf der Grundlage des React -Endformulars verwendet wird.
❓ Warum datengesteuerte Formulare verwenden? ❓
? Merkmale ?
Für weitere Informationen besuchen Sie bitte die Dokumentation.
Inhaltsverzeichnis
$ 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-mapperKomponentenbibliotheken in Mappern sind externe Abhängigkeiten. Stellen Sie sicher, dass Sie sie und ihre Stile in Ihren Bundles installieren.
Bereitstellung von Mappers von datengesteuerten Formularen enthält die folgenden Komponenten:
Alle anderen Komponenten können mit dem Formular Renderer zu Mapper und Renderer hinzugefügt werden. Bestehende Komponenten können auch überschrieben werden.
Um datengesteuerte Formulare in Ihrer Komponente zu erhalten, benötigen Sie den Renderer und einen Komponenten -Mapper, der Komponenten -Mapper und Formularvorlage bereitstellt.
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 }
/>
) Sie können auch benutzerdefinierten Mapper verwenden.
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' ,
} ]
}Weitere Informationen finden Sie in dieser Seite.
Mapper können auch mit dem Befehl yarn generate-template generiert werden.
Bitte verwenden Sie unsere Dokumentationsseite. Im Falle eines Problems können Sie direkt in GitHub auf Dokumentationsdateien zugreifen.
Data -gesteuerte Formulare sind ein Monorepo, das Lerna- und Garn -Arbeitsbereiche verwendet, sodass Sie auch alle seine Befehle verwenden können.
○ Nodejs 16
○ UNIX -ähnliches Betriebssystem (macOS, Linux)
In diesem Moment unterstützen wir die Entwicklung unter Windows nicht. Wir würden jedoch jeden PR begrüßen, um dies zu ändern.
yarn installyarn build Alle Pakete sind standardmäßig miteinander verknüpft. Wenn Sie also ein yarn build in einem Paket ausführen, werden alle anderen Pakete auf die neueste Version dieses Pakets aktualisiert. Zuerst muss ein Paket erstellt werden, bevor es in einem anderen Paket verwendet wird.
Jedes Paket verfügt über ein kleines Spielplatzpaket package/demo , in der Sie Ihre Änderungen testen können.
cd packages/pf3-component-mapper
yarn startDie Dokumentation ist eine serverseitige Reaktionsanwendung, die auf dem NextJS-Framework basiert.
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesUm erstellte Dateien zu reinigen, verwenden Sie den folgenden Befehl: (Dieses Skript wird auch vor jedem Build automatisch ausgeführt.)
yarn clean-buildTests können vom Kernordner oder aus einem bestimmten Paket durchgeführt werden.
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test Bitte folgen Sie der folgenden Checkliste, wenn Sie eine PR öffnen möchten. Es wird Ihnen helfen, die PR fertig zu machen.
Führen Sie yarn build im Root -Ordner aus, um alle Pakete zu erstellen. Sie können diesen Befehl nur im Paket ausführen, das Sie geändert haben. Alle Pakete sind standardmäßig verknüpft, Sie müssen sie zuerst erstellen.
Führen Sie yarn lint im Root -Ordner aus, um zu überprüfen, ob der Code korrekt formatiert ist. Sie können yarn lint --fix um Probleme automatisch zu korrigieren.
Alle neuen Code sollten ordnungsgemäß getestet werden. Führen Sie yarn test im Root -Ordner aus, um alle Dateien zu testen. Überprüfen Sie den CodeCoverage -Bericht, um aufgedeckte Codezeilen anzuzeigen. Wir verwenden die Scherz- und Reakt -Testbibliothek.
Wenn Sie eine neue Funktion vorstellen, sollten Sie diese Änderung in unserer Dokumentation dokumentieren. Die Dokumentation befindet sich im react-renderer-demo Paket und ist eine Webanwendung, die auf nächsten Js basiert. Wir schreiben keine Tests für die Dokumentation.
yarn dev startet eine lokale Version der Dokumentation.
yarn build erstellt Dateien für die Bereitstellung.
yarn serve die im lokalen Emulator ausgeführte Webanwendung emuliert.
Eine korrekte Commit -Nachricht ist wichtig, da wir die semantische Version verwenden, um neue Versionen automatisch wieder aufzunehmen. Diese Nachrichten werden auch in unseren Versionshinweise verwendet, sodass andere Benutzer sehen können, was geändert wird.
Meine Änderung führt eine neue Funktion vor
Präfix Ihre Commit -Nachricht mit feat und geben Sie das geänderte Paket an. Ein Beispiel: feat(pf4): a new dual list integration . Wenn Sie mehrere Pakete ändern, können Sie feat(common): ... oder feat(all): ...
Meine Änderung behebt einen Fehler oder eine technische Schuld
Präfix Ihre Commit -Nachricht mit fix . Andernfalls gelten dieselben Regeln. Ein Beispiel: fix(pf4): fixed missed proptype in select .
Meine Änderung ändert kein veröffentlichtes Paket
Wenn Ihre Änderung keine der freigegebenen Pakete ändert, können Sie einfach die Änderung einfach entfachen, ein Beispiel: Fix button on documenation example page . Dies gilt auch für Änderungen im Dokumentations -Repo.
Meine Veränderung führt zu einer brichtlichen Veränderung
Wir versuchen zu vermeiden, Veränderungen zu brechen. Bitte öffnen Sie ein Problem und besprechen Sie das Problem mit uns. Wir werden versuchen, alternative Optionen zu finden.
Wir begrüßen jeden Community -Beitrag. Haben Sie keine Angst, Fehler zu melden oder Probleme und Zugbereitungen zu erstellen! ?
Apache -Lizenz 2.0
