apphouse/dist/components/Pagination.d.ts

Component library for React that uses observable state management and theme-able components.

import React from 'react';
import { CSSProperties } from 'glamor';
import { ApphouseComponent } from './component.interfaces';
import { LayoutStyles } from '../styles/defaults/themes.interface';
/**
 * Styles for the Pagination component.
 */
export interface PaginationStyles {
    container?: CSSProperties;
    prevButton?: CSSProperties;
    nextButton?: CSSProperties;
    stepButton?: CSSProperties;
    prevButtonWrapper?: CSSProperties;
    nextButtonWrapper?: CSSProperties;
    ul?: CSSProperties;
    li?: CSSProperties;
}
/**
 * Props for the Pagination component.
 */
export interface PaginationProps extends ApphouseComponent<PaginationStyles> {
    /**
     * The current page number.
     */
    currentPage: number;
    /**
     * The total number of pages.
     */
    totalPages: number;
    /**
     * The orientation of the pagination component.
     * @default "horizontal"
     * @optional
     */
    orientation?: keyof LayoutStyles;
    /**
     * Callback function invoked when a page is changed.
     *
     * @param pageNumber - The selected page number.
     */
    onPageChange: (pageNumber: number) => void;
    /**
     * If true, the previous and next buttons will be shown.
     * @default false
     * @optional
     */
    showPrevNext?: boolean;
    /**
     * If true, the next button will be disabled.
     * if showPrevNext is false, this prop will block next buttons to be clicked
     * @default false
     */
    disableNext?: boolean;
    /**
     * If true, the page numbers will be hidden.
     * Ensure to set showPrevNext to true.
     * @default false
     */
    hideNumbers?: boolean;
    /**
     * if true, the pagination will be hidden when there is only one page
     * @default false
     */
    hideWhenOnePage?: boolean;
}
/**
 * Pagination component for navigating between pages.
 *
 * @usage
 * ```tsx
 * npm install apphouse
 * ```
 *
 * ```tsx
 * import { Pagination } from 'apphouse';
 * ```
 * ```tsx
 * <Pagination
 *   currentPage={1}
 *   totalPages={10}
 *   onPageChange={(pageNumber) => {
 *      console.log(pageNumber);
 *   }}
 *   orientation={'horizontal'}
 * />
 * ```
 */
export declare const Pagination: React.FC<PaginationProps>;