@carbon/react
Version:
React components for the Carbon Design System
108 lines (107 loc) • 3.49 kB
TypeScript
/**
* Copyright IBM Corp. 2020, 2025
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
import React from 'react';
import { TranslateWithId } from '../../types/common';
declare const translationIds: {
readonly 'carbon.pagination-nav.next': "Next";
readonly 'carbon.pagination-nav.previous': "Previous";
readonly 'carbon.pagination-nav.item': "Page";
readonly 'carbon.pagination-nav.active': "Active";
readonly 'carbon.pagination-nav.of': "of";
};
/**
* Message ids that will be passed to translateWithId().
*/
type TranslationKey = keyof typeof translationIds;
export interface DirectionButtonProps {
/**
* The direction this button represents ("forward" or "backward").
*/
direction?: 'forward' | 'backward';
/**
* Whether or not the button should be disabled.
*/
disabled?: boolean;
/**
* The label shown in the button's tooltip.
*/
label?: string;
/**
* The callback function called when the button is clicked.
*/
onClick?: React.MouseEventHandler;
}
export interface PaginationItemProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
/**
* Whether or not this is the currently active page.
*/
isActive?: boolean;
/**
* The callback function called when the item is clicked.
*/
onClick?: React.MouseEventHandler;
/**
* The page number this item represents.
*/
page?: number;
}
export interface PaginationOverflowProps extends TranslateWithId<'carbon.pagination-nav.item' | 'carbon.pagination-nav.active'> {
/**
* How many items to display in this overflow.
*/
count?: number;
/**
* From which index on this overflow should start displaying pages.
*/
fromIndex?: number;
/**
* The callback function called when the user selects a page from the overflow.
*/
onSelect?: (id: number) => void;
/**
* If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
* Set this to true if you are having performance problems with large data sets.
*/
disableOverflow?: boolean;
}
export interface PaginationNavProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>, TranslateWithId<TranslationKey> {
/**
* Additional CSS class names.
*/
className?: string;
/**
* If true, the '...' pagination overflow will not render page links between the first and last rendered buttons.
* Set this to true if you are having performance problems with large data sets.
*/
disableOverflow?: boolean;
/**
* The number of items to be shown (minimum of 4 unless props.items < 4).
*/
itemsShown?: number;
/**
* Whether user should be able to loop through the items when reaching first / last.
*/
loop?: boolean;
/**
* The callback function called when the current page changes.
*/
onChange?: (data: number) => void;
/**
* The index of current page.
*/
page?: number;
/**
* Specify the size of the PaginationNav.
*/
size?: 'sm' | 'md' | 'lg';
/**
* The total number of items.
*/
totalItems?: number;
}
declare const PaginationNav: React.ForwardRefExoticComponent<PaginationNavProps & React.RefAttributes<HTMLElement>>;
export default PaginationNav;