@uifabric/experiments/lib-commonjs/components/Pagination/Pagination.types.d.ts

Experimental React components for building experiences for Office 365.

import { IStyle, ITheme } from '../../Styling';
import { IStyleFunctionOrObject, IRefObject, IRenderFunction } from '../../Utilities';
import { IIconProps } from 'office-ui-fabric-react/lib/Icon';
export interface IPaginationProps {
    /**
     * The total number of pages.
     */
    pageCount: number;
    /**
     * Items per page
     */
    itemsPerPage?: number;
    /**
     * total number of items
     */
    totalItemCount?: number;
    /**
     * Selected page index
     * @default 0
     */
    selectedPageIndex?: number;
    /**
     * Icon prop for the first page button
     */
    firstPageIconProps?: IIconProps;
    /**
     * Icon prop for the previous page button
     */
    previousPageIconProps?: IIconProps;
    /**
     * Icon prop for the next page button
     */
    nextPageIconProps?: IIconProps;
    /**
     * Icon prop for the last page button
     */
    lastPageIconProps?: IIconProps;
    /**
     * aria label for the first page button
     */
    firstPageAriaLabel?: string;
    /**
     * aria label for the previous page button
     */
    previousPageAriaLabel?: string;
    /**
     * aria label for the next page button
     */
    nextPageAriaLabel?: string;
    /**
     * aria label for the last page button
     */
    lastPageAriaLabel?: string;
    /**
     * aria label for the page. This should be a simple string such as 'page' in corresponding localized language.
     */
    pageAriaLabel?: string;
    /**
     * aria label for the selected page. e.g. 'selected', 'page selected'
     */
    selectedAriaLabel?: string;
    /**
     * call to provide customized styling that will layer on top of the variant rules.
     */
    styles?: IStyleFunctionOrObject<IPaginationStyleProps, IPaginationStyles>;
    /**
     * Gets ref to component interface
     */
    componentRef?: IRefObject<{}>;
    /**
     * theme provided by High-Order Component.
     */
    theme?: ITheme;
    /**
     * the aria label of combo box
     */
    comboBoxAriaLabel?: string;
    /**
     * format of the pagination control
     * @default PaginationFormat.buttons
     */
    format?: PaginationFormat;
    /**
     * number of visible buttons. This is only applicable for @param comboBox
     */
    numberOfPageButton?: number;
    /**
     * The string object
     */
    strings?: IPaginationString;
    /**
     * the call back function to load another page in the table. This needs to be defined in the parent component.
     */
    onPageChange?: (index: number) => void;
    /**
     * provide a render function for the visible item label if localization of this string is needed.
     */
    onRenderVisibleItemLabel?: IRenderFunction<IPaginationProps>;
}
export declare type PaginationFormat = 'comboBox' | 'buttons';
export interface IPaginationString {
    /**
     * the divider between the 'from item index' and the 'to item index', e.g. '-'
     **/
    divider?: string;
    /**
     *  the string for 'of', e.g. 'of'
     **/
    of?: string;
}
export interface IPaginationStyleProps {
    theme: ITheme;
    /**
     * format of the pagination control
     * @default PaginationFormat.comboBox
     */
    format?: PaginationFormat;
}
export interface IPaginationStyles {
    /**
     * Style for the root element.
     */
    root: IStyle;
    /**
     * Style for the Combo Box.
     */
    comboBox: IStyle;
    /**
     * Style for the page number.
     */
    pageNumber: IStyle;
    /**
     * Style for the previous, next, first, last page buttons.
     */
    previousNextPage: IStyle;
    /**
     * Style for the previous, next, first, last page buttons when they are disabled.
     */
    previousNextPageDisabled: IStyle;
    /**
     * Style for the visible item label.
     */
    visibleItemLabel: IStyle;
}