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ığı
- 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.
- Redux Entegrasyonu:
useDensity
hook'u ile mevcut yoğunluk durumu okunur ve güncellenir.
- 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
- 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.
- Kullanıcı bir yoğunluk seçeneğine tıkladığında,
İ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 />;
}