@payfit/unity-components
Version:
104 lines (103 loc) • 4.02 kB
TypeScript
import { VariantProps } from '@payfit/unity-themes';
import { ComponentType } from 'react';
import { PaginationLinkProps } from './parts/RawPaginationLink.js';
export declare const pagination: import('tailwind-variants').TVReturnType<{
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
pagesList?: import('tailwind-merge').ClassNameValue;
};
};
} | {
[x: string]: {
[x: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
pagesList?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string;
pagesList: string;
}, undefined, {
[key: string]: {
[key: string]: import('tailwind-merge').ClassNameValue | {
base?: import('tailwind-merge').ClassNameValue;
pagesList?: import('tailwind-merge').ClassNameValue;
};
};
} | {}, {
base: string;
pagesList: string;
}, import('tailwind-variants').TVReturnType<unknown, {
base: string;
pagesList: string;
}, undefined, unknown, unknown, undefined>>;
export interface ClientSidePaginationProps extends VariantProps<typeof pagination> {
/**
* The total number of pages to display
*/
pageCount: number;
/**
* The current page for controlled mode usage
*/
currentPage?: number;
/**
* The initial page to display when in uncontrolled mode
*/
defaultPage?: number;
/**
* Optional callback function that is triggered when a page hover event occurs.
* Can be used to handle logic or effects related to the hover action over a specific page.
* @param {number} page - The number of the page that is being hovered over.
*/
onPageHover?: (page: number) => void;
/**
* Callback fired when the page changes
* @param page - The new page number
* @param previous - The previous page number
* @param direction - The direction of navigation (1 for forward, -1 for backward)
*/
onPageChange?: (page: number, previous: number, direction: -1 | 1) => void;
/**
* Optional callback for the "next" button's press
*/
onNextPress?: () => void;
/**
* Optional callback for previous button press
*/
onPreviousPress?: () => void;
/**
* Component used to render the pagination links
* @default 'RawPaginationLink'
*/
LinkComponent?: ComponentType<PaginationLinkProps>;
}
/**
* The ClientSidePagination component helps users navigate through multiple pages of content by providing intuitive controls for moving between pages.
*
* This component is designed for client-side pagination use cases where state is managed in React state rather than URL parameters.
* For URL-driven pagination, use the composition-based Pagination components instead.
*
* Pagination offers both controlled and uncontrolled usage, support for keyboard navigation, and automatic handling of page ranges with ellipsis for large numbers of pages.
* @param {ClientSidePaginationProps} props - Regular HTML div attributes plus pagination-specific properties
* @see {@link ClientSidePaginationProps} for all available props
* @example
* ```tsx
* import { ClientSidePagination } from '@payfit/unity-components'
*
* function Example() {
* const [currentPage, setCurrentPage] = useState(1)
* return (
* <ClientSidePagination
* pageCount={10}
* currentPage={currentPage}
* onPageChange={(page) => setCurrentPage(page)}
* />
* )
* }
* ```
* @remarks
* [API](https://unity-components.payfit.io/?path=/docs/navigation-pagination--docs) • [Demo](https://unity-components.payfit.io/?path=/docs/navigation-pagination--docs)
*/
declare const ClientSidePagination: import('react').ForwardRefExoticComponent<ClientSidePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
export { ClientSidePagination };