@addev-be/ui 0.12.1 → 0.12.2

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

@@ -1,175 +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,
-  };
-};
+/* 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

@@ -1,48 +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,
-  };
-};
+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

@@ -1,110 +1,110 @@
-import * as styles from './styles';
-
-import {
-  Context,
-  ForwardedRef,
-  forwardRef,
-  useImperativeHandle,
-  useMemo,
-  useRef,
-} from 'react';
-import {
-  DEFAULT_COLUMN_WIDTH,
-  DEFAULT_ROW_HEIGHT,
-  SELECTION_CELL_WIDTH,
-} from './constants';
-import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
-
-import { DataGridFooter } from './DataGridFooter';
-import { DataGridHeader } from './DataGridHeader';
-import { DataGridRowTemplate } from './DataGridRowTemplate';
-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 DataGridInner = <R,>(
-  {
-    contextOverride,
-    ...props
-  }: DataGridProps<R> & {
-    contextOverride?: Partial<DataGridContextProps<R>>;
-  },
-  ref: ForwardedRef<DataGridRefProps>
-) => {
-  const scrollableRef = useRef<HTMLDivElement>(null);
-  const { className } = props;
-  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
-  const {
-    columns,
-    selectable,
-    rowHeight = 32,
-    headerRowHeight = 40,
-    gridTemplateColumns,
-    sortedRows,
-    onVisibleRowsChange,
-    refresh,
-    setSelectedKeys,
-    fixedColumnsCount,
-    resizingColumnKey,
-    moveResizing,
-    endResizing,
-  } = contextProps;
-
-  useImperativeHandle(
-    ref,
-    () => ({
-      refresh: refresh ?? (() => {}),
-      setSelectedKeys,
-    }),
-    [refresh, setSelectedKeys]
-  );
-
-  const hasFooter = Object.values(columns).some((col) => col.footer);
-  const fixedColumnWidths = useMemo(
-    () => [
-      ...(selectable ? [SELECTION_CELL_WIDTH] : []),
-      ...Object.values(columns)
-        .slice(0, fixedColumnsCount ?? 0)
-        .map((col) => col.width ?? DEFAULT_COLUMN_WIDTH),
-    ],
-    [columns, fixedColumnsCount, selectable]
-  );
-
-  const rowTemplate = DataGridRowTemplate;
-
-  return (
-    <DataGridContext.Provider value={contextProps}>
-      <styles.DataGridContainer
-        ref={scrollableRef}
-        $headerRowHeight={headerRowHeight}
-        $rowHeight={rowHeight}
-        $rowsCount={contextProps.sortedRows.length}
-        $withFooter={hasFooter}
-        className={className}
-        $fixedColumnWidths={fixedColumnWidths}
-      >
-        {resizingColumnKey && (
-          <styles.ResizeBackdrop
-            onMouseMove={moveResizing}
-            onMouseUp={endResizing}
-          />
-        )}
-        <DataGridHeader context={DataGridContext} />
-        <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
-          integrated
-          gridTemplateColumns={gridTemplateColumns}
-          items={sortedRows}
-          itemTemplate={rowTemplate}
-          itemProps={{ context: DataGridContext }}
-          rowHeightInPx={DEFAULT_ROW_HEIGHT}
-          onRangeChanged={onVisibleRowsChange}
-        />
-        {hasFooter && <DataGridFooter context={DataGridContext} />}
-      </styles.DataGridContainer>
-    </DataGridContext.Provider>
-  );
-};
-
-export const DataGrid = forwardRef(DataGridInner);
+import * as styles from './styles';
+
+import {
+  Context,
+  ForwardedRef,
+  forwardRef,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+} from 'react';
+import {
+  DEFAULT_COLUMN_WIDTH,
+  DEFAULT_ROW_HEIGHT,
+  SELECTION_CELL_WIDTH,
+} from './constants';
+import { DataGridContextProps, DataGridProps, DataGridRefProps } from './types';
+
+import { DataGridFooter } from './DataGridFooter';
+import { DataGridHeader } from './DataGridHeader';
+import { DataGridRowTemplate } from './DataGridRowTemplate';
+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 DataGridInner = <R,>(
+  {
+    contextOverride,
+    ...props
+  }: DataGridProps<R> & {
+    contextOverride?: Partial<DataGridContextProps<R>>;
+  },
+  ref: ForwardedRef<DataGridRefProps>
+) => {
+  const scrollableRef = useRef<HTMLDivElement>(null);
+  const { className } = props;
+  const [contextProps, DataGridContext] = useDataGrid(props, contextOverride);
+  const {
+    columns,
+    selectable,
+    rowHeight = 32,
+    headerRowHeight = 40,
+    gridTemplateColumns,
+    sortedRows,
+    onVisibleRowsChange,
+    refresh,
+    setSelectedKeys,
+    fixedColumnsCount,
+    resizingColumnKey,
+    moveResizing,
+    endResizing,
+  } = contextProps;
+
+  useImperativeHandle(
+    ref,
+    () => ({
+      refresh: refresh ?? (() => {}),
+      setSelectedKeys,
+    }),
+    [refresh, setSelectedKeys]
+  );
+
+  const hasFooter = Object.values(columns).some((col) => col.footer);
+  const fixedColumnWidths = useMemo(
+    () => [
+      ...(selectable ? [SELECTION_CELL_WIDTH] : []),
+      ...Object.values(columns)
+        .slice(0, fixedColumnsCount ?? 0)
+        .map((col) => col.width ?? DEFAULT_COLUMN_WIDTH),
+    ],
+    [columns, fixedColumnsCount, selectable]
+  );
+
+  const rowTemplate = DataGridRowTemplate;
+
+  return (
+    <DataGridContext.Provider value={contextProps}>
+      <styles.DataGridContainer
+        ref={scrollableRef}
+        $headerRowHeight={headerRowHeight}
+        $rowHeight={rowHeight}
+        $rowsCount={contextProps.sortedRows.length}
+        $withFooter={hasFooter}
+        className={className}
+        $fixedColumnWidths={fixedColumnWidths}
+      >
+        {resizingColumnKey && (
+          <styles.ResizeBackdrop
+            onMouseMove={moveResizing}
+            onMouseUp={endResizing}
+          />
+        )}
+        <DataGridHeader context={DataGridContext} />
+        <VirtualScroller<R, { context: Context<DataGridContextProps<R>> }>
+          integrated
+          gridTemplateColumns={gridTemplateColumns}
+          items={sortedRows}
+          itemTemplate={rowTemplate}
+          itemProps={{ context: DataGridContext }}
+          rowHeightInPx={DEFAULT_ROW_HEIGHT}
+          onRangeChanged={onVisibleRowsChange}
+        />
+        {hasFooter && <DataGridFooter context={DataGridContext} />}
+      </styles.DataGridContainer>
+    </DataGridContext.Provider>
+  );
+};
+
+export const DataGrid = forwardRef(DataGridInner);