Body Delete Element
Body Delete Element, Ops Table bileşeninde bir satırın silinmesi sırasında kullanıcıya onay sürecini yönetmek için kullanılan özel bir satır bileşenidir. Kullanıcı, silme işlemini onaylayabilir veya iptal edebilir.
Ne İşe Yarar?
Body Delete Element:
- Kullanıcının bir satırı silmeden önce onay vermesini sağlar.
- İptal ve onay mekanizmaları sunar.
- Kullanıcı etkileşimlerine göre satır görünümünü değiştirir.
İş Mantığı
-
Silme İşlemi Başlatma:
- Kullanıcı silme ikonuna tıkladığında bu bileşen aktif hale gelir.
- İlgili satır, "silinmek üzere" moduna geçer ve onay seçenekleri gösterilir.
-
Silme İşlemini Onaylama:
- Kullanıcı "Onayla" butonuna tıkladığında
handleCancelDelete
fonksiyonu çağrılır. - Bu işlem, ilgili satırın
opsService.handleDelete
aracılığıyla backend'den silinmesini sağlar.
- Kullanıcı "Onayla" butonuna tıkladığında
-
Silme İşlemini İptal Etme:
- Kullanıcı "İptal" butonuna tıkladığında
handleCancel
fonksiyonu çağrılır. - Satır, "silinmek üzere" modundan çıkar ve normal görünümüne döner.
- Kullanıcı "İptal" butonuna tıkladığında
Aldığı Propslar
IBodyDeleteElemetProps
arayüzünden alınan propslar şunlardır:
Prop | Tipi | Açıklama |
---|---|---|
row | Row<unknown> | Silinecek satırın verilerini içerir. |
handleCancelDelete | () => void | Silme işlemini onaylamak için kullanılan fonksiyon. |
handleCancel | () => void | Silme işlemini iptal etmek için kullanılan fonksiyon. |
rowHeigh | string | Satır yüksekliğini belirler. |
showSelectionColumn | boolean | Seçim sütununun görünürlüğünü kontrol eder. |
tableCellSize | "small" | "medium" | Hücre boyutunu belirler. |
Yönetilen Olaylar
-
Silme İşlemini Onaylama:
- Kullanıcı "Onayla" butonuna tıkladığında
handleCancelDelete
çalışır. - Bu işlem,
opsService.handleDelete
fonksiyonunu çağırarak satırın backend'den silinmesini sağlar.
- Kullanıcı "Onayla" butonuna tıkladığında
-
Silme İşlemini İptal Etme:
- Kullanıcı "İptal" butonuna tıkladığında
handleCancel
çalışır. - Satır, "silinmek üzere" durumundan çıkar ve önceki haline döner.
- Kullanıcı "İptal" butonuna tıkladığında
-
Seçim Sütunu Görünürlüğü:
showSelectionColumn
değeri, seçim sütununun gösterilip gösterilmeyeceğini kontrol eder.
İlgili Bileşenler
- OpsTable: Bu bileşenin yer aldığı ana tablo bileşeni.
- ActionsCell: Silme ikonunun bulunduğu hücre bileşeni.
Burada Yapılan Ana İşlemler
Body Delete Element bileşeninde aşağıdaki işlemler anahtar rol oynar ve bu olaylara müdahale etmek için ilgili bölümlere odaklanabilirsiniz:
- Silme Onayı ve İptali: Kullanıcının "Onayla" veya "İptal" butonlarına tıklamasıyla satırın durumu güncellenir.
- Satır Yüksekliği Yönetimi:
rowHeigh
değeri, satırın yüksekliğini belirler. - Seçim Sütunu: Seçim sütununun görünürlüğü
showSelectionColumn
ile kontrol edilir.
Örnek Kullanım
import React from "react";
import BodyDeleteElemet from "./BodyDeleteElemet";
export default function ExampleBodyDeleteElement({
row,
handleCancelDelete,
handleCancel,
rowHeigh,
showSelectionColumn,
tableCellSize,
}) {
return (
<BodyDeleteElemet
row={row}
handleCancelDelete={handleCancelDelete}
handleCancel={handleCancel}
rowHeigh={rowHeigh}
showSelectionColumn={showSelectionColumn}
tableCellSize={tableCellSize}
/>
);
}