Flexibile form (fform) es un generador de formularios con mínima redundancia de código, a la vez que es extremadamente flexible y extensible. Pila de tecnología utilizada: React (v16), Redux (opcional), JSONSchema , TypeScript . La idea principal es la máxima reutilización posible de circuitos, componentes y funciones.
Caracteristicas
- 98kb minificado, 28kb comprimido
- Diseñador de formularios de inicio rápido
- Combinando y reutilizando formularios o partes de ellos cuando se usan las propiedades
oneOf , allOf , $ref - Validación de sincronización / async / JSON / submit
- Soporte nativo de redux, pero es posible usar cualquier otro almacenamiento (incluido interno)
- Soporte completo para matrices (agregar / eliminar / mover)
- Visor incorporado
- Elementos de formulario totalmente personalizables y añadibles
- Soporte de SSR
- Sin dependencias (Reaccionar como externo)
Dado que, de acuerdo con la especificación JSONSchema, está definido por datos solo en el formato JSON, en la forma el formulario está definido por 2 objetos:
- Esquema JSONSchema (borrador v4, con propiedades adicionales) que contiene solo datos JSON y describe los campos del formulario y la ubicación de objetos como botones, enlaces, pestañas, etc.
- un objeto de elementos que contiene componentes React (v16), funciones, partes de componentes utilizadas con frecuencia y, en principio, cualquier otro código js o JSON al que se pueda hacer referencia desde cualquier parte del objeto de elementos o desde campos extendidos del objeto JSONSchema. En esencia, los elementos son un depósito de bloques de código a partir de los cuales se ensambla toda la forma, y el desarrollador determina el grado de elementalidad de estos cipriots.
La flexibilidad, la extensibilidad y la nueva aplicación de circuitos, componentes y funciones listos para usar se implementan de la siguiente manera:
- Extendiendo esquemas usando las propiedades $ ref y allOf como se describe en la especificación JSONSchema . Enlace a un ejemplo .
- Extender el objeto de elementos usando un principio similar, pero con una sintaxis diferente (para distinguir visualmente dónde se expande el esquema y dónde se expanden los elementos). Documentación Enlace a un ejemplo .
- Los manejadores de datos y eventos usan canalizaciones de funciones js de la misma manera que lo hace Linux. La salida de una función se alimenta a la entrada de la siguiente, que (con la división correcta de responsabilidades de las funciones) le permite reutilizar las funciones existentes y agregar nuevas solo si se requiere una funcionalidad que aún no se ha implementado. Documentación Enlace a un ejemplo .
Referencias