@payfit/unity-components
Version:
65 lines (64 loc) • 2.08 kB
TypeScript
export type PaginationWindowItem = {
type: 'page';
value: number;
} | {
type: 'ellipsis';
value: [number, number];
};
export interface UsePaginationWindowOptions {
/**
* The total number of pages.
* Use -1 to indicate an unknown page count (e.g., for infinite scroll or server-paginated data).
* When -1, the hook will show pages from 1 to currentPage + offset, ending with an ellipsis indicating unknown pages beyond.
*/
pageCount: number;
/**
* The current page (1-based)
*/
currentPage: number;
/**
* The maximum number of pages to show in the window
* @default 7
*/
windowSize?: number;
}
/**
* Hook that generates a pagination window with ellipsis for large page counts.
* This hook provides the logic for determining which pages to show in a pagination component.
* @param options - Configuration options for the pagination window
* @param options.pageCount - The total number of pages.
* @param options.currentPage - The current page (1-based).
* @param options.windowSize - The maximum number of pages to show in the window.
* @returns Array of pagination items (pages and ellipsis)
* @example
* ```tsx
* import { usePaginationWindow } from '@payfit/unity-components'
*
* function MyPagination() {
* const pages = usePaginationWindow({
* pageCount: 20,
* currentPage: 5,
* windowSize: 7
* })
*
* return (
* <Pagination>
* <PaginationContent>
* {pages.map((page, index) => (
* <PaginationItem key={index}>
* {page.type === 'page' ? (
* <RawPaginationLink href={`/page/${page.value}`}>
* {page.value}
* </RawPaginationLink>
* ) : (
* <PaginationEllipsis />
* )}
* </PaginationItem>
* ))}
* </PaginationContent>
* </Pagination>
* )
* }
* ```
*/
export declare function usePaginationWindow({ pageCount, currentPage, windowSize, }: UsePaginationWindowOptions): PaginationWindowItem[];