Flexibile form (fform) adalah pembangun formulir dengan redundansi kode minimal, sekaligus sangat fleksibel dan dapat dikembangkan. Tumpukan teknologi yang digunakan: React (v16), Redux (opsional), JSONSchema , TypeScript . Gagasan utamanya adalah penggunaan ulang sirkuit, komponen, dan fungsi secara maksimal.
Fitur
- 98kb diperkecil , 28kb dikompresi
- Perancang Formulir Mulai Cepat
- Menggabungkan dan menggunakan kembali formulir atau bagiannya ketika menggunakan properti
oneOf , allOf , $ref - Sinkronisasi validasi / async / JSON / kirim
- Dukungan redux asli, tetapi dimungkinkan untuk menggunakan penyimpanan lain (termasuk internal)
- Dukungan penuh untuk array (tambah / hapus / pindahkan)
- Penampil Bawaan
- Elemen formulir yang sepenuhnya dapat disesuaikan dan dapat ditambahkan
- Dukungan SSR
- Tidak ada dependensi (Bereaksi sebagai eksternal)
Karena, menurut spesifikasi JSONSchema, ditentukan oleh data hanya dalam format JSON, dalam bentuk form didefinisikan oleh 2 objek:
- Skema JSONSchema (draft v4, dengan properti tambahan) yang hanya berisi data JSON dan menjelaskan bidang formulir dan lokasi objek seperti tombol, tautan, tab, dll.
- objek elemen yang berisi komponen Bereaksi (v16), fungsi, bagian komponen yang sering digunakan dan, pada prinsipnya, kode js atau JSON lainnya yang dapat direferensikan dari bagian mana pun dari objek elemen atau dari bidang yang diperluas dari objek JSONSema. Pada intinya, elemen adalah repositori batu bata kode dari mana seluruh bentuk itu kemudian dirakit, dan tingkat elementaritas dari cypress ini ditentukan oleh pengembang.
Fleksibilitas, ekstensibilitas, dan penerapan kembali skema, komponen, dan fungsi siap pakai diimplementasikan sebagai berikut:
- Memperluas skema menggunakan properti $ ref dan allOf seperti yang dijelaskan dalam spesifikasi JSONSchema . Tautan ke sebuah contoh .
- Memperluas objek elemen menggunakan prinsip yang sama, tetapi dengan sintaks yang berbeda (untuk membedakan secara visual di mana skema diperluas dan di mana elemen berkembang). Dokumentasi Tautan ke sebuah contoh .
- Penangan data dan event menggunakan pipa dari fungsi js dengan cara yang hampir sama dengan linux. Output dari satu fungsi diumpankan ke input yang berikutnya, yang (dengan pembagian tanggung jawab fungsi yang benar) memungkinkan Anda untuk menggunakan kembali fungsi yang ada, dan menambahkan yang baru hanya jika fungsionalitas yang belum diimplementasikan diperlukan. Dokumentasi Tautan ke sebuah contoh .
Referensi