react forms
v4.0.0
Формы, управляемые данными, - это библиотека React, используемая для рендеринга и управления формами с множеством предоставленных функций, основанных на окончательной форме 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 являются внешними зависимостями. Обязательно установите их и их стили в ваши пучки.
Предоставленные Mappers поддержки Forms, управляемых данными, содержит следующее набор компонентов:
Любые другие компоненты могут быть добавлены в 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.
Формы, управляемые данными, - это монорепо, в котором используются рабочие пространства Lerna и Yarn, поэтому вы также можете использовать все его команды.
○ Nodejs 16
○ Unix Like OS (MacOS, Linux)
В этот момент мы не поддерживаем разработку в Windows. Тем не менее, мы бы приветствовали любой PR, чтобы изменить это.
yarn installyarn build Все пакеты связаны по умолчанию, поэтому, если вы запускаете yarn build в пакете, все остальные пакеты обновляются до последней версии этого пакета. Пакет должен быть построен в первую очередь, прежде чем он будет использован в другом пакете.
Каждый пакет имеет небольшой игровой package/demo , где вы можете проверить свои изменения.
cd packages/pf3-component-mapper
yarn startДокументация представляет собой приложение React Server Side Render, основанное на Framework 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 в корневой папке, чтобы проверить все файлы. Проверьте отчет о кодировке, чтобы увидеть открытые строки кода. Мы используем библиотеку Jest и React Testing.
Если вы представляете новую функцию, вы должны задокументировать это изменение в нашей документации. Документация находится в пакете react-renderer-demo , и это веб-приложение, основанное на NextJS. Мы не пишем тесты для документации.
yarn dev начинает локальную версию документации.
yarn build готовит файлы для развертывания.
yarn serve эмулирует веб -приложение, работающее в локальном эмуляторе.
Правильное сообщение о коммите важно, потому что мы используем семантический релиз для автоматического снятия новых версий. Эти сообщения также используются в наших примечаниях по выпуску, поэтому другие пользователи могут видеть, что меняется.
Мое изменение представляет новую функцию
Префикс ваш сообщение о коммите с feat и укажите пакет, который изменяется. Пример: feat(pf4): a new dual list integration . Если вы измените несколько пакетов, вы можете использовать feat(common): ... или feat(all): ...
Мои изменения исправляют ошибку или технический долг
Префикс вашему сообщению Commit с fix . В противном случае применяются те же правила. Пример: fix(pf4): fixed missed proptype in select .
Мое изменение не меняет ни одного выпущенного пакета
Если ваше изменение не изменяет ни одного из выпущенных пакетов, вы можете просто просто узнать изменение, пример: Fix button on documenation example page . Это также относится к любым изменениям в документации.
Мое изменение вносит нарушающееся изменение
Мы стараемся избежать нарушения изменений. Пожалуйста, откройте проблему и обсудим эту проблему с нами, мы постараемся придумать альтернативные варианты.
Мы приветствуем любой вклад сообщества. Не бойтесь сообщать о ошибке или создавать проблемы и запросы! ?
Apache License 2.0
