@snack-uikit/table 0.17.2 → 0.17.3

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 0.17.3 (2024-05-14)
+
+
+### Bug Fixes
+
+* **PDS-135:** prevent loop in page number changing ([2da818f](https://github.com/cloud-ru-tech/snack-uikit/commit/2da818f89c175782eeb2323f30e9f3459594fece))
+
+
+
+
+
 ## 0.17.2 (2024-05-13)
 
 ### Only dependencies have been changed

package/dist/components/Table/Table.js

@@ -23,6 +23,7 @@ import { DEFAULT_PAGE_SIZE } from '../../constants';
 import { BodyRow, ExportButton, getColumnId, getRowActionsColumnDef, getSelectionCellColumnDef, getStatusColumnDef, HeaderRow, STATUS_APPEARANCE, TableContext, TableEmptyState, TablePagination, useEmptyState, } from '../../helperComponents';
 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';
 /** Компонент таблицы */
@@ -37,11 +38,7 @@ export function Table(_a) {
     const { state: sorting, onStateChange: onSortingChange } = useStateControl(sortingProp, []);
     const { state: pagination, onStateChange: onPaginationChange } = useStateControl(paginationProp, defaultPaginationState);
     const enableSelection = Boolean(rowSelectionProp === null || rowSelectionProp === void 0 ? void 0 : rowSelectionProp.enable);
-    useEffect(() => {
-        if (pagination.pageIndex >= data.length / pagination.pageSize) {
-            onPaginationChange(Object.assign(Object.assign({}, pagination), { pageIndex: 0 }));
-        }
-    }, [data.length, onPaginationChange, pagination]);
+    usePageReset({ data, pagination, onPaginationChange });
     const tableColumns = useMemo(() => {
         let cols = columnDefinitions;
         if (enableSelection) {

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

@@ -0,0 +1,8 @@
+import { PaginationState } from '@tanstack/react-table';
+type UsePageResetProps<TData extends object> = {
+    data: TData[];
+    pagination: PaginationState;
+    onPaginationChange(state: PaginationState): void;
+};
+export declare function usePageReset<TData extends object>({ pagination, data, onPaginationChange }: UsePageResetProps<TData>): void;
+export {};

package/dist/components/Table/hooks/usePageReset.js

@@ -0,0 +1,10 @@
+import { useEffect } from 'react';
+export function usePageReset({ pagination, data, onPaginationChange }) {
+    useEffect(() => {
+        const { pageIndex } = pagination;
+        const maximumAvailablePage = data.length / pagination.pageSize;
+        if (pageIndex > 0 && pageIndex >= maximumAvailablePage) {
+            onPaginationChange(Object.assign(Object.assign({}, pagination), { pageIndex: 0 }));
+        }
+    }, [data.length, onPaginationChange, pagination]);
+}

package/package.json

@@ -4,7 +4,7 @@
     "access": "public"
   },
   "title": "Table",
-  "version": "0.17.2",
+  "version": "0.17.3",
   "sideEffects": [
     "*.css",
     "*.woff",
@@ -57,5 +57,5 @@
   "peerDependencies": {
     "@snack-uikit/locale": "*"
   },
-  "gitHead": "58d2de0677c973ff4510861699d6fc19b8912a44"
+  "gitHead": "ef7c38971275539431807881d3f80e00b393d34d"
 }

package/src/components/Table/Table.tsx

@@ -39,6 +39,7 @@ import { ColumnDefinition } from '../../types';
 import { fuzzyFilter } from '../../utils';
 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';
 
@@ -99,11 +100,7 @@ export function Table<TData extends object>({
   );
   const enableSelection = Boolean(rowSelectionProp?.enable);
 
-  useEffect(() => {
-    if (pagination.pageIndex >= data.length / pagination.pageSize) {
-      onPaginationChange({ ...pagination, pageIndex: 0 });
-    }
-  }, [data.length, onPaginationChange, pagination]);
+  usePageReset({ data, pagination, onPaginationChange });
 
   const tableColumns: ColumnDefinition<TData>[] = useMemo(() => {
     let cols: ColumnDefinition<TData>[] = columnDefinitions;

package/src/components/Table/hooks/usePageReset.ts

@@ -0,0 +1,19 @@
+import { PaginationState } from '@tanstack/react-table';
+import { useEffect } from 'react';
+
+type UsePageResetProps<TData extends object> = {
+  data: TData[];
+  pagination: PaginationState;
+  onPaginationChange(state: PaginationState): void;
+};
+
+export function usePageReset<TData extends object>({ pagination, data, onPaginationChange }: UsePageResetProps<TData>) {
+  useEffect(() => {
+    const { pageIndex } = pagination;
+    const maximumAvailablePage = data.length / pagination.pageSize;
+
+    if (pageIndex > 0 && pageIndex >= maximumAvailablePage) {
+      onPaginationChange({ ...pagination, pageIndex: 0 });
+    }
+  }, [data.length, onPaginationChange, pagination]);
+}