react forms
v4.0.0
Formulir yang digerakkan data adalah perpustakaan bereaksi yang digunakan untuk merender dan mengelola formulir dengan banyak fitur yang disediakan berdasarkan bentuk akhir React.
❓ Mengapa menggunakan formulir yang digerakkan data? ❓
? Fitur ?
Untuk informasi lebih lanjut silakan kunjungi dokumentasi.
Daftar isi
$ 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-mapperPerpustakaan komponen dalam pemetaan adalah dependensi eksternal. Pastikan untuk menginstalnya dan gaya mereka di bundel Anda.
Disediakan pemetaan dukungan formulir yang digerakkan data berisi set komponen berikut:
Komponen lain apa pun dapat ditambahkan ke Mapper dan Renderer dengan renderer. Komponen yang ada juga dapat ditimpa.
Untuk formulir yang digerakkan data dalam komponen Anda, Anda memerlukan renderer dan mapper komponen, yang menyediakan mapper komponen dan bentuk templat.
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 }
/>
) Anda juga dapat menggunakan mapper khusus.
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' ,
} ]
}Untuk informasi lebih lanjut, silakan periksa halaman ini.
Mappers juga dapat dihasilkan dengan menggunakan perintah yarn generate-template .
Silakan gunakan situs dokumentasi kami. Dalam hal masalah apa pun, Anda dapat mengakses file dokumentasi secara langsung di GitHub.
Formulir yang didorong data adalah monorepo yang menggunakan ruang kerja Lerna dan benang, sehingga Anda dapat menggunakan semua perintahnya juga.
○ NodeJs 16
○ UNIX LIKE OS (MacOS, Linux)
Kami tidak mendukung pengembangan di Windows saat ini. Namun, kami akan menyambut PR apa pun untuk mengubah ini.
yarn installyarn build Semua paket ditautkan bersama secara default, jadi jika Anda menjalankan yarn build dalam paket, semua paket lain diperbarui ke versi terbaru dari paket itu. Paket harus dibangun terlebih dahulu sebelum digunakan dalam paket lain.
Setiap paket memiliki package/demo taman bermain kecil, di mana Anda dapat menguji perubahan Anda.
cd packages/pf3-component-mapper
yarn startDokumentasi adalah aplikasi reaksi yang diberikan sisi server berdasarkan kerangka kerja NextJS.
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesUntuk membersihkan file yang dibangun menggunakan perintah berikut: (skrip ini juga dijalankan secara otomatis sebelum setiap build.)
yarn clean-buildTes dapat dijalankan dari folder inti atau dari paket tertentu.
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test Harap ikuti daftar periksa berikut jika Anda akan membuka PR. Ini akan membantu Anda membuat PR selesai.
Jalankan yarn build di folder root untuk membangun semua paket. Anda dapat menjalankan perintah ini hanya dalam paket yang Anda ubah. Semua paket ditautkan secara default, Anda harus membangunnya terlebih dahulu.
Jalankan yarn lint di folder root untuk memeriksa apakah kode diformat dengan benar. Anda dapat menggunakan yarn lint --fix untuk secara otomatis memperbaiki masalah.
Semua kode baru harus diuji dengan benar. Jalankan yarn test di folder root untuk menguji semua file. Periksa laporan Codecoverage untuk melihat baris kode yang terbuka. Kami menggunakan Jest dan React Testing Library.
Jika Anda memperkenalkan fitur baru, Anda harus mendokumentasikan perubahan ini dalam dokumentasi kami. Dokumentasi ini terletak di paket react-renderer-demo dan ini adalah aplikasi web berdasarkan NextJS. Kami tidak menulis tes untuk dokumentasi.
yarn dev memulai versi lokal dari dokumentasi.
yarn build Mempersiapkan file untuk penempatan.
yarn serve meniru aplikasi web yang berjalan di emulator lokal.
Pesan komit yang benar adalah penting, karena kami menggunakan rilis semantik untuk secara otomatis melepaskan versi baru. Pesan -pesan ini juga digunakan dalam catatan rilis kami, sehingga pengguna lain dapat melihat apa yang sedang diubah.
Perubahan saya memperkenalkan fitur baru
PREFIX Pesan Komit Anda dengan feat dan tentukan paket yang sedang diubah. Contoh: feat(pf4): a new dual list integration . Jika Anda mengubah beberapa paket, Anda dapat menggunakan feat(common): ... atau feat(all): ...
Perubahan saya memperbaiki bug atau hutang teknis
PREFIX Pesan Komit Anda dengan fix . Jika tidak, aturan yang sama berlaku. Contoh: fix(pf4): fixed missed proptype in select .
Perubahan saya tidak mengubah paket yang dirilis
Jika perubahan Anda tidak mengubah salah satu paket yang dirilis, Anda dapat dengan sederhana menghilangkan perubahan, contoh: Fix button on documenation example page . Ini juga berlaku untuk setiap perubahan dalam repo dokumentasi.
Perubahan saya memperkenalkan perubahan besar
Kami berusaha menghindari perubahan perubahan. Tolong, buka masalah dan diskusikan masalah ini dengan kami, kami akan mencoba membuat opsi alternatif.
Kami menyambut setiap kontribusi komunitas. Jangan takut untuk melaporkan bug atau membuat masalah dan permintaan menarik! ?
Lisensi Apache 2.0
