@addev-be/ui 0.1.18

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

@@ -0,0 +1,225 @@
+/* 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,
+  } = 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]
+  );
+
+  // Update columns when settings change
+  useEffect(() => {
+    setColumns((prev) => merge({}, prev, settings));
+  }, [settings]);
+
+  /** ROWS SELECTION **/
+
+  const [selectedRows, setSelectedRows] = useState<R[]>([]);
+
+  /** ROWS FILTERING **/
+
+  const [filters, setFilters] = useState<DataGridFilters<R>>({});
+  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,
+      setSelectedRows,
+      sorts,
+      setSorts,
+      filters,
+      setFilters,
+      editingCell,
+      setEditingCell,
+      copyTable,
+      setColumnWidth,
+      settings,
+      setSettings,
+      saveSettings,
+      visibleRows,
+      scrollableRef,
+      onScroll,
+      index,
+      length,
+    }),
+    [
+      columns,
+      copyTable,
+      editingCell,
+      filters,
+      index,
+      length,
+      onScroll,
+      props,
+      saveSettings,
+      selectedRows,
+      setColumnWidth,
+      setSettings,
+      settings,
+      sortedRows,
+      sorts,
+      visibleColumns,
+      visibleRows,
+    ]
+  );
+
+  const context = useMemo(
+    () =>
+      createContext<DataGridContextProps<R>>({
+        rows: [],
+        columns: {},
+        visibleColumns: [],
+        rowKey: '' as keyof R,
+        sortedRows: [],
+        selectedRows: [],
+        setSelectedRows: () => {},
+        setSorts: () => {},
+        setFilters: () => {},
+        editingCell: [-1, -1],
+        setEditingCell: () => {},
+        copyTable: async () => {},
+        setColumnWidth: () => {},
+        saveSettings: () => {},
+        settings: {},
+        setSettings: () => {},
+        visibleRows: [],
+        scrollableRef: { current: null },
+        onScroll: () => {},
+        index: 0,
+        length: 0,
+      }),
+    []
+  );
+
+  return useMemo(() => [contextValue, context], [context, contextValue]);
+};

package/src/components/data/DataGrid/hooks/useDataGridCopy.ts

@@ -0,0 +1,166 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { DataGridColumn, DataGridColumns } from '../types';
+
+import { useCallback } from 'react';
+
+export const useDataGridCopy = <R>(
+  rows: R[],
+  columns: DataGridColumns<R>,
+  loadCopyRows?: () => Promise<R[]>
+) => {
+  const generateHeadersHtml = useCallback(() => {
+    return `<tr>
+            ${Object.values(columns ?? {})
+              .map(
+                (col) =>
+                  `<th style="
+                        text-align: left;
+                        font-weight: bold;
+                        white-space: nowrap;
+                    ">
+                        ${col.name}
+                    </th>`
+              )
+              .join('\n')}
+        </tr>`;
+  }, [columns]);
+
+  const generateFootersHtml = useCallback(
+    (rowsToCopy: R[]) => {
+      return `<tr>
+            ${Object.values(columns ?? {})
+              .map(
+                (col) =>
+                  `<td style="
+                      font-weight: bold;
+                      white-space: nowrap;
+                    ">
+                        ${
+                          col.footer
+                            ? col.footer(rowsToCopy, rowsToCopy, [])
+                            : ''
+                        }
+                    </td>`
+              )
+              .join('\n')}
+        </tr>`;
+    },
+    [columns]
+  );
+
+  const generateCellText = useCallback((col: DataGridColumn<R>, value: any) => {
+    return col.excelValue ? col.excelValue(value) : value?.toString() ?? '';
+  }, []);
+
+  const generateCellHtml = useCallback(
+    (col: DataGridColumn<R, any>, value: any) => `<td style="
+        ${
+          col.excelFormatter
+            ? "mso-number-format: '" + col.excelFormatter(col) + "';"
+            : ''
+        }
+        white-space: nowrap;
+      ">
+        ${generateCellText(col, value)}
+      </td>`,
+    [generateCellText]
+  );
+
+  const generateCopyHtml = useCallback(
+    (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
+      console.log('generateCopyHtml', rowsToCopy, columns);
+      return `
+            <table>
+                ${includeHeaders ? generateHeadersHtml() : ''}
+                ${(rowsToCopy || [])
+                  .map(
+                    (row) =>
+                      `<tr>
+                        ${Object.values(columns ?? {})
+                          .map((col) => {
+                            const value: any =
+                              col.getter && row ? col.getter(row) : '';
+                            return generateCellHtml(col, value);
+                          })
+                          .join('\n')}
+                    </tr>`
+                  )
+                  .join('\n')}
+                  ${includeFooters ? generateFootersHtml(rowsToCopy) : ''}
+            </table>
+        `;
+    },
+    [columns, generateCellHtml, generateFootersHtml, generateHeadersHtml]
+  );
+
+  const generateHeadersText = useCallback(() => {
+    return Object.values(columns ?? {})
+      .map((col) => col.name)
+      .join('\t');
+  }, [columns]);
+
+  const generateFootersText = useCallback(
+    (rowsToCopy: R[]) => {
+      return Object.values(columns ?? {})
+        .map((col) =>
+          col.footer ? col.footer(rowsToCopy, rowsToCopy, []) : ''
+        )
+        .join('\t');
+    },
+    [columns]
+  );
+
+  const generateCopyText = useCallback(
+    (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
+      return [
+        includeHeaders ? generateHeadersText() : '',
+        ...(rowsToCopy || []).map((row) =>
+          Object.values(columns ?? {})
+            .map((col) => {
+              const value: any = col.getter && row ? col.getter(row) : '';
+              return col.excelValue
+                ? col.excelValue(value)
+                : value != null && value !== undefined
+                ? value.toString()
+                : '';
+            })
+            .join('\t')
+        ),
+        includeFooters ? generateFootersText(rowsToCopy) : '',
+      ]
+        .filter((s) => s != null)
+        .join('\n');
+    },
+    [columns, generateFootersText, generateHeadersText]
+  );
+
+  const copyTable = useCallback(
+    async (includeHeaders = true, includeFooters = true) => {
+      const rowsToCopy = loadCopyRows ? await loadCopyRows() : rows;
+
+      const copyHtml = generateCopyHtml(
+        rowsToCopy,
+        includeHeaders,
+        includeFooters
+      );
+      const copyText = generateCopyText(
+        rowsToCopy,
+        includeHeaders,
+        includeFooters
+      );
+
+      await navigator['clipboard'].write([
+        new ClipboardItem({
+          'text/plain': new Blob([copyText], { type: 'text/plain' }),
+          'text/html': new Blob([copyHtml], { type: 'text/html' }),
+        }),
+      ]);
+    },
+    [generateCopyHtml, generateCopyText, loadCopyRows, rows]
+  );
+
+  return {
+    copyTable,
+  };
+};

package/src/components/data/DataGrid/hooks/useDataGridSettings.ts

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useState } from 'react';
+
+import { DataGridSettings } from '../types';
+import { useSettings } from '../../../../providers';
+
+export const useDataGridSettings = (name?: string) => {
+  // TODO: Implement settings context
+  const { settings, updateSettings } = useSettings();
+  const [dataGridSettings, setDataGridSettings] = useState<DataGridSettings>(
+    {}
+  );
+
+  useEffect(() => {
+    if (name) {
+      const settingName = `user.datagrid.settings.${name}`;
+      const gridSettingsJson = settings?.[settingName] || '{}';
+      console.log('read datagrid settings for', settingName, gridSettingsJson);
+      let gridSettings: DataGridSettings = {};
+      try {
+        gridSettings = JSON.parse(gridSettingsJson);
+      } catch (error) {
+        console.error('[GRID] cannot decode datagrid settings for', {
+          name,
+          gridSettingsJson,
+          error,
+        });
+      }
+      setDataGridSettings(gridSettings);
+    }
+  }, [name, settings]);
+
+  const saveSettings = useCallback(
+    (newValue?: DataGridSettings) => {
+      if (name) {
+        const settingName = `user.datagrid.settings.${name}`;
+        const newSettings = newValue ?? dataGridSettings;
+        const newSettingsJson = JSON.stringify(newSettings);
+        updateSettings({ [settingName]: newSettingsJson });
+      }
+    },
+    [dataGridSettings, name, updateSettings]
+  );
+
+  return {
+    settings: dataGridSettings,
+    setSettings: setDataGridSettings,
+    saveSettings,
+  };
+};

package/src/components/data/DataGrid/index.tsx

@@ -0,0 +1,145 @@
+import * as styles from './styles';
+
+import { useCallback, useEffect } from 'react';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridFooter } from './DataGridFooter';
+import { DataGridHeader } from './DataGridHeader';
+import { DataGridProps } from './types';
+import { VirtualScroller } from './VirtualScroller';
+import { useDataGrid } from './hooks';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+export const DataGrid = <R,>(props: DataGridProps<R>) => {
+  const {
+    className,
+    // onRowDoubleClick,
+    onSelectionChange,
+    onVisibleRowsChange,
+    rowKey,
+  } = props;
+  const [contextProps, DataGridContext] = useDataGrid(props);
+  const {
+    selectedRows,
+    setSelectedRows,
+    columns,
+    visibleColumns,
+    rowHeight = 32,
+    headerRowHeight = 40,
+    scrollableRef,
+    onScroll,
+  } = contextProps;
+
+  const hasFooter = Object.values(columns).some((col) => col.footer);
+
+  const setRowSelection = useCallback(
+    (row: R, selected: boolean) => {
+      if (selected) {
+        if (!selectedRows.includes(row))
+          setSelectedRows([...selectedRows, row]);
+      } else {
+        setSelectedRows(selectedRows.filter((p) => p !== row));
+      }
+    },
+    [selectedRows, setSelectedRows]
+  );
+
+  useEffect(() => {
+    onSelectionChange?.(selectedRows);
+  }, [onSelectionChange, selectedRows]);
+
+  const rowTemplate = useCallback(
+    (row: R, rowIndex: number) => {
+      const { className, style } = props.rowClassNameGetter?.(row) ?? {
+        className: '',
+        style: undefined,
+      };
+      if (!row) {
+        return (
+          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+            {!!props.selectable && (
+              <styles.LoadingCell className="animate-pulse">
+                <div
+                // className="bg-gray-200 rounded-full dark:bg-gray-700 w-full h-full"
+                />
+              </styles.LoadingCell>
+            )}
+            {visibleColumns.map((_, index) => (
+              <styles.LoadingCell
+                className="animate-pulse"
+                key={`loading-${rowIndex}-${index}`}
+              >
+                <div
+                //  className="bg-gray-200 rounded-full dark:bg-gray-700 w-full h-full"
+                />
+              </styles.LoadingCell>
+            ))}
+          </styles.DataGridRow>
+        );
+      }
+      const key = String(
+        typeof rowKey === 'function' ? rowKey(row) : row[rowKey]
+      );
+      return (
+        <styles.DataGridRow key={key}>
+          {!!props.selectable && (
+            <styles.SelectionCell key="__select_checkbox__">
+              <input
+                type="checkbox"
+                // className="h-4 w-4 rounded border-gray-300 text-green-600 focus:ring-green-600"
+                value={key as string}
+                checked={selectedRows.includes(row)}
+                onChange={(e) => setRowSelection(row, e.target.checked)}
+              />
+            </styles.SelectionCell>
+          )}
+          {visibleColumns.map(([key, col], index) => (
+            <DataGridCell
+              key={`loading-${rowIndex}-${index}`}
+              className={className}
+              style={style}
+              row={row}
+              rowIndex={rowIndex}
+              column={col}
+              columnIndex={index}
+              context={DataGridContext}
+              columnKey={key}
+            />
+          ))}
+        </styles.DataGridRow>
+      );
+    },
+    [
+      DataGridContext,
+      props,
+      rowKey,
+      selectedRows,
+      setRowSelection,
+      visibleColumns,
+    ]
+  );
+
+  return (
+    <DataGridContext.Provider value={contextProps}>
+      <styles.DataGridContainer
+        ref={scrollableRef}
+        onScroll={onScroll}
+        $headerRowHeight={headerRowHeight}
+        $rowHeight={rowHeight}
+        $rowsCount={contextProps.sortedRows.length}
+        className={className}
+      >
+        <DataGridHeader context={DataGridContext} />
+        <VirtualScroller
+          onRangeChange={onVisibleRowsChange}
+          hasFooter={hasFooter}
+          rowTemplate={rowTemplate}
+          context={DataGridContext}
+        />
+        {hasFooter && <DataGridFooter context={DataGridContext} />}
+      </styles.DataGridContainer>
+    </DataGridContext.Provider>
+  );
+};