react forms
v4.0.0
النماذج التي تعتمد على البيانات هي مكتبة رد فعل تستخدم لتقديم وإدارة النماذج مع الكثير من الميزات المقدمة على أساس النموذج النهائي للرد.
❓ لماذا تستخدم النماذج التي تعتمد على البيانات؟ ❓
؟ سمات ؟
لمزيد من المعلومات ، يرجى زيارة الوثائق.
جدول المحتويات
$ 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مكتبات المكونات في التعدين هي تبعيات خارجية. تأكد من تثبيتها وأنماطهم في حزمك.
يحتوي محاكم النماذج التي تعتمد على البيانات على مجموعة من المكونات التالية:
يمكن إضافة أي مكونات أخرى إلى 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' ,
} ]
}لمزيد من المعلومات ، يرجى التحقق من هذه الصفحة.
يمكن أن يتم إنشاء التعدادات أيضًا باستخدام أمر yarn generate-template .
الرجاء استخدام موقع الوثائق لدينا. في حالة وجود أي مشكلة ، يمكنك الوصول إلى ملفات الوثائق مباشرة في GitHub.
النماذج التي تعتمد على البيانات عبارة عن Monorepo تستخدم مساحات عمل Lerna والغزل ، بحيث يمكنك استخدام جميع أوامرها أيضًا.
○ Nodejs 16
○ UNIX مثل OS (MACOS ، Linux)
نحن لا ندعم التطوير على Windows في هذه اللحظة. ومع ذلك ، نرحب بأي علاقات عامة لتغيير هذا.
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 يرجى متابعة قائمة المراجعة التالية إذا كنت ستفتح العلاقات العامة. سوف يساعدك على جعل العلاقات العامة الانتهاء.
قم بتشغيل yarn build في مجلد الجذر لبناء جميع الحزم. يمكنك تشغيل هذا الأمر فقط في الحزمة التي قمت بتغييرها. ترتبط جميع الحزم افتراضيًا ، يجب عليك إنشاءها أولاً.
قم بتشغيل yarn lint في المجلد الجذر للتحقق مما إذا كان الرمز قد تم تنسيقه بشكل صحيح. يمكنك استخدام yarn lint --fix لتصحيح المشكلات تلقائيًا.
يجب اختبار جميع التعليمات البرمجية الجديدة بشكل صحيح. قم بتشغيل yarn test في مجلد الجذر لاختبار جميع الملفات. تحقق من تقرير برنامج الترميز لرؤية خطوط الكود غير المكشوفة. نحن نستخدم مكتبة اختبار Jest and React.
إذا قدمت ميزة جديدة ، فيجب عليك توثيق هذا التغيير في وثائقنا. يقع الوثائق في حزمة 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
