O formulário Flexibile (fform) é um construtor de formulários com redundância mínima de código, sendo extremamente flexível e extensível. Pilha de tecnologia usada: React (v16), Redux (opcional), JSONSchema , TypeScript . A idéia principal é a máxima reutilização possível de circuitos, componentes e funções.
Funcionalidades
- 98kb minificado, 28kb compactado
- Designer de formulários de início rápido
- Combinando e reutilizando formulários ou partes deles ao usar as propriedades
oneOf , allOf , $ref - Sincronização de validação / async / JSON / submit
- Suporte redux nativo, mas é possível usar qualquer outro armazenamento (incluindo interno)
- Suporte completo para matrizes (adicionar / remover / mover)
- Visualizador incorporado
- Elementos de formulário totalmente personalizáveis e adicionáveis
- Suporte SSR
- Sem dependências (reagir como externo)
Como, de acordo com a especificação JSONSchema, ele é definido pelos dados apenas no formato JSON, no formulário o formulário é definido por 2 objetos:
- Esquema JSONSchema (rascunho v4, com propriedades adicionais) contendo apenas dados JSON e descrevendo campos de formulário e a localização de objetos como botões, links, guias, etc.
- um objeto de elementos contendo componentes, funções do React (v16), partes de componentes usadas com frequência e, em princípio, qualquer outro código js ou JSON que possa ser referenciado de qualquer parte do objeto de elementos ou de campos estendidos do objeto JSONSchema. Em essência, os elementos são um repositório de tijolos de código dos quais toda a forma é montada e o grau de elementaridade desses ciprestes é determinado pelo desenvolvedor.
A flexibilidade, extensibilidade e reaplicação de circuitos, componentes e funções prontas são implementadas da seguinte forma:
- Estendendo esquemas usando as propriedades $ ref e allOf, conforme descrito na especificação JSONSchema . Link para um exemplo .
- Estendendo o objeto de elementos usando um princípio semelhante, mas com uma sintaxe diferente (para distinguir visualmente onde o esquema se expande e onde os elementos se expandem). Documentação Link para um exemplo .
- Manipuladores de dados e eventos usam pipes das funções js da mesma maneira que o linux. A saída de uma função é inserida na entrada da próxima, que (com a divisão correta de responsabilidades das funções) permite reutilizar as funções existentes e adicionar novas somente se a funcionalidade que ainda não foi implementada for necessária. Documentação Link para um exemplo .
Referências