@addev-be/ui 0.14.0 → 0.14.2

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

@@ -1,338 +1,411 @@
-/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
-/* eslint-disable @typescript-eslint/no-explicit-any */
-
-import { DEFAULT_COLUMN_WIDTH, SELECTION_CELL_WIDTH } from '../constants';
-import {
-  DataGridColumns,
-  DataGridContext,
-  DataGridContextProps,
-  DataGridFilters,
-  DataGridFooterFunction,
-  DataGridProps,
-  DataGridSort,
-} from '../types';
-import {
-  MouseEvent,
-  createContext,
-  useCallback,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import { merge, pickBy } from 'lodash';
-import { useDataGridCopy, useSortedColumns } from '.';
-
-import { applyFilter } from '../helpers';
-import { useDataGridSettings } from './useDataGridSettings';
-
-export const useDataGrid = <R,>(
-  props: DataGridProps<R>,
-  override?: Partial<DataGridContextProps<R>>
-): [DataGridContextProps<R>, DataGridContext<R>] => {
-  const {
-    rows,
-    onFiltersChanged,
-    onSortsChanged,
-    loadCopyRows,
-    onSelectionChange,
-    onSelectedRowsChanged,
-    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 ? [SELECTION_CELL_WIDTH] : []),
-        ...visibleColumns.map(
-          ([, col]) => `${col.width ?? DEFAULT_COLUMN_WIDTH}px`
-        ),
-      ].join(' '),
-    [selectable, visibleColumns]
-  );
-
-  // Update columns when settings change
-  useEffect(() => {
-    setColumns((prev) =>
-      merge(
-        {},
-        prev,
-        pickBy(settings, (_, key) => key in prev)
-      )
-    );
-  }, [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]);
-  useEffect(() => {
-    onSelectedRowsChanged?.(selectedRows);
-  }, [onSelectedRowsChanged, selectedRows]);
-
-  const toggleSelection = useCallback(
-    (key: string) => {
-      if (selectedKeys.includes(key)) {
-        setSelectedKeys(selectedKeys.filter((p) => p !== key));
-      } else {
-        setSelectedKeys([...selectedKeys, key]);
-      }
-    },
-    [selectedKeys, setSelectedKeys]
-  );
-
-  /** 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<HTMLDivElement>(null);
-
-  /** RESIZING */
-  const [resizingColumnKey, setResizingColumnKey] = useState<string | null>(
-    null
-  );
-  const resizingOffset = useRef(0);
-
-  const startResizing = useCallback(
-    (e: MouseEvent, columnKey: string) => {
-      resizingOffset.current =
-        e.screenX - (columns[columnKey]?.width || DEFAULT_COLUMN_WIDTH);
-      setResizingColumnKey(columnKey);
-    },
-    [columns]
-  );
-
-  const moveResizing = useCallback(
-    (e: MouseEvent) => {
-      if (resizingColumnKey) {
-        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
-        setColumnWidth(resizingColumnKey, newWidth);
-      }
-    },
-    [resizingColumnKey, setColumnWidth]
-  );
-
-  const endResizing = useCallback(() => {
-    setResizingColumnKey(null);
-    saveSettings();
-  }, [saveSettings]);
-
-  /** FOOTERS */
-  const [footers, setFooters] = useState<Record<string, string>>(
-    props.initialFooters ?? {}
-  );
-
-  const footerFunctions = useMemo(
-    () =>
-      Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
-        const column = columns[columnKey];
-        if (!column) {
-          return acc;
-        }
-        if (typeof column.footer === 'function') {
-          acc[columnKey] = column.footer;
-        } else if (
-          typeof column.footer === 'object' &&
-          typeof column.footer[footerKey] === 'function' &&
-          column.footer[footerKey] !== null
-        ) {
-          acc[columnKey] = column.footer[footerKey] as any;
-        }
-        return acc;
-      }, {} as Record<string, DataGridFooterFunction<R>>),
-    [columns, footers]
-  );
-
-  /** COPYING */
-
-  const { copyTable } = useDataGridCopy({
-    rows,
-    visibleColumns,
-    footerFunctions,
-    loadCopyRows,
-  });
-
-  const contextValue = useMemo<DataGridContextProps<R>>(
-    () => ({
-      ...props,
-      columns,
-      visibleColumns,
-      sortedRows,
-      selectedRows,
-      selectedKeys,
-      setSelectedKeys,
-      sorts,
-      setSorts,
-      filters,
-      setFilters,
-      editingCell,
-      setEditingCell,
-      copyTable,
-      setColumnWidth,
-      settings,
-      setSettings,
-      saveSettings,
-      scrollableRef,
-      length,
-      rowKeyGetter,
-      gridTemplateColumns,
-      footers,
-      setFooters,
-      footerFunctions,
-      toggleSelection,
-      resizingColumnKey,
-      startResizing,
-      moveResizing,
-      endResizing,
-      ...override,
-    }),
-    [
-      props,
-      columns,
-      visibleColumns,
-      sortedRows,
-      selectedRows,
-      selectedKeys,
-      sorts,
-      filters,
-      editingCell,
-      copyTable,
-      setColumnWidth,
-      settings,
-      setSettings,
-      saveSettings,
-      rowKeyGetter,
-      gridTemplateColumns,
-      footers,
-      footerFunctions,
-      toggleSelection,
-      resizingColumnKey,
-      startResizing,
-      moveResizing,
-      endResizing,
-      override,
-    ]
-  );
-
-  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: () => {},
-        length: 0,
-        gridTemplateColumns: '',
-        footers: {},
-        setFooters: () => {},
-        toggleSelection: () => {},
-        resizingColumnKey: null,
-        startResizing: () => {},
-        moveResizing: () => {},
-        endResizing: () => {},
-      }),
-    []
-  );
-
-  return useMemo(() => [contextValue, context], [context, contextValue]);
-};
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { DEFAULT_COLUMN_WIDTH, SELECTION_CELL_WIDTH } from '../constants';
+import {
+  DataGridColumns,
+  DataGridContext,
+  DataGridContextProps,
+  DataGridFilters,
+  DataGridFooterFunction,
+  DataGridProps,
+  DataGridSort,
+} from '../types';
+import {
+  MouseEvent,
+  createContext,
+  useCallback,
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+} from 'react';
+import { useDataGridCopy, useSortedColumns } from '.';
+
+import { applyFilter } from '../helpers';
+import { useDataGridChangedRows } from './useDataGridChangedRows';
+import { useDataGridSettings } from './useDataGridSettings';
+
+export const useDataGrid = <R,>(
+  props: DataGridProps<R>,
+  override?: Partial<DataGridContextProps<R>>
+): [DataGridContextProps<R>, DataGridContext<R>] => {
+  const {
+    onFiltersChanged,
+    onSortsChanged,
+    loadCopyRows,
+    onSelectionChange,
+    onSelectedRowsChanged,
+    selectable,
+    initialSorts,
+  } = props;
+  const [columns, setColumns] = useState<DataGridColumns<R>>(props.columns);
+  const visibleColumns = useSortedColumns(columns);
+
+  const [innerRows, setInnerRows] = useState<R[]>(override?.rows ?? props.rows);
+  const [rows, setRows] = [
+    override?.rows ?? innerRows,
+    override?.setRows ?? setInnerRows,
+  ];
+
+  /** 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 ? [SELECTION_CELL_WIDTH] : []),
+        ...visibleColumns.map(
+          (col) => `${col.width ?? DEFAULT_COLUMN_WIDTH}px`
+        ),
+      ].join(' '),
+    [selectable, visibleColumns]
+  );
+
+  // Update columns when settings change
+  useEffect(() => {
+    setColumns((prev) => prev.map((col) => ({ ...col, ...settings[col.key] })));
+  }, [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]);
+  useEffect(() => {
+    onSelectedRowsChanged?.(selectedRows);
+  }, [onSelectedRowsChanged, selectedRows]);
+
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
+      }
+    },
+    [selectedKeys, setSelectedKeys]
+  );
+
+  /** 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]);
+  const onRowAdded = useCallback(
+    (row: R) => {
+      setRows((prev) => [row, ...prev]);
+    },
+    [setRows]
+  );
+
+  const {
+    addedRows,
+    updatedRows,
+    editRow,
+    addRow,
+    updateRow,
+    clearChangedRows,
+  } = useDataGridChangedRows<R>(onRowAdded);
+
+  const onCellEdited = useCallback(
+    (row: R, columnKey: string, value: any) => {
+      setEditingCell([-1, -1]);
+      const column = columns.find((col) => col.key === columnKey);
+      const rowIndex = rows.findIndex(
+        (r) => rowKeyGetter(r) === rowKeyGetter(row)
+      );
+
+      // If row and column are valid
+      if (rowIndex >= 0 && column) {
+        // Update the row with the new value
+        const partialRow: Partial<R> = {};
+        partialRow[columnKey as keyof R] = value;
+        const newRow = { ...row, ...partialRow };
+        const rowKey = rowKeyGetter(newRow);
+
+        // Update the edited rows state
+        editRow(rowKey, partialRow);
+
+        // Update the rows
+        const newRows = [...rows];
+        newRows[rowIndex] = newRow;
+        setRows?.(newRows);
+
+        // Call the onRowEdited callback if provided
+        // onRowEdited?.(newRow, columnKey, value);
+      }
+    },
+    [columns, editRow, rowKeyGetter, rows, setRows]
+  );
+
+  /** 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.find((col) => col.key === 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<HTMLDivElement>(null);
+
+  /** RESIZING */
+  const [resizingColumnKey, setResizingColumnKey] = useState<string | null>(
+    null
+  );
+  const resizingColumn = useMemo(
+    () => columns.find((col) => col.key === resizingColumnKey),
+    [columns, resizingColumnKey]
+  );
+  const resizingOffset = useRef(0);
+
+  const startResizing = useCallback(
+    (e: MouseEvent, columnKey: string) => {
+      resizingOffset.current =
+        e.screenX - (resizingColumn?.width || DEFAULT_COLUMN_WIDTH);
+      setResizingColumnKey(columnKey);
+    },
+    [resizingColumn?.width]
+  );
+
+  const moveResizing = useCallback(
+    (e: MouseEvent) => {
+      if (resizingColumnKey) {
+        const newWidth = Math.max(86, e.screenX - resizingOffset.current);
+        setColumnWidth(resizingColumnKey, newWidth);
+      }
+    },
+    [resizingColumnKey, setColumnWidth]
+  );
+
+  const endResizing = useCallback(() => {
+    setResizingColumnKey(null);
+    saveSettings();
+  }, [saveSettings]);
+
+  /** FOOTERS */
+  const [footers, setFooters] = useState<Record<string, string>>(
+    props.initialFooters ?? {}
+  );
+
+  const footerFunctions = useMemo(
+    () =>
+      Object.entries(footers).reduce((acc, [columnKey, footerKey]) => {
+        const column = columns.find((col) => col.key === columnKey);
+        if (!column) {
+          return acc;
+        }
+        if (typeof column.footer === 'function') {
+          acc[columnKey] = column.footer;
+        } else if (
+          typeof column.footer === 'object' &&
+          typeof column.footer[footerKey] === 'function' &&
+          column.footer[footerKey] !== null
+        ) {
+          acc[columnKey] = column.footer[footerKey] as any;
+        }
+        return acc;
+      }, {} as Record<string, DataGridFooterFunction<R>>),
+    [columns, footers]
+  );
+
+  /** COPYING */
+
+  const { copyTable } = useDataGridCopy({
+    rows,
+    visibleColumns,
+    footerFunctions,
+    loadCopyRows,
+  });
+
+  const contextValue = useMemo<DataGridContextProps<R>>(
+    () => ({
+      ...props,
+      columns,
+      visibleColumns,
+      sortedRows,
+      selectedRows,
+      selectedKeys,
+      setSelectedKeys,
+      sorts,
+      setSorts,
+      filters,
+      setFilters,
+      editingCell,
+      setEditingCell,
+      onCellEdited,
+      copyTable,
+      setColumnWidth,
+      settings,
+      setSettings,
+      saveSettings,
+      scrollableRef,
+      length,
+      rowKeyGetter,
+      gridTemplateColumns,
+      footers,
+      setFooters,
+      footerFunctions,
+      toggleSelection,
+      resizingColumnKey,
+      startResizing,
+      moveResizing,
+      endResizing,
+
+      addedRows,
+      updatedRows,
+      editRow,
+      addRow,
+      updateRow,
+      clearChangedRows,
+
+      setRows,
+      ...override,
+    }),
+    [
+      props,
+      columns,
+      visibleColumns,
+      sortedRows,
+      selectedRows,
+      selectedKeys,
+      sorts,
+      filters,
+      editingCell,
+      onCellEdited,
+      copyTable,
+      setColumnWidth,
+      settings,
+      setSettings,
+      saveSettings,
+      rowKeyGetter,
+      gridTemplateColumns,
+      footers,
+      footerFunctions,
+      toggleSelection,
+      resizingColumnKey,
+      startResizing,
+      moveResizing,
+      endResizing,
+      addedRows,
+      updatedRows,
+      editRow,
+      addRow,
+      updateRow,
+      clearChangedRows,
+      setRows,
+      override,
+    ]
+  );
+
+  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: () => {},
+        length: 0,
+        gridTemplateColumns: '',
+        footers: {},
+        setFooters: () => {},
+        toggleSelection: () => {},
+        resizingColumnKey: null,
+        startResizing: () => {},
+        moveResizing: () => {},
+        endResizing: () => {},
+        addedRows: {},
+        updatedRows: {},
+        setRows: () => {},
+        editRow: () => {},
+        addRow: () => {},
+        updateRow: () => {},
+        clearChangedRows: () => {},
+      }),
+    []
+  );
+
+  return useMemo(() => [contextValue, context], [context, contextValue]);
+};