@addev-be/ui 0.2.2 → 0.2.6

package/src/components/data/DataGrid/hooks/useDataGrid.tsx

@@ -1,261 +1,264 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { DEFAULT_ROW_HEIGHT, VIRTUAL_SCROLL_TOLERANCE } from '../styles';
-import {
-  DataGridColumns,
-  DataGridContext,
-  DataGridContextProps,
-  DataGridFilters,
-  DataGridProps,
-  DataGridSort,
-} from '../types';
-import {
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { useDataGridCopy, useSortedColumns } from '.';
-
-import { applyFilter } from '../helpers';
-import { merge } from 'lodash';
-import { useDataGridSettings } from './useDataGridSettings';
-import { useElementSize } from '../../../../hooks';
-
-export const useDataGrid = <R,>(
-  props: DataGridProps<R>
-): [DataGridContextProps<R>, DataGridContext<R>] => {
-  const {
-    rows,
-    onFiltersChanged,
-    onSortsChanged,
-    loadCopyRows,
-    rowHeight = DEFAULT_ROW_HEIGHT,
-    onVisibleRowsChange,
-    onSelectionChange,
-    selectable,
-  } = props;
-  const [columns, setColumns] = useState<DataGridColumns<R>>(props.columns);
-
-  const visibleColumns = useSortedColumns(columns);
-
-  /** SETTINGS */
-
-  const { settings, setSettings, saveSettings } = useDataGridSettings(
-    props.name
-  );
-
-  const setColumnWidth = useCallback(
-    (key: string, width: number) => {
-      setSettings((prev) => ({ ...prev, [key]: { ...prev[key], width } }));
-    },
-    [setSettings]
-  );
-
-  const gridTemplateColumns = useMemo(
-    () =>
-      [
-        ...(selectable ? ['var(--space-8)'] : []),
-        ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
-      ].join(' '),
-    [selectable, visibleColumns]
-  );
-
-  // Update columns when settings change
-  useEffect(() => {
-    setColumns((prev) => merge({}, prev, settings));
-  }, [settings]);
-
-  /** ROWS SELECTION **/
-
-  const rowKeyGetter = useMemo(
-    () =>
-      typeof props.rowKey === 'function'
-        ? props.rowKey
-        : (row: R) => String(row?.[props.rowKey as keyof R]),
-    [props.rowKey]
-  );
-  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
-
-  const selectedRows = useMemo(
-    () => props.rows.filter((row) => selectedKeys.includes(rowKeyGetter(row))),
-    [props.rows, rowKeyGetter, selectedKeys]
-  );
-
-  useEffect(() => {
-    onSelectionChange?.(selectedKeys);
-  }, [onSelectionChange, selectedKeys]);
-
-  /** ROWS FILTERING **/
-
-  const [filters, setFilters] = useState<DataGridFilters>({});
-  const [filteredRows, setFilteredRows] = useState<R[]>(rows ?? []);
-
-  useEffect(() => {
-    onFiltersChanged?.(filters);
-  }, [filters, onFiltersChanged]);
-
-  useEffect(() => {
-    const filteredRows =
-      props.filter === false
-        ? rows
-        : Object.entries(filters).reduce(
-            (tempRows, [, filter]) =>
-              applyFilter(tempRows, filter as any /* TODO : fix typings */),
-            rows
-          );
-    setFilteredRows(filteredRows ?? []);
-  }, [filters, props.filter, rows]);
-
-  /** CELL EDITING */
-
-  const [editingCell, setEditingCell] = useState<[number, number]>([-1, -1]);
-
-  /** ROWS SORTING **/
-
-  const [sorts, setSorts] = useState<Record<string, DataGridSort>>({});
-  const [sortedRows, setSortedRows] = useState<R[]>(rows);
-
-  useEffect(() => {
-    const sortedRows = [...filteredRows];
-    if (props.sort !== false) {
-      Object.entries(sorts).forEach(([sortKey, sort]) => {
-        // Get the sort column and make sure it exists and is sortable
-        const sortColumn = columns[sortKey];
-        if (!sortColumn || typeof sortColumn.sortGetter !== 'function') return;
-
-        // Sort the rows using the sortGetter function of the column
-        const sortDirection = sort === 'asc' ? 1 : -1;
-        sortedRows.sort((a: R, b: R) => {
-          const aValue = sortColumn.sortGetter!(a);
-          const bValue = sortColumn.sortGetter!(b);
-          if (aValue === bValue) return 0;
-          return aValue > bValue ? sortDirection : -sortDirection;
-        });
-      });
-    }
-    setSortedRows(sortedRows);
-  }, [columns, filteredRows, sorts, onSortsChanged, props.sort]);
-
-  useEffect(() => {
-    onSortsChanged?.(sorts);
-  }, [sorts, onSortsChanged]);
-
-  /** VIRTUAL SCROLLING */
-
-  const scrollableRef = useRef<HTMLTableSectionElement | null>(null);
-  const { height } = useElementSize(scrollableRef.current);
-
-  const [scrollTop, setScrollTop] = useState(0);
-  const [index, length] =
-    // props.showAllRows ? [0, sortedRows.length] :
-    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)];
-
-  const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
-    const target = e.target as HTMLDivElement;
-    setScrollTop(target.scrollTop);
-  }, []);
-
-  const indexWithTolerance = Math.max(0, index - VIRTUAL_SCROLL_TOLERANCE);
-  const lengthWithTolerance = length + 2 * VIRTUAL_SCROLL_TOLERANCE;
-  const visibleRows = sortedRows.slice(
-    indexWithTolerance,
-    indexWithTolerance + lengthWithTolerance
-  );
-
-  useEffect(() => {
-    onVisibleRowsChange?.(indexWithTolerance, lengthWithTolerance);
-  }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
-
-  /** COPYING */
-
-  const { copyTable } = useDataGridCopy(sortedRows, columns, loadCopyRows);
-
-  const contextValue = useMemo<DataGridContextProps<R>>(
-    () => ({
-      ...props,
-      columns,
-      visibleColumns,
-      sortedRows,
-      selectedRows,
-      selectedKeys,
-      setSelectedKeys,
-      sorts,
-      setSorts,
-      filters,
-      setFilters,
-      editingCell,
-      setEditingCell,
-      copyTable,
-      setColumnWidth,
-      settings,
-      setSettings,
-      saveSettings,
-      visibleRows,
-      scrollableRef,
-      onScroll,
-      index,
-      length,
-      rowKeyGetter,
-      gridTemplateColumns,
-    }),
-    [
-      columns,
-      copyTable,
-      editingCell,
-      filters,
-      index,
-      length,
-      onScroll,
-      props,
-      rowKeyGetter,
-      saveSettings,
-      selectedKeys,
-      selectedRows,
-      setColumnWidth,
-      setSettings,
-      settings,
-      sortedRows,
-      sorts,
-      visibleColumns,
-      visibleRows,
-      gridTemplateColumns,
-    ]
-  );
-
-  const context = useMemo(
-    () =>
-      createContext<DataGridContextProps<R>>({
-        rows: [],
-        columns: {},
-        visibleColumns: [],
-        rowKey: '' as keyof R,
-        rowKeyGetter: () => '',
-        sortedRows: [],
-        selectedRows: [],
-        selectedKeys: [],
-        setSelectedKeys: () => {},
-        setSorts: () => {},
-        setFilters: () => {},
-        editingCell: [-1, -1],
-        setEditingCell: () => {},
-        copyTable: async () => {},
-        setColumnWidth: () => {},
-        saveSettings: () => {},
-        settings: {},
-        setSettings: () => {},
-        visibleRows: [],
-        scrollableRef: { current: null },
-        onScroll: () => {},
-        index: 0,
-        length: 0,
-        gridTemplateColumns: '',
-      }),
-    []
-  );
-
-  return useMemo(() => [contextValue, context], [context, contextValue]);
-};
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { DEFAULT_ROW_HEIGHT, VIRTUAL_SCROLL_TOLERANCE } from '../styles';
+import {
+  DataGridColumns,
+  DataGridContext,
+  DataGridContextProps,
+  DataGridFilters,
+  DataGridProps,
+  DataGridSort,
+} from '../types';
+import {
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useDataGridCopy, useSortedColumns } from '.';
+
+import { applyFilter } from '../helpers';
+import { merge } from 'lodash';
+import { useDataGridSettings } from './useDataGridSettings';
+import { useElementSize } from '../../../../hooks';
+
+export const useDataGrid = <R,>(
+  props: DataGridProps<R>
+): [DataGridContextProps<R>, DataGridContext<R>] => {
+  const {
+    rows,
+    onFiltersChanged,
+    onSortsChanged,
+    loadCopyRows,
+    rowHeight = DEFAULT_ROW_HEIGHT,
+    onVisibleRowsChange,
+    onSelectionChange,
+    selectable,
+    initialSorts,
+  } = props;
+  const [columns, setColumns] = useState<DataGridColumns<R>>(props.columns);
+
+  const visibleColumns = useSortedColumns(columns);
+
+  /** SETTINGS */
+
+  const { settings, setSettings, saveSettings } = useDataGridSettings(
+    props.name
+  );
+
+  const setColumnWidth = useCallback(
+    (key: string, width: number) => {
+      setSettings((prev) => ({ ...prev, [key]: { ...prev[key], width } }));
+    },
+    [setSettings]
+  );
+
+  const gridTemplateColumns = useMemo(
+    () =>
+      [
+        ...(selectable ? ['var(--space-8)'] : []),
+        ...visibleColumns.map(([, col]) => `${col.width ?? 150}px`),
+      ].join(' '),
+    [selectable, visibleColumns]
+  );
+
+  // Update columns when settings change
+  useEffect(() => {
+    setColumns((prev) => merge({}, prev, settings));
+  }, [settings]);
+
+  /** ROWS SELECTION **/
+
+  const rowKeyGetter = useMemo(
+    () =>
+      typeof props.rowKey === 'function'
+        ? props.rowKey
+        : (row: R) => String(row?.[props.rowKey as keyof R]),
+    [props.rowKey]
+  );
+  const [selectedKeys, setSelectedKeys] = useState<string[]>([]);
+
+  const selectedRows = useMemo(
+    () => props.rows.filter((row) => selectedKeys.includes(rowKeyGetter(row))),
+    [props.rows, rowKeyGetter, selectedKeys]
+  );
+
+  useEffect(() => {
+    onSelectionChange?.(selectedKeys);
+  }, [onSelectionChange, selectedKeys]);
+
+  /** ROWS FILTERING **/
+
+  const [filters, setFilters] = useState<DataGridFilters>({});
+  const [filteredRows, setFilteredRows] = useState<R[]>(rows ?? []);
+
+  useEffect(() => {
+    onFiltersChanged?.(filters);
+  }, [filters, onFiltersChanged]);
+
+  useEffect(() => {
+    const filteredRows =
+      props.filter === false
+        ? rows
+        : Object.entries(filters).reduce(
+            (tempRows, [, filter]) =>
+              applyFilter(tempRows, filter as any /* TODO : fix typings */),
+            rows
+          );
+    setFilteredRows(filteredRows ?? []);
+  }, [filters, props.filter, rows]);
+
+  /** CELL EDITING */
+
+  const [editingCell, setEditingCell] = useState<[number, number]>([-1, -1]);
+
+  /** ROWS SORTING **/
+
+  const [sorts, setSorts] = useState<Record<string, DataGridSort>>(
+    initialSorts ?? {}
+  );
+  const [sortedRows, setSortedRows] = useState<R[]>(rows);
+
+  useEffect(() => {
+    const sortedRows = [...filteredRows];
+    if (props.sort !== false) {
+      Object.entries(sorts).forEach(([sortKey, sort]) => {
+        // Get the sort column and make sure it exists and is sortable
+        const sortColumn = columns[sortKey];
+        if (!sortColumn || typeof sortColumn.sortGetter !== 'function') return;
+
+        // Sort the rows using the sortGetter function of the column
+        const sortDirection = sort === 'asc' ? 1 : -1;
+        sortedRows.sort((a: R, b: R) => {
+          const aValue = sortColumn.sortGetter!(a);
+          const bValue = sortColumn.sortGetter!(b);
+          if (aValue === bValue) return 0;
+          return aValue > bValue ? sortDirection : -sortDirection;
+        });
+      });
+    }
+    setSortedRows(sortedRows);
+  }, [columns, filteredRows, sorts, onSortsChanged, props.sort]);
+
+  useEffect(() => {
+    onSortsChanged?.(sorts);
+  }, [sorts, onSortsChanged]);
+
+  /** VIRTUAL SCROLLING */
+
+  const scrollableRef = useRef<HTMLTableSectionElement | null>(null);
+  const { height } = useElementSize(scrollableRef.current);
+
+  const [scrollTop, setScrollTop] = useState(0);
+  const [index, length] =
+    // props.showAllRows ? [0, sortedRows.length] :
+    [Math.floor(scrollTop / rowHeight), Math.ceil(height / rowHeight)];
+
+  const onScroll = useCallback((e: React.UIEvent<HTMLDivElement>) => {
+    const target = e.target as HTMLDivElement;
+    setScrollTop(target.scrollTop);
+  }, []);
+
+  const indexWithTolerance = Math.max(0, index - VIRTUAL_SCROLL_TOLERANCE);
+  const lengthWithTolerance = length + 2 * VIRTUAL_SCROLL_TOLERANCE;
+  const visibleRows = sortedRows.slice(
+    indexWithTolerance,
+    indexWithTolerance + lengthWithTolerance
+  );
+
+  useEffect(() => {
+    onVisibleRowsChange?.(indexWithTolerance, lengthWithTolerance);
+  }, [indexWithTolerance, lengthWithTolerance, onVisibleRowsChange]);
+
+  /** COPYING */
+
+  const { copyTable } = useDataGridCopy(sortedRows, columns, loadCopyRows);
+
+  const contextValue = useMemo<DataGridContextProps<R>>(
+    () => ({
+      ...props,
+      columns,
+      visibleColumns,
+      sortedRows,
+      selectedRows,
+      selectedKeys,
+      setSelectedKeys,
+      sorts,
+      setSorts,
+      filters,
+      setFilters,
+      editingCell,
+      setEditingCell,
+      copyTable,
+      setColumnWidth,
+      settings,
+      setSettings,
+      saveSettings,
+      visibleRows,
+      scrollableRef,
+      onScroll,
+      index,
+      length,
+      rowKeyGetter,
+      gridTemplateColumns,
+    }),
+    [
+      columns,
+      copyTable,
+      editingCell,
+      filters,
+      index,
+      length,
+      onScroll,
+      props,
+      rowKeyGetter,
+      saveSettings,
+      selectedKeys,
+      selectedRows,
+      setColumnWidth,
+      setSettings,
+      settings,
+      sortedRows,
+      sorts,
+      visibleColumns,
+      visibleRows,
+      gridTemplateColumns,
+    ]
+  );
+
+  const context = useMemo(
+    () =>
+      createContext<DataGridContextProps<R>>({
+        rows: [],
+        columns: {},
+        visibleColumns: [],
+        rowKey: '' as keyof R,
+        rowKeyGetter: () => '',
+        sortedRows: [],
+        selectedRows: [],
+        selectedKeys: [],
+        setSelectedKeys: () => {},
+        setSorts: () => {},
+        setFilters: () => {},
+        editingCell: [-1, -1],
+        setEditingCell: () => {},
+        copyTable: async () => {},
+        setColumnWidth: () => {},
+        saveSettings: () => {},
+        settings: {},
+        setSettings: () => {},
+        visibleRows: [],
+        scrollableRef: { current: null },
+        onScroll: () => {},
+        index: 0,
+        length: 0,
+        gridTemplateColumns: '',
+      }),
+    []
+  );
+
+  return useMemo(() => [contextValue, context], [context, contextValue]);
+};