UNPKG

@payfit/unity-components

Version:

55 lines (54 loc) 2.98 kB
import { RegisteredRouter, ValidateLinkOptions } from '@tanstack/react-router'; import { PaginationLinkProps as RawPaginationLinkProps } from '../../../../components/pagination/parts/RawPaginationLink.js'; type PaginationLinkRouterProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = Omit<RawPaginationLinkProps, 'href' | 'onPress'> & ValidateLinkOptions<TRouter, TOptions>; export type PaginationLinkProps<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown> = PaginationLinkRouterProps<TRouter, TOptions>; /** * A pagination link component that integrates with Tanstack Router for seamless navigation. * Provides type-safe, URL-driven pagination with support for preloading and active states. * @param {PaginationLinkProps} props - Router-based props including 'to', 'search', and pagination-specific props * @example * ```tsx * import { PaginationLink } from '@payfit/unity-components/integrations/tanstack-router' * import { Pagination, PaginationContent, PaginationItem } from '@payfit/unity-components' * * function ProductPagination() { * const search = useSearch({ from: '/products' }) * const currentPage = search.page || 1 * * return ( * <Pagination pageCount={10} currentPage={currentPage} onPageChange={handlePageChange}> * <PaginationContent> * <PaginationItem> * <PaginationLink * to="/products" * search={{ ...search, page: 1 }} * value={1} * isCurrent={currentPage === 1} * preload="intent" * > * 1 * </PaginationLink> * </PaginationItem> * </PaginationContent> * </Pagination> * ) * } * ``` * @remarks * - Automatically applies active styling when isCurrent is true * - Supports type-safe route parameters and search params with Tanstack Router * - Enables preload="intent" for data loading before navigation * - Maintains accessibility with aria-current="page" for current page * - Works with Pagination context for keyboard navigation support * - Uses the 'value' prop to identify the page number for the link * @see {@link PaginationLinkProps} for all available props * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/integrations/tanstack-router/components/pagination GitHub} * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma} * @see Design docs in {@link https://www.payfit.design/ Payfit.design} * @see Developer docs in {@link https://unity-components.payfit.io/?path=/ unity-components.payfit.io} */ declare function PaginationLink<TRouter extends RegisteredRouter = RegisteredRouter, TOptions = unknown>(props: PaginationLinkProps<TRouter, TOptions>): import("react/jsx-runtime").JSX.Element; declare namespace PaginationLink { var displayName: string; } export { PaginationLink };