@snack-uikit/table 0.20.12 → 0.21.0

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 0.21.0 (2024-08-19)
+
+
+### Features
+
+* **PDS-516:** add saving resize mode ([e3c0137](https://github.com/cloud-ru-tech/snack-uikit/commit/e3c0137c6ff88bb4ea262f8509add7707ba65431))
+
+
+
+
+
+## 0.20.13 (2024-08-15)
+
+### Only dependencies have been changed
+* [@snack-uikit/pagination@0.7.0](https://github.com/cloud-ru-tech/snack-uikit/blob/master/packages/pagination/CHANGELOG.md)
+
+
+
+
+
 ## 0.20.12 (2024-08-14)
 
 ### Only dependencies have been changed

package/README.md

@@ -147,6 +147,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | {     top: [],   } | Определение какие строки должны быть закреплены в таблице |
+| savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 ## Table.getStatusColumnDef
 Вспомогательная функция для создания ячейки со статусом
 ### Props
@@ -206,6 +207,7 @@ const columnDefinitions: ColumnDefinition<TableData>[] = [
 | scrollRef | `RefObject<HTMLElement>` | - | Ссылка на элемент, обозначающий самый конец прокручиваемого списка |
 | scrollContainerRef | `RefObject<HTMLElement>` | - | Ссылка на контейнер, который скроллится |
 | rowPinning | `Pick<RowPinningState, "top">` | - | Определение какие строки должны быть закреплены в таблице |
+| savedState | `{ id: string; resize?: boolean; }` | - | Конфиг для сохранения состояния в localStorage. <br> Поле id должно быть уникальным для разных таблиц в рамках приложения. <br> Для корректной работы необходимо наличие id в конфиге columnDefinitions |
 | items | `TData[]` | - | Данные для отрисовки |
 | total | `number` | 10 | Общее кол-во строк |
 | limit | `number` | 10 | Кол-во строк на страницу |

package/dist/components/Table/Table.d.ts

@@ -1,6 +1,6 @@
 import { TableProps } from '../types';
 /** Компонент таблицы */
-export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
+export declare function Table<TData extends object>({ data, rowPinning, columnDefinitions, keepPinnedRows, copyPinnedRows, enableSelectPinned, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize, pageCount, loading, outline, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar, toolbarBefore, toolbarAfter, suppressPagination, manualSorting, manualPagination, manualFiltering, autoResetPageIndex, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState, ...rest }: TableProps<TData>): import("react/jsx-runtime").JSX.Element;
 export declare namespace Table {
     var getStatusColumnDef: typeof import("../../helperComponents").getStatusColumnDef;
     var statusAppearances: Record<string, string>;

package/dist/components/Table/Table.js

@@ -25,12 +25,12 @@ import { fuzzyFilter } from '../../utils';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import styles from './styles.module.css';
-import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
+import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth, getInitColumnSizeFromLocalStorage, saveStateToLocalStorage, } from './utils';
 /** Компонент таблицы */
 export function Table(_a) {
     var { data, rowPinning = {
         top: [],
-    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch"]);
+    }, columnDefinitions, keepPinnedRows = false, copyPinnedRows = false, enableSelectPinned = false, rowSelection: rowSelectionProp, search, sorting: sortingProp, columnFilters, pagination: paginationProp, className, onRowClick, onRefresh, onDelete, pageSize = DEFAULT_PAGE_SIZE, pageCount, loading = false, outline = false, moreActions, exportSettings, dataFiltered, dataError, noDataState, noResultsState, errorDataState, suppressToolbar = false, toolbarBefore, toolbarAfter, suppressPagination = false, manualSorting = false, manualPagination = false, manualFiltering = false, autoResetPageIndex = false, scrollRef, scrollContainerRef, getRowId, enableFuzzySearch, savedState } = _a, rest = __rest(_a, ["data", "rowPinning", "columnDefinitions", "keepPinnedRows", "copyPinnedRows", "enableSelectPinned", "rowSelection", "search", "sorting", "columnFilters", "pagination", "className", "onRowClick", "onRefresh", "onDelete", "pageSize", "pageCount", "loading", "outline", "moreActions", "exportSettings", "dataFiltered", "dataError", "noDataState", "noResultsState", "errorDataState", "suppressToolbar", "toolbarBefore", "toolbarAfter", "suppressPagination", "manualSorting", "manualPagination", "manualFiltering", "autoResetPageIndex", "scrollRef", "scrollContainerRef", "getRowId", "enableFuzzySearch", "savedState"]);
     const { state: globalFilter, onStateChange: onGlobalFilterChange } = useStateControl(search, '');
     const { state: rowSelection, onStateChange: onRowSelectionChange } = useStateControl(rowSelectionProp, {});
     const defaultPaginationState = useMemo(() => ({
@@ -150,8 +150,15 @@ export function Table(_a) {
             }
             else {
                 const originalColumnDefSize = originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.size;
-                const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+                let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
                 const prevSize = (_a = columnSizeVarsRef.current) === null || _a === void 0 ? void 0 : _a[sizeKey];
+                const isResizeSavedToStore = (originalColDef === null || originalColDef === void 0 ? void 0 : originalColDef.enableResizing) && (savedState === null || savedState === void 0 ? void 0 : savedState.id) && (savedState === null || savedState === void 0 ? void 0 : savedState.resize) !== false;
+                if (isResizeSavedToStore) {
+                    const savedSize = getInitColumnSizeFromLocalStorage({ id: savedState.id, columnId: header.id });
+                    if (savedSize) {
+                        initSize = savedSize;
+                    }
+                }
                 let size = initSize;
                 if (header.column.getCanResize()) {
                     const currentSize = header.getSize();
@@ -163,6 +170,9 @@ export function Table(_a) {
                         size = `${realSize}px`;
                     }
                 }
+                if (isResizeSavedToStore) {
+                    saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
+                }
                 colSizes[sizeKey] = size;
                 colSizes[flexKey] = size === '100%' ? 'unset' : '0';
             }

package/dist/components/Table/utils.d.ts

@@ -3,3 +3,15 @@ export declare function getColumnStyleVars(id: string): {
     sizeKey: string;
     flexKey: string;
 };
+type GetSavedStateFromLocalStorageProps = {
+    id: string;
+    columnId: string;
+};
+export declare function getInitColumnSizeFromLocalStorage({ id, columnId }: GetSavedStateFromLocalStorageProps): string | undefined;
+type SaveStateToLocalStorageProps = {
+    id: string;
+    columnId: string;
+    size: string;
+};
+export declare function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps): void;
+export {};

package/dist/components/Table/utils.js

@@ -14,3 +14,18 @@ export function getColumnStyleVars(id) {
         flexKey: `--table-column-${id}-flex`,
     };
 }
+const RESIZED_KEY = 'RESIZED_COLUMN_KEY';
+export function getInitColumnSizeFromLocalStorage({ id, columnId }) {
+    var _a;
+    const savedStateFromStorage = JSON.parse(localStorage.getItem(id || '') || 'null');
+    if (savedStateFromStorage) {
+        const currentSize = (_a = savedStateFromStorage.resizeState) === null || _a === void 0 ? void 0 : _a[`${RESIZED_KEY}-${columnId}`];
+        return currentSize;
+    }
+}
+export function saveStateToLocalStorage({ id, columnId, size }) {
+    const savedStateFromStorage = JSON.parse(localStorage.getItem(id) || 'null');
+    const newResizeState = (savedStateFromStorage === null || savedStateFromStorage === void 0 ? void 0 : savedStateFromStorage.resizeState) || {};
+    newResizeState[`${RESIZED_KEY}-${columnId}`] = size;
+    localStorage.setItem(id, JSON.stringify(Object.assign(Object.assign({}, (savedStateFromStorage || {})), { resizeState: newResizeState })));
+}

package/dist/components/types.d.ts

@@ -121,6 +121,14 @@ export type TableProps<TData extends object> = WithSupportProps<{
     scrollContainerRef?: RefObject<HTMLElement>;
     /** Определение какие строки должны быть закреплены в таблице */
     rowPinning?: Pick<RowPinningState, 'top'>;
+    /** Конфиг для сохранения состояния в localStorage. <br>
+     *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
+     *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
+     *  */
+    savedState?: {
+        id: string;
+        resize?: boolean;
+    };
 }>;
 export type ServerTableProps<TData extends object> = Omit<TableProps<TData>, 'pageSize' | 'pageCount' | 'pagination' | 'search' | 'data'> & {
     /** Данные для отрисовки */

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.20.12",
+  "version": "0.21.0",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -38,7 +38,7 @@
     "@snack-uikit/icons": "0.22.0",
     "@snack-uikit/info-block": "0.4.6",
     "@snack-uikit/list": "0.15.3",
-    "@snack-uikit/pagination": "0.6.12",
+    "@snack-uikit/pagination": "0.7.0",
     "@snack-uikit/scroll": "0.6.0",
     "@snack-uikit/skeleton": "0.3.4",
     "@snack-uikit/toggles": "0.10.3",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "4b0115dd4accdaf26fcd86248ec1ac8e78ac41a5"
+  "gitHead": "88e1132e1aa2180d7d806847fa61f6edf1b5854b"
 }

package/src/components/Table/Table.tsx

@@ -41,7 +41,12 @@ import { TableProps } from '../types';
 import { useLoadingTable, useStateControl } from './hooks';
 import { usePageReset } from './hooks/usePageReset';
 import styles from './styles.module.scss';
-import { getColumnStyleVars, getCurrentlyConfiguredHeaderWidth } from './utils';
+import {
+  getColumnStyleVars,
+  getCurrentlyConfiguredHeaderWidth,
+  getInitColumnSizeFromLocalStorage,
+  saveStateToLocalStorage,
+} from './utils';
 
 /** Компонент таблицы */
 export function Table<TData extends object>({
@@ -85,6 +90,7 @@ export function Table<TData extends object>({
   scrollContainerRef,
   getRowId,
   enableFuzzySearch,
+  savedState,
 
   ...rest
 }: TableProps<TData>) {
@@ -235,9 +241,18 @@ export function Table<TData extends object>({
         colSizes[flexKey] = '100%';
       } else {
         const originalColumnDefSize = originalColDef?.size;
-        const initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
+        let initSize = originalColumnDefSize ? `${originalColumnDefSize}px` : '100%';
         const prevSize = columnSizeVarsRef.current?.[sizeKey];
 
+        const isResizeSavedToStore = originalColDef?.enableResizing && savedState?.id && savedState?.resize !== false;
+
+        if (isResizeSavedToStore) {
+          const savedSize = getInitColumnSizeFromLocalStorage({ id: savedState.id, columnId: header.id });
+          if (savedSize) {
+            initSize = savedSize;
+          }
+        }
+
         let size = initSize;
 
         if (header.column.getCanResize()) {
@@ -254,6 +269,10 @@ export function Table<TData extends object>({
           }
         }
 
+        if (isResizeSavedToStore) {
+          saveStateToLocalStorage({ id: savedState.id, columnId: header.id, size });
+        }
+
         colSizes[sizeKey] = size;
         colSizes[flexKey] = size === '100%' ? 'unset' : '0';
       }

package/src/components/Table/utils.ts

@@ -19,3 +19,38 @@ export function getColumnStyleVars(id: string) {
     flexKey: `--table-column-${id}-flex`,
   };
 }
+
+const RESIZED_KEY = 'RESIZED_COLUMN_KEY';
+
+type GetSavedStateFromLocalStorageProps = {
+  id: string;
+  columnId: string;
+};
+
+type SavedState = {
+  resizeState?: Record<string, string>;
+};
+
+export function getInitColumnSizeFromLocalStorage({ id, columnId }: GetSavedStateFromLocalStorageProps) {
+  const savedStateFromStorage: SavedState | null = JSON.parse(localStorage.getItem(id || '') || 'null');
+
+  if (savedStateFromStorage) {
+    const currentSize = savedStateFromStorage.resizeState?.[`${RESIZED_KEY}-${columnId}`] as string | undefined;
+    return currentSize;
+  }
+}
+
+type SaveStateToLocalStorageProps = {
+  id: string;
+  columnId: string;
+  size: string;
+};
+
+export function saveStateToLocalStorage({ id, columnId, size }: SaveStateToLocalStorageProps) {
+  const savedStateFromStorage: SavedState | null = JSON.parse(localStorage.getItem(id) || 'null');
+
+  const newResizeState: Record<string, string> = savedStateFromStorage?.resizeState || {};
+  newResizeState[`${RESIZED_KEY}-${columnId}`] = size;
+
+  localStorage.setItem(id, JSON.stringify({ ...(savedStateFromStorage || {}), resizeState: newResizeState }));
+}

package/src/components/types.ts

@@ -152,6 +152,15 @@ export type TableProps<TData extends object> = WithSupportProps<{
   scrollContainerRef?: RefObject<HTMLElement>;
   /** Определение какие строки должны быть закреплены в таблице */
   rowPinning?: Pick<RowPinningState, 'top'>;
+
+  /** Конфиг для сохранения состояния в localStorage. <br>
+   *  Поле id должно быть уникальным для разных таблиц в рамках приложения. <br>
+   *  Для корректной работы необходимо наличие id в конфиге columnDefinitions
+   *  */
+  savedState?: {
+    id: string;
+    resize?: boolean;
+  };
 }>;
 
 export type ServerTableProps<TData extends object> = Omit<