Skip to main content
Version: 1.0.1

Density Popover

Density Popover, Ops Table bileşeninde kullanıcıların tablo satırlarının yoğunluğunu (row density) değiştirmesine olanak tanır. Kullanıcılar, Compact, Standard veya Comfortable gibi yoğunluk seçenekleri arasında seçim yapabilir.

Ne İşe Yarar?​

Density Popover:

  • Tablo satırlarının yüksekliğini değiştirir.
  • Kullanıcı deneyimine uygun bir tablo düzeni sağlar.
  • Redux Store'daki yoğunluk durumunu günceller.

İş Mantığı​

  1. Yoğunluk Seçimi:
    • Kullanıcı, Compact, Standard veya Comfortable seçeneklerinden birini seçer.
    • setDensity fonksiyonu çağrılarak Redux Store'daki yoğunluk durumu güncellenir.
  2. Redux Entegrasyonu:
    • useDensity hook'u ile mevcut yoğunluk durumu okunur ve güncellenir.
  3. Seçim Durumu Yönetimi:
    • Mevcut yoğunluk durumu, aktif seçimin belirlenmesi için kontrol edilir.

Aldığı Propslar​

Density Popover herhangi bir props almaz, useDensity hook'u üzerinden durum yönetimi sağlar.

Yönetilen Olaylar​

  1. Yoğunluk Seçimi:
    • Kullanıcı bir yoğunluk seçeneğine tıkladığında, setDensity fonksiyonu çağrılır ve Redux Store güncellenir.
    • Aktif yoğunluk durumu, seçilen yoğunluğa göre belirlenir.

İlgili Bileşenler​

  • OpsTablePopovers: DensityPopover bileşenini tetikleyen ana popover.
  • OpsTable: Yoğunluk durumunu uygulayan ana tablo bileşeni.

Burada Yapılan Ana İşlemler​

Density Popover bileşeninde aşağıdaki işlemler anahtar rol oynar ve bu olaylara müdahale etmek için ilgili bölümlere odaklanabilirsiniz:

  • Redux Durum Güncelleme: setDensity fonksiyonu ile Redux Store'daki yoğunluk durumu değiştirilir.
  • Seçim Yönetimi: Aktif yoğunluk durumu, kullanıcı seçimine göre belirlenir.

Örnek Kullanım​

import React from "react";
import DensityPopover from "./DensityPopover";

export default function ExampleDensityPopover() {
return <DensityPopover />;
}