useDensity

useDensity, Ops Table bileşeninde tablo yoğunluğu durumunu yönetmek ve güncellemek için kullanılan özel bir React hook'udur. Bu hook, Redux ile entegre çalışarak yoğunluk değişikliklerini merkezi bir durum yönetimi ile senkronize eder.

Ne İşe Yarar?

useDensity:

• Tablonun yoğunluk durumunu (Compact, Standard, Comfortable) kontrol eder.
• Kullanıcının tablo yoğunluğunu değiştirmesine olanak tanır.
• Redux ile entegre çalışarak yoğunluk ayarlarını uygulama genelinde kullanılabilir hale getirir.

İş Mantığı

1. Yoğunluk Durumu Alma:
   • Redux Store'daki TableReducer üzerinden mevcut yoğunluk durumu alınır.
2. Yoğunluk Güncelleme:
   • setDensityValue fonksiyonu çağrılarak yoğunluk durumu güncellenir ve Redux Store'a kaydedilir.

Hook Tanımı

import { setDensity } from "../redux/opsTableSlice";
import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import { DensityEnums } from "../constants/DensityEnums";

export function useDensity() {
  const density = useAppSelector((state) => state.TableReducer.density);
  const dispatch = useAppDispatch();

  const setDensityValue = (density: DensityEnums) => {
    dispatch(setDensity(density));
  };

  return {
    density,
    setDensity: setDensityValue,
  };
}

Dönüş Değerleri

Değer	Tipi	Açıklama
density	DensityEnums	Mevcut tablo yoğunluğu (Compact, Standard, Comfortable).
setDensity	(density: DensityEnums) => void	Yoğunluk durumunu güncellemek için kullanılan fonksiyon.

Kullanım Örneği

Çağrı

import { useDensity } from "../hooks/useDensity";

export default function ExampleComponent() {
  const { density, setDensity } = useDensity();

  const handleDensityChange = () => {
    setDensity(DensityEnums.Compact);
  };

  return (
    <div>
      <p>Current Density: {density}</p>
      <button onClick={handleDensityChange}>Set Compact Density</button>
    </div>
  );
}

Kullanım Alanları

useDensity, Ops Table ekosisteminde aşağıdaki alanlarda kullanılır:

• Density Popover (DensityPopover.tsx):

  • Kullanım Yeri: Kullanıcının tablo yoğunluğunu değiştirebileceği arayüz.
  • Amaç: Kullanıcının seçtiği yoğunluk ayarını Redux Store üzerinden güncellemek.

• Table Reducer (opsTableSlice.ts):

  • Kullanım Yeri: Redux Store'daki yoğunluk durumunu yönetir ve diğer bileşenlerle senkronize eder.

Burada Yapılan Ana İşlemler

useDensity hook'u aşağıdaki işlemleri gerçekleştirir ve bu noktalarda özelleştirilebilir:

• Redux Entegrasyonu: Redux Store'daki yoğunluk durumunu alır ve günceller.
• Kullanıcı Etkileşimi: Kullanıcının yoğunluk seçimine göre tablo görünümünü günceller.
• Modüler Yapı: Yoğunluk durumunu uygulamanın farklı bölümlerinde kolayca kullanılabilir hale getirir.