LivaForm

DevExtreme'in Form bileşeni üzerine kurulu form kabuğu. LivaFormItem bileşenleri editorType değerine göre Liva editörlerine (LivaTextBox, LivaNumberBox, LivaSwitch...) eşlenir. form prop'una bir useForm örneği verildiğinde formData, isSaving ve errors durumları otomatik olarak bağlanır; kaydetme sırasında alanlar iskelet (skeleton) görünümüne geçer.

import {
  LivaForm,
  LivaFormItem,
  LivaFormGroupItem,
  LivaFormButtonItem,
  LivaFormSaveAndCancelButtons,
  LivaTabFormItem,
  useForm,
} from "@dataliva/livalib";

Temel kullanım

Form durumu useForm ile kurulur ve form prop'u üzerinden bağlanır. Aşağıdaki örnekte kaydetme, 800 ms'lik sahte bir gecikmeyle simüle edilir; başarılı kayıtta bildirim yerine basit bir durum mesajı gösterilir. Buton davranışları saveButtonProps.onClick ve cancelButtonProps.onClick ile verilir.

const form = useForm<KayitFormu>({
  initialValues: { adSoyad: "", eposta: "", yas: 25, aktif: true },
  onSave: async () => {
    await new Promise((res) => setTimeout(res, 800)); // sahte API çağrısı
  },
});

Gruplu form

LivaFormGroupItem, alanları caption başlıklı gruplar halinde toplar; colCount ile sütun düzeni kurulur. useForm yerine düz bir nesne de formData prop'u ile verilebilir — DevExtreme, düzenlenen alanları bu nesnenin üzerine yazar.

LivaForm

Ayrıca DevExtreme IFormOptions'tan gelen tüm prop'lar (ör. colCount, labelLocation, onFieldDataChanged). form verildiğinde formData, loading ve hata durumları useForm örneğinden okunur.

LivaFormItem

Liva editörlerine eşlenen editorType değerleri: dxTextBox, dxPasswordBox, dxNumberBox, dxDateBox, dxTextArea, dxSelectBox, dxCheckBox, dxSwitch, dxRadioGroup, dxTagBox, dxHtmlEditor, dxFileBox, dxAvatarBox, dxDropdownBox, dxPhoneBox.

LivaFormGroupItem

Ayrıca DevExtreme IGroupItemProps'tan gelen tüm prop'lar.

LivaFormButtonItem

Form içine buton yerleştirir; LivaButton ile aynı prop'ları alır (ör. text, type, variant, loading, onClick, width).

LivaFormSaveAndCancelButtons

Tıklama davranışlarını saveButtonProps.onClick ve cancelButtonProps.onClick ile verin.

LivaTabFormItem

Sekmeli form bölümü oluşturur; DevExtreme ITabbedItemProps'tan gelen tüm prop'ları alır (ör. tabs, tabPanelOptions).