gadgets/dist/lib/pager/Pager.d.ts

Reusable React UI widgets - This is my widget library. There are many like it, but this one is mine...

/**
 * A pagination control.  This takes an input size `I` and a page size `P`
 * and breaks it up into N = I/P entries.  The entries are displayed as a
 * list of pages that can be chosen by the user.  When clicking on the page
 * entry a selection event is invoked to tell the user what page was selected.
 * The user is responsible for responding to the event and dealing with the
 * page switch.
 *
 * The component contains two buttons on the front of the list and two buttons
 * at the end of the list to aid in navigation.  The first button moves to the
 * front of the page list.  The second button moves one page back in the list
 * If at the front of the list, then no operation is performed.  The last two
 * buttons are used to move to the end of the list or to move foward one
 * position.
 *
 * The right side of list contains a dialog button with `...`.  This allows
 * the user of the control to change the page size.
 *
 * ## Screen:
 * <img src="https://github.com/jmquigley/gadgets/blob/master/images/pager.png" width="40%" />
 *
 * ## Examples:
 *
 * ```javascript
 * import {Pager} from 'gadgets';
 * <Pager
 *     initialPage="1"
 *     pageSizes={[25,50,100,500]}
 *     sizing={Sizing.normal}
 *     totalItems="2999"
 *     onSelection={
 *         (page: number) => {
 *             console.log(`Clicked on page: ${page}`);
 *         }
 *     }
 *     onSort={
 *         (sortOrder: any) => {
 *             if (sortOrder === SortOrder.ascending) {
 *                 console.log(`Sorting pager in ascending`);
 *             } else {
 *                 console.log(`Sorting pager in descending`);
 *             }
 *         }
 *     }
 *     useinput
 *     />
 * ```
 *
 * The example above would create a `Pager` control that contains 120 page
 * entries to choose from.  The default page size is the first entry in
 * the `pageSizes` array property.
 *
 * This control would also include a `TextField` that allows the user to jump
 * to a page by its number position.
 *
 * ## API
 * #### Events
 * - `onChangePageSize(pageSize: number)` - when the page size of the control
 * is change in the dialog box this event is invoked with the new size.
 * - `onSelection(page: number)` - When the control changes to a new page, this
 * event is invoked.  It will give the new page selection as a parameter.
 * - `onSort(sortOrder: SortOrder)` - When this callback is given, then the
 * dialog button will present an *ascending* and *descending* option.  When one
 * of these are selected, then it will invoke this callback with the selected
 * type.
 *
 * #### Styles
 * - `ui-pager` - The top level style for the control on the `<div>` container.
 *
 * #### Properties
 * - `initialPage=1 {number}` - The page to start with in the list display.
 * - `pagesToDisplay=3 {number}` - The number of page buttons to show with
 * the control.
 * - `pageSizes=[25, 50, 100] {number[]}` - A list of page number sizes that
 * can be used by the pager.  It is used against the total items to
 * determine the total number of pages in the control display.
 * - `totalItems=0 {number}` - The total number of items represented by the
 * control.
 * - `useinput=false {boolean}` - If this is true, then a text input is shown
 * with the control that allows the user to jump to a specific page.
 *
 * @module Pager
 */
/// <reference types="react" />
import { BaseComponent, BaseProps, BaseState, SortOrder } from "../shared";
export declare const defaultPageSize: number;
export declare const defaultPageSizes: number[];
export interface PagerProps extends BaseProps {
    initialPage?: number;
    initialPageSize?: number;
    onChangePageSize?: (size: number) => void;
    onSelection?: (page: number) => void;
    onSort?: (sortOrder: SortOrder) => void;
    pagesToDisplay?: number;
    pageSizes?: number[];
    totalItems?: number;
    useinput?: boolean;
}
export interface PagerState extends BaseState {
    currentPage: number;
    currentSort: SortOrder;
    pageSize: number;
}
export declare class Pager extends BaseComponent<PagerProps, PagerState> {
    static readonly defaultProps: PagerProps;
    private _lastPage;
    private _buttonsDisplay;
    private _buttons;
    private _dialog;
    private _dialogKeys;
    private _fillerKeys;
    private _fillerIdx;
    private _iconCheck;
    private _iconBlank;
    private _initialPage;
    private _initialPageSize;
    private _inputPageField;
    private _pageSizes;
    constructor(props: PagerProps);
    currentPage: number;
    readonly dialog: any;
    readonly initialPage: number;
    readonly initialPageSize: number;
    readonly lastPage: number;
    /**
     * Computes the page range based on the currently selected page.  Any page
     * that would be outside of the range is set to 0 (no page).
     * @returns {number[]} the list of page numbers associated with the range
     */
    readonly pages: number[];
    pageSize: number;
    pageSizes: number[];
    /**
     * Takes the given page size and input props and determines the appropriate initialPage,
     * lastPage, and initialPageSize.  These variables are saved within the class and
     * are used to set the state of the current page and the computed page size.
     * @param props {PagerProps} the set of props that should be used to
     * compute the initial page information (size, first/last page)
     */
    private computeInitialPages;
    /**
     * Determines the last page number in the list from the requested
     * page size value.
     * @param pageSize {number} The number of elements per page.  Defaults
     * to the value stored in the state.pageSize
     * @returns {number} the last page number based on the total items
     * divided by the pageSize
     */
    private computeLastPage;
    /**
     * Creates the buttons used by the pager.  It saves each button into
     * a cache of buttons and only creates a page once.  After creation it will
     * select the appropriate button from the list and use that to form the
     * display array.
     */
    private createButtons;
    /**
     * Dynamically creates the popup dialog menu used to select new values for the
     * control.  The values include navigation and changing the page size.
     */
    private createDialog;
    private createInputPageField;
    /**
     * Removes non-standard props.  When passing non standard props to a standard element it
     * will flag warnings in the test runner.  This strips off those props that it complains
     * about in this component.
     */
    private sanitizeProps;
    private handleBlur;
    private handleChange;
    private handleDialogSelect;
    private handleKeyPress;
    private handleSelect;
    private handleSortAscending;
    private handleSortDescending;
    private moveToEnd;
    private moveToFront;
    private moveToNext;
    private moveToPrevious;
    /**
     * When the page size is changed on a button this callback function is used to
     * to recompute the buttons and redisplay them.
     *
     * Without this forced update the buttons will not be redrawn until the
     * next click on the control.
     */
    private rebuildButtons;
    render(): JSX.Element;
}
export default Pager;