@addev-be/ui 0.2.16 → 0.2.18

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

@@ -0,0 +1,306 @@
+/* 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,
+  DataGridFooterFunction,
+  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>,
+  override?: Partial<DataGridContextProps<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-10)'] : []),
+        ...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]);
+
+  /** 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,
+      visibleRows,
+      scrollableRef,
+      onScroll,
+      index,
+      length,
+      rowKeyGetter,
+      gridTemplateColumns,
+      footers,
+      setFooters,
+      footerFunctions,
+      ...override,
+    }),
+    [
+      props,
+      columns,
+      visibleColumns,
+      sortedRows,
+      selectedRows,
+      selectedKeys,
+      sorts,
+      filters,
+      editingCell,
+      copyTable,
+      setColumnWidth,
+      settings,
+      setSettings,
+      saveSettings,
+      visibleRows,
+      onScroll,
+      index,
+      length,
+      rowKeyGetter,
+      gridTemplateColumns,
+      footers,
+      footerFunctions,
+      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: () => {},
+        visibleRows: [],
+        scrollableRef: { current: null },
+        onScroll: () => {},
+        index: 0,
+        length: 0,
+        gridTemplateColumns: '',
+        footers: {},
+        setFooters: () => {},
+      }),
+    []
+  );
+
+  return useMemo(() => [contextValue, context], [context, contextValue]);
+};

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

@@ -0,0 +1,175 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+
+import { DataGridColumn, DataGridContextProps } from '../types';
+
+import { useCallback } from 'react';
+
+export const useDataGridCopy = <R>({
+  rows,
+  visibleColumns = [],
+  loadCopyRows,
+  footerFunctions,
+}: Pick<
+  DataGridContextProps<R>,
+  'rows' | 'visibleColumns' | 'loadCopyRows' | 'footerFunctions'
+>) => {
+  const generateHeadersHtml = useCallback(() => {
+    return `<tr>
+            ${visibleColumns
+              .map(
+                ([, col]) =>
+                  `<th style="
+                        text-align: left;
+                        font-weight: bold;
+                        white-space: nowrap;
+                    ">
+                        ${col.name}
+                    </th>`
+              )
+              .join('\n')}
+        </tr>`;
+  }, [visibleColumns]);
+
+  const generateFootersHtml = useCallback(
+    (rowsToCopy: R[]) => {
+      console.log('generate footers html');
+      return `<tr>
+            ${visibleColumns
+              .map(
+                ([colKey]) =>
+                  `<td style="
+                      font-weight: bold;
+                      white-space: nowrap;
+                    ">
+                        ${
+                          footerFunctions?.[colKey]?.(
+                            rowsToCopy,
+                            rowsToCopy,
+                            []
+                          ) ?? ''
+                        }
+                    </td>`
+              )
+              .join('\n')}
+        </tr>`;
+    },
+    [footerFunctions, visibleColumns]
+  );
+
+  const generateCellText = useCallback((col: DataGridColumn<R>, value: any) => {
+    return col.excelValue ? col.excelValue(value) : value?.toString() ?? '';
+  }, []);
+
+  const generateCellHtml = useCallback(
+    (col: DataGridColumn<R>, value: any) => `<td style="
+        ${
+          col.excelFormatter
+            ? "mso-number-format: '" + col.excelFormatter(col) + "';"
+            : ''
+        }
+        ${
+          col.excelBackgroundColor
+            ? "background-color: '" + col.excelBackgroundColor(value) + "';"
+            : ''
+        }
+        white-space: nowrap;
+      ">
+        ${generateCellText(col, value)}
+      </td>`,
+    [generateCellText]
+  );
+
+  const generateCopyHtml = useCallback(
+    (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
+      return `
+            <table>
+                ${includeHeaders ? generateHeadersHtml() : ''}
+                ${(rowsToCopy || [])
+                  .map(
+                    (row) =>
+                      `<tr>
+                        ${visibleColumns
+                          .map(([, col]) => {
+                            const value: any =
+                              col.getter && row ? col.getter(row) : '';
+                            return generateCellHtml(col, value);
+                          })
+                          .join('\n')}
+                    </tr>`
+                  )
+                  .join('\n')}
+                  ${includeFooters ? generateFootersHtml(rowsToCopy) : ''}
+            </table>
+        `;
+    },
+    [visibleColumns, generateCellHtml, generateFootersHtml, generateHeadersHtml]
+  );
+
+  const generateHeadersText = useCallback(() => {
+    return visibleColumns.map(([, col]) => col.name).join('\t');
+  }, [visibleColumns]);
+
+  const generateFootersText = useCallback(
+    (rowsToCopy: R[]) => {
+      return visibleColumns
+        .map(
+          ([colKey]) => footerFunctions?.[colKey]?.(rowsToCopy, [], []) ?? ''
+        )
+        .join('\t');
+    },
+    [footerFunctions, visibleColumns]
+  );
+
+  const generateCopyText = useCallback(
+    (rowsToCopy: R[], includeHeaders: boolean, includeFooters: boolean) => {
+      return [
+        includeHeaders ? generateHeadersText() : '',
+        ...(rowsToCopy || []).map((row) =>
+          visibleColumns
+            .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');
+    },
+    [visibleColumns, generateFootersText, generateHeadersText]
+  );
+
+  const copyTable = useCallback(
+    async (includeHeaders = true, includeFooters = true) => {
+      const rowsToCopy = await (loadCopyRows ?? (async () => 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,48 @@
+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] || '{}';
+      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,140 @@
+import * as styles from './styles';
+
+import { DataGridContextProps, DataGridProps } from './types';
+
+import { DataGridCell } from './DataGridCell';
+import { DataGridFooter } from './DataGridFooter';
+import { DataGridHeader } from './DataGridHeader';
+import { VirtualScroller } from './VirtualScroller';
+import { useCallback } from 'react';
+import { useDataGrid } from './hooks';
+
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unnecessary-type-constraint */
+
+export const DataGrid = <R,>({
+  contextOverride,
+  ...props
+}: DataGridProps<R> & {
+  contextOverride?: Partial<DataGridContextProps<R>>;
+}) => {
+  const {
+    className,
+    // onRowDoubleClick,
+    onVisibleRowsChange,
+  } = props;
+  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
+  const {
+    selectedKeys,
+    setSelectedKeys,
+    columns,
+    visibleColumns,
+    rowHeight = 32,
+    headerRowHeight = 40,
+    scrollableRef,
+    onScroll,
+    rowKeyGetter,
+  } = contextProps;
+
+  const hasFooter = Object.values(columns).some((col) => col.footer);
+
+  const toggleSelection = useCallback(
+    (key: string) => {
+      if (selectedKeys.includes(key)) {
+        setSelectedKeys(selectedKeys.filter((p) => p !== key));
+      } else {
+        setSelectedKeys([...selectedKeys, key]);
+      }
+    },
+    [selectedKeys, setSelectedKeys]
+  );
+
+  const rowTemplate = useCallback(
+    (row: R, rowIndex: number) => {
+      if (!row) {
+        return (
+          <styles.DataGridRow key={`loading-row-${rowIndex}`}>
+            {!!props.selectable && (
+              <styles.LoadingCell className="animate-pulse">
+                <div />
+              </styles.LoadingCell>
+            )}
+            {visibleColumns.map((_, index) => (
+              <styles.LoadingCell
+                className="animate-pulse"
+                key={`loading-${rowIndex}-${index}`}
+              >
+                <div />
+              </styles.LoadingCell>
+            ))}
+          </styles.DataGridRow>
+        );
+      }
+      const key = rowKeyGetter(row);
+      const { className, style } = props.rowClassNameGetter?.(row) ?? {
+        className: '',
+        style: undefined,
+      };
+      return (
+        <styles.DataGridRow key={key}>
+          {!!props.selectable && (
+            <styles.SelectionCell
+              key="__select_checkbox__"
+              onClick={() => toggleSelection(key)}
+            >
+              <input
+                type="checkbox"
+                value={key as string}
+                checked={selectedKeys.includes(key)}
+                readOnly
+              />
+            </styles.SelectionCell>
+          )}
+          {visibleColumns.map(([key, col], index) => (
+            <DataGridCell
+              key={`loading-${rowIndex}-${index}`}
+              {...(index === 0 ? { className, style } : {})}
+              row={row}
+              rowIndex={rowIndex}
+              column={col}
+              columnIndex={index}
+              context={DataGridContext}
+              columnKey={key}
+            />
+          ))}
+        </styles.DataGridRow>
+      );
+    },
+    [
+      DataGridContext,
+      props,
+      rowKeyGetter,
+      selectedKeys,
+      toggleSelection,
+      visibleColumns,
+    ]
+  );
+
+  return (
+    <DataGridContext.Provider value={contextProps}>
+      <styles.DataGridContainer
+        ref={scrollableRef}
+        onScroll={onScroll}
+        $headerRowHeight={headerRowHeight}
+        $rowHeight={rowHeight}
+        $rowsCount={contextProps.sortedRows.length}
+        $withFooter={hasFooter}
+        className={className}
+      >
+        <DataGridHeader context={DataGridContext} />
+        <VirtualScroller
+          onRangeChange={onVisibleRowsChange}
+          hasFooter={hasFooter}
+          rowTemplate={rowTemplate}
+          context={DataGridContext}
+        />
+        {hasFooter && <DataGridFooter context={DataGridContext} />}
+      </styles.DataGridContainer>
+    </DataGridContext.Provider>
+  );
+};