@availity/pagination
Version:
component for displaying paginated data
112 lines (106 loc) • 6.11 kB
text/typescript
import React from 'react';
import { Props as Props$1 } from 'react-infinite-scroll-component';
import { Props } from '@availity/block-ui';
type PaginationCtx<TItem> = {
total: number;
pageCount: number;
page: TItem[];
allPages: TItem[];
lower: number;
upper: number;
hasMore: boolean;
setPage: (page: number) => void;
currentPage: number;
loading: boolean;
error: Error | null;
setError: (error: Error) => void;
itemsPerPage: number;
ref: React.Ref<HTMLSpanElement>;
setDoFocusRefOnPageChange: (doFocus: boolean) => void;
};
declare const PaginationContext: React.Context<PaginationCtx<unknown> | null>;
declare function usePagination<TItem>(): PaginationCtx<TItem>;
type PaginationProps<TItem> = {
/** If Array, defaults `totalCount` to the length of the array, and page values are sliced from the Array. If a function, it is called with the current page as an argument and expects an array of items to be returned. */
items: TItem[] | ((page: number, itemsPerPage: number) => Promise<{
items: TItem[];
totalCount: number;
}>);
/** Contains the content between the opening and closing tags of a component. */
children?: React.ReactNode;
/** The amount of time (in milliseconds) to delay fetching page data since the last time page data was fetched (debounced input). Useful for when `items` is a function that's calling an api that you want to relieve pressure on. **Default**: `0` */
debounceTimeout?: number;
/** The starting page to use when the component mounts. **Default:** `1`. */
defaultPage?: number;
/** The total amount of items to render at a time. ( After all the filtering ). **Default:** `10`. */
itemsPerPage?: number;
/** Function to call when an error occurs. */
onError?: (error: Error) => void;
/** Function to call after the new page has been set when the user changes the page */
onPageChange?: (page: number) => void;
/** Optionally pass your own page in to make the pagination component controlled from props. */
page?: number;
/** Array of data points that, when changed, causes pagination to reset the current page to 1. */
resetParams?: unknown[];
/** If `true`, the previous results are returned. Note: if no results have been fetched thus far, an empty array is returned. Useful for when `items` is a function and new results should not be fetched until certain criteria is met. **Default:** `false`. */
shouldReturnPrevious?: boolean;
/** Array of data points that, when changed, causes the pagination to update. This is helpful when the `items` prop is a function and you want `items` to be called to get the most up-to-date list. */
watchList?: unknown[];
};
declare function Pagination<TItem>({ items: theItems, page: propsCurrentPage, itemsPerPage, onPageChange, children, watchList, resetParams, defaultPage, debounceTimeout, shouldReturnPrevious, onError, }: PaginationProps<TItem>): JSX.Element;
type PaginationContentProps = {
/** The component to render when iterating through the current page of items. The contents of the item will be spread on the props of the component when rendered. */
component: React.ElementType;
/** The key of the object rendered in the component to be used during mapping. */
itemKey: string;
/** Customize the contents of what gets rendered. Children can be a react child or a function that accepts the pagination items. */
children?: React.ReactNode;
/** Props to be spread onto the `<BlockUI />` tag. */
containerProps?: Props;
/** The message to render with the loading bar when in the loading state. */
loadingMessage?: string | React.ReactNode;
/** If `true`, calls `BlockUI` to simulate a loading state if the provider is loading. */
loader?: boolean;
/** If `true`, renders pagination content inside an infinite scroll component. */
infiniteScroll?: boolean;
/** Only used when `infiniteScroll` is true. See [react-infinite-scroll-component](https://github.com/ankeetmaini/react-infinite-scroll-component#props) */
infiniteScrollProps?: Props$1;
/** The tag to render the `<BlockUI />` as. **Default:** `div`. */
containerTag?: React.ElementType;
};
declare const PaginationContent: <TItem extends Record<string, unknown>>({ component: Component, loadingMessage, itemKey, loader, containerTag, containerProps, infiniteScroll, infiniteScrollProps, children, ...rest }: PaginationContentProps) => JSX.Element;
type PaginationControlsProps = {
'aria-label'?: string;
autoHide?: boolean;
breakLabel?: boolean;
className?: string;
directionLinks?: boolean;
listClassName?: string;
marginPages?: number;
pageRange?: number;
populatePaginationText?: (lower: number, upper: number, total: number) => React.ReactNode;
showPaginationText?: boolean;
};
declare const PaginationControls: ({ directionLinks, autoHide, pageRange, marginPages, breakLabel, showPaginationText, populatePaginationText, ...rest }: PaginationControlsProps) => JSX.Element | null;
type Resource<TData> = {
postGet: (request: {
limit: number;
offset: number;
} & Record<string, unknown>, config: Record<string, unknown>) => Promise<{
data: TData & {
totalCount: number;
};
}>;
getResult: string | ((result: TData) => unknown[]);
};
type AvResourcePaginationProps<TData> = {
getResult: string | ((result: TData) => unknown[]);
children: React.ReactNode;
itemsPerPage?: number;
parameters?: {
params?: Record<string, unknown>;
} & Record<string, unknown>;
resource: Resource<TData>;
};
declare const AvResourcePagination: <TData>({ parameters, resource, getResult, children, ...paginationProps }: AvResourcePaginationProps<TData>) => JSX.Element;
export { AvResourcePagination, AvResourcePaginationProps, Pagination, PaginationContent, PaginationContentProps, PaginationContext, PaginationControls, PaginationControlsProps, PaginationCtx, PaginationProps, Pagination as default, usePagination };