react forms
v4.0.0
Os formulários orientados a dados são uma biblioteca react usada para renderizar e gerenciar formulários com muitos recursos fornecidos com base no formulário final do React.
❓ Por que usar formulários orientados a dados? ❓
? Características ?
Para mais informações, visite a documentação.
Índice
$ 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-mapperBibliotecas de componentes em maperes são dependências externas. Certifique -se de instalá -los e seus estilos em seus pacotes.
Os mapeadores fornecidos por formulários orientados a dados suportam o seguinte conjunto de componentes:
Quaisquer outros componentes podem ser adicionados ao mapeador e renderizador com o renderizador do formulário. Os componentes existentes também podem ser substituídos.
Para que os formulários acionados por dados no seu componente você precisa do renderizador e um mapeador de componente, que fornece mapeador de componente e modelo de formulário.
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 }
/>
) Você também pode usar o mapeador personalizado.
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' ,
} ]
}Para mais informações, verifique esta página.
Os mapeadores também podem ser gerados usando o comando yarn generate-template .
Por favor, use nosso site de documentação. Em caso de qualquer problema, você pode acessar arquivos de documentação diretamente no GitHub.
Os formulários orientados a dados são um Monorepo que usa espaços de trabalho de Lerna e Yarn, para que você também possa usar todos os seus comandos.
○ Nodejs 16
○ UNIX como os (MacOS, Linux)
Não apoiamos o desenvolvimento do Windows neste momento. No entanto, receberíamos qualquer RP para mudar isso.
yarn installyarn build Todos os pacotes são vinculados por padrão; portanto, se você executar uma yarn build em um pacote, todos os outros pacotes serão atualizados para a versão mais recente desse pacote. Um pacote deve ser construído primeiro antes de ser usado em outro pacote.
Cada pacote possui um pequeno package/demo de playground, onde você pode testar suas alterações.
cd packages/pf3-component-mapper
yarn startA documentação é um aplicativo React renderizado do servidor com base na estrutura NextJS.
cd packages/react-renderer-demo
yarn devyarn lerna clean
rm -rf node_modulesPara limpar os arquivos construídos, use o seguinte comando: (Este script também é executado automaticamente antes de cada construção.)
yarn clean-buildOs testes podem ser executados a partir da pasta principal ou do pacote específico.
yarn test
yarn test --watchAll packages/pf4-component-mapper
# or
cd packages/pf4-component-mapper
yarn test Siga a seguinte lista de verificação se você vai abrir um PR. Isso ajudará você a fazer o PR terminado.
Execute yarn build na pasta raiz para criar todos os pacotes. Você pode executar este comando apenas no pacote que mudou. Todos os pacotes estão vinculados por padrão, você deve construí -los primeiro.
Execute yarn lint na pasta raiz para verificar se o código está formatado corretamente. Você pode usar yarn lint --fix para corrigir automaticamente os problemas.
Todo o novo código deve ser testado corretamente. Execute yarn test na pasta raiz para testar todos os arquivos. Verifique o relatório de recuperação de codificina para ver linhas de código descobertas. Estamos usando a biblioteca de testes de brincadeira e reação.
Se você apresentar um novo recurso, documente essa alteração em nossa documentação. A documentação está localizada no pacote react-renderer-demo e é um aplicativo da Web baseado no NextJS. Não escrevemos testes para a documentação.
yarn dev inicia uma versão local da documentação.
yarn build prepara arquivos para implantação.
yarn serve emula o aplicativo da web em execução no emulador local.
Uma mensagem de confirmação correta é importante, porque estamos usando a versão semântica para reaparecer automaticamente novas versões. Essas mensagens também são usadas em nossas notas de lançamento, para que outros usuários possam ver o que está sendo alterado.
Minha mudança apresenta um novo recurso
Prefixo sua mensagem de confirmação com feat e especifique o pacote que está sendo alterado. Um exemplo: feat(pf4): a new dual list integration . Se você alterar vários pacotes, poderá usar feat(common): ... ou feat(all): ...
Minha mudança corrige um bug ou dívida técnica
Prefixo sua mensagem de confirmação com fix . Caso contrário, as mesmas regras se aplicam. Um exemplo: fix(pf4): fixed missed proptype in select .
Minha mudança não muda nenhum pacote liberado
Se sua alteração não alterar nenhum dos pacotes lançados, você poderá simplesmente descer a alteração, um exemplo: Fix button on documenation example page . Isso também se aplica a qualquer alteração no repositório de documentação.
Minha mudança apresenta uma mudança de ruptura
Estamos tentando evitar quebrar mudanças. Por favor, abra um problema e discuta o problema conosco, tentaremos criar opções alternativas.
Congratulamo -nos com qualquer contribuição da comunidade. Não tenha medo de relatar bug ou criar problemas e solicitações de puxar! ?
Licença Apache 2.0
