react forms
v4.0.0
รูปแบบที่ขับเคลื่อนด้วยข้อมูลเป็นไลบรารี React ที่ใช้สำหรับการแสดงผลและการจัดการแบบฟอร์มที่มีคุณสมบัติมากมายที่จัดทำขึ้นอยู่กับแบบฟอร์มการตอบสนองสุดท้าย
❓ทำไมต้องใช้แบบฟอร์มที่ขับเคลื่อนด้วยข้อมูล?
- คุณสมบัติ ?
สำหรับข้อมูลเพิ่มเติมกรุณาเยี่ยมชมเอกสาร
สารบัญ
$ 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-mapperไลบรารีส่วนประกอบใน Mappers เป็นการพึ่งพาภายนอก ตรวจสอบให้แน่ใจว่าได้ติดตั้งและสไตล์ของพวกเขาในชุดของคุณ
ให้การสนับสนุนแบบฟอร์มข้อมูลที่ขับเคลื่อนด้วยข้อมูลประกอบด้วยชุดส่วนประกอบดังต่อไปนี้:
ส่วนประกอบอื่น ๆ สามารถเพิ่มลงใน mapper และ renderer ด้วยตัวแสดงผลแบบฟอร์ม ส่วนประกอบที่มีอยู่สามารถเอาชนะได้เช่นกัน
เพื่อให้ได้รูปแบบที่ขับเคลื่อนด้วยข้อมูลในส่วนประกอบของคุณคุณต้องใช้ Renderer และ Mapper ส่วนประกอบซึ่งมีส่วนประกอบ Mapper และเทมเพลตแบบฟอร์ม
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 }
/>
) คุณยังสามารถใช้ Mapper ที่กำหนดเอง
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' ,
} ]
}สำหรับข้อมูลเพิ่มเติมโปรดตรวจสอบหน้านี้
Mappers สามารถสร้างขึ้นได้โดยใช้คำสั่ง yarn generate-template
โปรดใช้เว็บไซต์เอกสารของเรา ในกรณีที่มีปัญหาใด ๆ คุณสามารถเข้าถึงไฟล์เอกสารโดยตรงใน GitHub
รูปแบบที่ขับเคลื่อนด้วยข้อมูลเป็น monorepo ที่ใช้พื้นที่ทำงานของ Lerna และเส้นด้ายเพื่อให้คุณสามารถใช้คำสั่งทั้งหมดได้เช่นกัน
○ Nodejs 16
○ Unix Like OS (MacOS, Linux)
เราไม่สนับสนุนการพัฒนาบน Windows ในขณะนี้ อย่างไรก็ตามเรายินดีต้อนรับ PR ใด ๆ ที่จะเปลี่ยนแปลงสิ่งนี้
yarn installyarn build แพ็คเกจทั้งหมดจะเชื่อมโยงกันตามค่าเริ่มต้นดังนั้นหากคุณเรียกใช้ yarn build ในแพ็คเกจแพ็คเกจอื่น ๆ ทั้งหมดจะได้รับการอัปเดตเป็นแพ็คเกจรุ่นล่าสุด ต้องสร้างแพ็คเกจก่อนก่อนที่จะใช้ในแพ็คเกจอื่น ๆ
แต่ละแพ็คเกจมี package/demo สนามเด็กเล่นขนาดเล็กซึ่งคุณสามารถทดสอบการเปลี่ยนแปลงของคุณได้
cd packages/pf3-component-mapper
yarn startเอกสารประกอบเป็นแอปพลิเคชัน React ที่แสดงผลตามเซิร์ฟเวอร์ตามเฟรมเวิร์ก NextJS
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesในการทำความสะอาดไฟล์ที่สร้างขึ้นใช้คำสั่งต่อไปนี้: (สคริปต์นี้จะทำงานโดยอัตโนมัติก่อนแต่ละบิลด์)
yarn clean-buildการทดสอบสามารถเรียกใช้จากโฟลเดอร์หลักหรือจากแพ็คเกจเฉพาะ
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test โปรดติดตามรายการตรวจสอบต่อไปนี้หากคุณกำลังจะเปิด PR มันจะช่วยให้คุณทำ PR เสร็จ
เรียกใช้ yarn build ในโฟลเดอร์รูทเพื่อสร้างแพ็คเกจทั้งหมด คุณสามารถเรียกใช้คำสั่งนี้ในแพ็คเกจที่คุณเปลี่ยนเท่านั้น แพ็คเกจทั้งหมดเชื่อมโยงตามค่าเริ่มต้นคุณต้องสร้างก่อน
เรียกใช้ yarn lint ในโฟลเดอร์รูทเพื่อตรวจสอบว่ารหัสถูกจัดรูปแบบอย่างถูกต้องหรือไม่ คุณสามารถใช้ yarn lint --fix เพื่อแก้ไขปัญหาโดยอัตโนมัติ
รหัสใหม่ทั้งหมดควรได้รับการทดสอบอย่างเหมาะสม เรียกใช้ yarn test ในโฟลเดอร์รูทเพื่อทดสอบไฟล์ทั้งหมด ตรวจสอบรายงาน codeCoverage เพื่อดูบรรทัดรหัสที่เปิดออก เรากำลังใช้ไลบรารีการทดสอบและตอบสนอง
หากคุณแนะนำคุณสมบัติใหม่คุณควรจัดทำเอกสารการเปลี่ยนแปลงนี้ในเอกสารของเรา เอกสารนี้อยู่ในแพ็คเกจ react-renderer-demo และเป็นเว็บแอปพลิเคชันที่ใช้ NextJS เราไม่ได้เขียนการทดสอบสำหรับเอกสาร
yarn dev เริ่มต้นเอกสารเวอร์ชันท้องถิ่น
yarn build เตรียมไฟล์สำหรับการปรับใช้
yarn serve เลียนแบบเว็บแอปพลิเคชันที่ทำงานในเครื่องจำลองท้องถิ่น
ข้อความการกระทำที่ถูกต้องเป็นสิ่งสำคัญเนื่องจากเราใช้การปล่อยความหมายเพื่อส่งเวอร์ชันใหม่โดยอัตโนมัติ ข้อความเหล่านี้ยังใช้ในบันทึกย่อการเปิดตัวของเราเพื่อให้ผู้ใช้รายอื่นสามารถดูว่ามีการเปลี่ยนแปลงอะไร
การเปลี่ยนแปลงของฉันแนะนำคุณสมบัติใหม่
นำหน้าข้อความการกระทำของคุณด้วย feat และระบุแพ็คเกจที่กำลังเปลี่ยนแปลง ตัวอย่าง: feat(pf4): a new dual list integration หากคุณเปลี่ยนหลายแพ็คเกจคุณสามารถใช้ feat(common): ... หรือ feat(all): ...
การเปลี่ยนแปลงของฉันแก้ไขข้อผิดพลาดหรือหนี้ทางเทคนิค
นำหน้าข้อความการกระทำของคุณด้วย fix มิฉะนั้นจะใช้กฎเดียวกัน ตัวอย่าง: fix(pf4): fixed missed proptype in select
การเปลี่ยนแปลงของฉันไม่ได้เปลี่ยนแพ็คเกจที่เปิดตัวใด ๆ
หากการเปลี่ยนแปลงของคุณไม่เปลี่ยนแพ็คเกจที่ปล่อยออกมาคุณสามารถง่าย ๆ เพียงแค่ descibe การเปลี่ยนแปลงตัวอย่าง: Fix button on documenation example page นอกจากนี้ยังใช้สำหรับการเปลี่ยนแปลงใด ๆ ในเอกสารประกอบ
การเปลี่ยนแปลงของฉันแนะนำการเปลี่ยนแปลงที่แตกหัก
เราพยายามหลีกเลี่ยงการเปลี่ยนแปลงการเปลี่ยนแปลง กรุณาเปิดปัญหาและหารือเกี่ยวกับปัญหากับเราเราจะพยายามหาทางเลือกอื่น
เรายินดีต้อนรับการมีส่วนร่วมของชุมชน อย่ากลัวที่จะรายงานข้อผิดพลาดหรือสร้างปัญหาและคำตอบแบบดึง! -
ใบอนุญาต Apache 2.0
