useShowSelectionColumn
useShowSelectionColumn
, Ops Table bileşeninde seçim sütununun görünürlüğünü yönetmek ve güncellemek için kullanılan özel bir React hook'udur. Bu hook, Redux ile entegre çalışarak seçim sütunu görünürl üğünü merkezi bir şekilde kontrol eder.
Ne İşe Yarar?
useShowSelectionColumn:
- Tablo seçim sütununun (
showSelectionColumn
) görünürlüğünü kontrol eder. - Kullanıcının seçim sütununu açıp kapatmasına olanak tanır.
- Redux ile senkronize bir şekilde çalışarak bu durumu uygulama genelinde tutarlı hale getirir.
İş Mantığı
- Seçim Sütunu Durumu Alma:
- Redux Store'daki
TableReducer
üzerinden mevcut seçim sütunu durumu alınır.
- Redux Store'daki
- Seçim Sütunu Durumu Güncelleme:
setShowSelectionColumn
fonksiyonu çağrılarak seçim sütunu görünürlüğü değiştirilir ve Redux Store'a kaydedilir.
Hook Tanımı
import { useAppDispatch, useAppSelector } from "@/redux/hooks";
import { setShowSelectionColumn as setValue } from "../redux/opsTableSlice";
export function useShowSelectionColumn() {
const showSelectionColumn = useAppSelector(
(state) => state.TableReducer.showSelectionColumn
);
const dispatch = useAppDispatch();
const setShowSelectionColumn = (value: boolean) => {
dispatch(setValue(value));
};
return {
showSelectionColumn,
setShowSelectionColumn,
};
}
Dönüş Değerleri
Değer | Tipi | Açıklama |
---|---|---|
showSelectionColumn | boolean | Seçim sütununun mevcut görün ürlük durumu. |
setShowSelectionColumn | (value: boolean) => void | Seçim sütunu görünürlüğünü güncellemek için kullanılan fonksiyon. |
Kullanım Örneği
Çağrı
import { useShowSelectionColumn } from "../hooks/useShowSelectionColumn";
export default function ExampleComponent() {
const { showSelectionColumn, setShowSelectionColumn } =
useShowSelectionColumn();
const toggleSelectionColumn = () => {
setShowSelectionColumn(!showSelectionColumn);
};
return (
<div>
<p>Selection Column Visible: {showSelectionColumn ? "Yes" : "No"}</p>
<button onClick={toggleSelectionColumn}>Toggle Selection Column</button>
</div>
);
}
Kullanım Alanları
useShowSelectionColumn
, Ops Table ekosisteminde aşağıdaki alanlarda kullanılır:
-
Columns Popover (
ColumnsPopover.tsx
):- Kullanım Yeri: Kullanıcının seçim sütununu açıp kapatabileceği arayüz.
- Amaç: Kullanıcının seçim sütunu kontrolünü dinamik bir şekilde yapmasını sağlamak.
-
Table Reducer (
opsTableSlice.ts
):- Kullanım Yeri: Redux Store'daki seçim sütunu durumunu yönetir ve diğer bileşenlerle senkronize eder.
Burada Yapılan Ana İşlemler
useShowSelectionColumn
hook'u aşağıdaki işlemleri gerçekleştirir ve bu noktalarda özelleştirilebilir:
- Redux Entegrasyonu: Redux Store'daki seçim sütunu görünürlüğünü alır ve günceller.
- Kullanıcı Etkileşimi: Kullanıcının seçim sütununu etkinleştirme veya devre dışı bırakma işlemlerini yönetir.
- Modüler Yapı: Seçim sütunu durumunu uygulamanın farklı bölümlerinde kolayca kullanılabilir hale getirir.