Skip to main content
Version: 1.0.1

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ığı

  1. Seçim Sütunu Durumu Alma:
    • Redux Store'daki TableReducer üzerinden mevcut seçim sütunu durumu alınır.
  2. 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ğerTipiAçıklama
showSelectionColumnbooleanSeçim sütununun mevcut görünürlük durumu.
setShowSelectionColumn(value: boolean) => voidSeç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.