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 />;
}