bug(UIKIT-1819,DataGridPagination): Исправлено исчезновение футера пр…

…и переходе между страницами (#1163)

packages/components/src/DataGridPagination/DataGridPagination.tsx

@@ -1,54 +1,59 @@
-import { Pagination } from '../Pagination';
-import { type PaginationProps } from '../Pagination';
+import { Pagination, type PaginationProps } from '../Pagination';
 import { MenuItem } from '../MenuItem';
 import { Typography } from '../Typography';
 import { Select } from '../Select';
 
-import { PaginationWrapper, Range, RangeWrapper } from './styles';
-import { useLogic } from './useLogic';
 import {
   DEFAULT_ROWS_PER_PAGE,
   DEFAULT_ROWS_PER_PAGE_OPTION,
 } from './constants';
+import { useLogic } from './useLogic';
+import { PaginationWrapper, Range, RangeWrapper } from './styles';
 
 export type DataGridPaginationProps = Omit<PaginationProps, 'count'> & {
   /**
    * Количество всех записей
    */
   totalCount: number;
-  /**
-   * Максимальное количество записей на страницу
-   */
-  rowsPerPage?: number;
+
   /**
    * Текущая страница
    */
   page: number;
+
   /**
-   * Коллбэк для установки количества отображаемых элементов на странице
+   * Максимальное количество записей на страницу
    */
-  onSetCountPerPage?: (rowsPerPage: number) => void;
+  rowsPerPage?: number;
+
   /**
    * Конфигурация списка кол-ва элементов, отображаемых на одной странице
    */
   rowsPerPageOptions?: number[];
+
+  /**
+   * Коллбэк для установки количества отображаемых элементов на странице
+   */
+  onSetCountPerPage?: (rowsPerPage: number) => void;
 };
 
-export const DataGridPagination = ({
-  page,
-  rowsPerPage = DEFAULT_ROWS_PER_PAGE,
-  totalCount,
-  className,
-  onSetCountPerPage,
-  rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTION,
-  ...props
-}: DataGridPaginationProps) => {
+export const DataGridPagination = (props: DataGridPaginationProps) => {
   const {
     formattedRange,
     pageCount,
     handleChangeRowsPerPage,
     isVisiblePagination,
-  } = useLogic(totalCount, rowsPerPage, page, onSetCountPerPage);
+  } = useLogic(props);
+
+  const {
+    page,
+    totalCount,
+    className,
+    rowsPerPage = DEFAULT_ROWS_PER_PAGE,
+    rowsPerPageOptions = DEFAULT_ROWS_PER_PAGE_OPTION,
+    onSetCountPerPage,
+    ...restProps
+  } = props;
 
   if (!isVisiblePagination) {
     return null;
@@ -73,9 +78,11 @@ export const DataGridPagination = ({
             </Select>
           </>
         )}
+
         <Range variant="h6">{formattedRange()}</Range>
       </RangeWrapper>
-      <Pagination count={pageCount} page={page} {...props} />
+
+      <Pagination count={pageCount} page={page} {...restProps} />
     </PaginationWrapper>
   );
 };

packages/components/src/DataGridPagination/useLogic/useLogic.ts

@@ -1,35 +1,53 @@
+import { useEffect, useRef } from 'react';
 import { type SelectChangeEvent } from '@mui/material';
 
-export const useLogic = (
-  totalCount: number,
-  rowsPerPage: number,
-  page: number,
-  onSetCountPerPage?: (rowsPerPage: number) => void,
-) => {
-  const pageCount = Math.ceil(totalCount / rowsPerPage);
+import { DEFAULT_ROWS_PER_PAGE } from '../constants';
+import { type DataGridPaginationProps } from '../DataGridPagination';
+
+type UseLogicParams = DataGridPaginationProps;
+
+export const useLogic = ({
+  totalCount,
+  rowsPerPage = DEFAULT_ROWS_PER_PAGE,
+  page,
+  onSetCountPerPage,
+}: UseLogicParams) => {
+  const prevTotalCountRef = useRef<number>(0);
+
+  useEffect(() => {
+    if (totalCount) {
+      prevTotalCountRef.current = totalCount;
+    }
+  }, [totalCount]);
+
+  const actualTotalCount = totalCount || prevTotalCountRef.current;
+
+  const pageCount = Math.ceil(actualTotalCount / rowsPerPage);
+
   const rangeStart = (page - 1) * rowsPerPage + 1;
+
   const rangeEnd = () => {
     const end = page * rowsPerPage;
 
-    return end < totalCount ? end : totalCount;
+    return end < actualTotalCount ? end : actualTotalCount;
   };
 
   const formattedRange = () => {
-    return `${rangeStart} — ${rangeEnd()} из ${totalCount} записей`;
+    return `${rangeStart} — ${rangeEnd()} из ${actualTotalCount} записей`;
   };
 
   const isVisiblePagination = !(
-    !onSetCountPerPage && totalCount <= rowsPerPage
+    !onSetCountPerPage && actualTotalCount <= rowsPerPage
   );
 
   const handleChangeRowsPerPage = (event: SelectChangeEvent<unknown>) => {
     onSetCountPerPage?.(Number(event.target.value));
   };
 
   return {
-    handleChangeRowsPerPage,
-    formattedRange,
-    pageCount,
     isVisiblePagination,
+    pageCount,
+    formattedRange,
+    handleChangeRowsPerPage,
   };
 };