Ana içeriğe geç
Version: 1.0.1

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ığı

  1. 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.
  2. 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.
  3. 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.

Aldığı Propslar

IBodyDeleteElemetProps arayüzünden alınan propslar şunlardır:

PropTipiAçıklama
rowRow<unknown>Silinecek satırın verilerini içerir.
handleCancelDelete() => voidSilme işlemini onaylamak için kullanılan fonksiyon.
handleCancel() => voidSilme işlemini iptal etmek için kullanılan fonksiyon.
rowHeighstringSatır yüksekliğini belirler.
showSelectionColumnbooleanSeçim sütununun görünürlüğünü kontrol eder.
tableCellSize"small" | "medium"Hücre boyutunu belirler.

Yönetilen Olaylar

  1. 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.
  2. 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.
  3. 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}
/>
);
}