UNPKG

@patternfly/react-core

Version:

This library provides a set of common React components for use with the PatternFly reference implementation.

129 lines 6.66 kB
/// <reference types="react" /> import { PaginationToggleTemplateProps } from './ToggleTemplate'; import { OUIAProps } from '../../helpers'; export declare enum PaginationVariant { bottom = "bottom", top = "top" } /** Properties to customize the content and behavior of the pagination dropdown options. These * properties should be passed into the pagination component's perPageOptions property. */ export interface PerPageOptions { /** The text title of the option, which is rendered inside the pagination dropdown menu. */ title?: string; /** The value of the option, which determines how many items are displayed per page. */ value?: number; } /** Properties to customize various pagination titles. The following properties should be * passed into the pagination component's title property. */ export interface PaginationTitles { /** Accessible label for the input displaying the current page. */ currPageAriaLabel?: string; /** The type or title of the items being paginated. */ items?: string; /** The title of the pagination options menu. */ itemsPerPage?: string; /** Label for the English word "of". */ ofWord?: string; /** Accessible label for the options toggle. */ optionsToggleAriaLabel?: string; /** The title of a page displayed beside the page number. */ page?: string; /** The title of a page displayed beside the page number (plural form). */ pages?: string; /** Accessible label for the pagination component. */ paginationAriaLabel?: string; /** The suffix to be displayed after each option on the options menu dropdown. */ perPageSuffix?: string; /** Accessible label for the button which moves to the first page. */ toFirstPageAriaLabel?: string; /** Accessible label for the button which moves to the last page. */ toLastPageAriaLabel?: string; /** Accessible label for the button which moves to the next page. */ toNextPageAriaLabel?: string; /** Accessible label for the button which moves to the previous page. */ toPreviousPageAriaLabel?: string; } export type OnSetPage = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPage: number, perPage?: number, startIdx?: number, endIdx?: number) => void; export type OnPerPageSelect = (event: React.MouseEvent | React.KeyboardEvent | MouseEvent, newPerPage: number, newPage: number, startIdx?: number, endIdx?: number) => void; /** The main pagination component. */ export interface PaginationProps extends React.HTMLProps<HTMLDivElement>, OUIAProps { /** What should be rendered inside the pagination. */ children?: React.ReactNode; /** Additional classes for the pagination container. */ className?: string; /** Indicate whether to show last full page of results when user selects perPage value * greater than remaining rows. */ isLastFullPageShown?: boolean; /** Direction of dropdown context menu. */ dropDirection?: 'up' | 'down'; /** Page to start at. */ firstPage?: number; /** Flag indicating that pagination should use page insets. */ usePageInsets?: boolean; /** Insets at various breakpoints. */ inset?: { default?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; sm?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; md?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; lg?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; xl?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; '2xl'?: 'insetNone' | 'insetSm' | 'insetMd' | 'insetLg' | 'insetXl' | 'inset2xl'; }; /** Flag indicating if pagination is disabled. */ isDisabled?: boolean; /** Flag indicating if pagination is compact. */ isCompact?: boolean; /** Flag indicating if pagination should not be sticky on mobile. */ isStatic?: boolean; /** Flag indicating if pagination should stick to its position (based on variant). */ isSticky?: boolean; /** Total number of items. */ itemCount?: number; /** Last index of items on current page. */ itemsEnd?: number; /** First index of items on current page. */ itemsStart?: number; /** Start index of rows to display, used in place of providing page. */ offset?: number; /** Current page number. */ page?: number; /** Number of items per page. */ perPage?: number; /** Array of the number of items per page options. */ perPageOptions?: PerPageOptions[]; /** Function called when user clicks on navigate to first page. */ onFirstClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void; /** Function called when user clicks on navigate to last page. */ onLastClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void; /** Function called when user clicks on navigate to next page. */ onNextClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void; /** Function called when user inputs page number. */ onPageInput?: (event: React.KeyboardEvent<HTMLInputElement>, page: number) => void; /** Function called when user selects number of items per page. */ onPerPageSelect?: OnPerPageSelect; /** Function called when user clicks on navigate to previous page. */ onPreviousClick?: (event: React.SyntheticEvent<HTMLButtonElement>, page: number) => void; /** Function called when user sets page. */ onSetPage?: OnSetPage; /** Object with titles to display in pagination. */ titles?: PaginationTitles; /** This will be shown in pagination toggle span. You can use firstIndex, lastIndex, * itemCount, itemsTitle, and/or ofWord props. */ toggleTemplate?: ((props: PaginationToggleTemplateProps) => React.ReactElement<any>) | string; /** Position where pagination is rendered. */ variant?: 'top' | 'bottom' | PaginationVariant; /** Id to identify widget on page. */ widgetId?: string; /** Value to overwrite the randomly generated data-ouia-component-id.*/ ouiaId?: number | string; /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */ ouiaSafe?: boolean; /** @beta The container to append the pagination options menu to. */ menuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline'; } export declare const Pagination: React.FunctionComponent<PaginationProps>; //# sourceMappingURL=Pagination.d.ts.map