@carbon/react
Version:
React components for the Carbon Design System
303 lines (301 loc) • 12.4 kB
JavaScript
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const require_runtime = require("../../_virtual/_rolldown/runtime.js");
const require_usePrefix = require("../../internal/usePrefix.js");
const require_useId = require("../../internal/useId.js");
const require_index = require("../IconButton/index.js");
const require_usePreviousValue = require("../../internal/usePreviousValue.js");
const require_index$1 = require("../Select/index.js");
const require_index$2 = require("../SelectItem/index.js");
let classnames = require("classnames");
classnames = require_runtime.__toESM(classnames);
let react = require("react");
react = require_runtime.__toESM(react);
let prop_types = require("prop-types");
prop_types = require_runtime.__toESM(prop_types);
let react_jsx_runtime = require("react/jsx-runtime");
let _carbon_icons_react = require("@carbon/icons-react");
let react_fast_compare = require("react-fast-compare");
react_fast_compare = require_runtime.__toESM(react_fast_compare);
//#region src/components/Pagination/Pagination.tsx
/**
* Copyright IBM Corp. 2016, 2026
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
const isPaginationPageSizeArray = (sizes) => typeof sizes[0] === "object" && sizes[0] !== null;
const mapPageSizesToObject = (sizes) => {
if (isPaginationPageSizeArray(sizes)) return sizes;
return sizes.map((size) => ({
text: String(size),
value: size
}));
};
function renderSelectItems(total) {
let counter = 1;
const itemArr = [];
while (counter <= total) {
itemArr.push(/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
value: counter,
text: String(counter)
}, counter));
counter++;
}
return itemArr;
}
const getPageSize = (pageSizes, pageSize) => {
if (typeof pageSize !== "undefined") {
if (pageSizes.find((size) => {
return pageSize === size.value;
})) return pageSize;
}
return pageSizes[0].value;
};
const Pagination = react.default.forwardRef(({ backwardText = "Previous page", className: customClassName = "", disabled = false, forwardText = "Next page", id, isLastPage = false, itemText = (min, max) => `${min}–${max} items`, itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemsPerPageText = "Items per page:", onChange, pageNumberText: _pageNumberText, pageRangeText = (_current, total) => `of ${total} ${total === 1 ? "page" : "pages"}`, pageSelectLabelText = (total) => `Page of ${total} ${total === 1 ? "page" : "pages"}`, page: controlledPage = 1, pageInputDisabled, pageSize: controlledPageSize, pageSizeInputDisabled, pageSizes: controlledPageSizes, pageText = (page) => `page ${page}`, pagesUnknown = false, size = "md", totalItems, ...rest }, ref) => {
const prefix = require_usePrefix.usePrefix();
const inputId = require_useId.useFallbackId(id?.toString());
const backBtnRef = (0, react.useRef)(null);
const forwardBtnRef = (0, react.useRef)(null);
const pendingChangeRef = (0, react.useRef)(null);
const normalizedControlledPageSizes = (0, react.useMemo)(() => mapPageSizesToObject(controlledPageSizes), [controlledPageSizes]);
const prevControlledPageSize = require_usePreviousValue.usePreviousValue(controlledPageSize);
const prevControlledPageSizes = require_usePreviousValue.usePreviousValue(normalizedControlledPageSizes);
const [pageSizes, setPageSizes] = (0, react.useState)(normalizedControlledPageSizes);
const [page, setPage] = (0, react.useState)(controlledPage);
const [focusTarget, setFocusTarget] = (0, react.useState)(null);
const [pageSize, setPageSize] = (0, react.useState)(() => {
return getPageSize(normalizedControlledPageSizes, controlledPageSize);
});
const className = (0, classnames.default)({
[`${prefix}--pagination`]: true,
[`${prefix}--pagination--${size}`]: size,
[customClassName]: !!customClassName
});
const totalPages = totalItems ? Math.max(Math.ceil(totalItems / pageSize), 1) : 1;
const backButtonDisabled = disabled || page === 1;
const backButtonClasses = (0, classnames.default)({
[`${prefix}--pagination__button`]: true,
[`${prefix}--pagination__button--backward`]: true,
[`${prefix}--pagination__button--no-index`]: backButtonDisabled
});
const forwardButtonDisabled = disabled || page === totalPages && !pagesUnknown;
const forwardButtonClasses = (0, classnames.default)({
[`${prefix}--pagination__button`]: true,
[`${prefix}--pagination__button--forward`]: true,
[`${prefix}--pagination__button--no-index`]: forwardButtonDisabled
});
const selectItems = renderSelectItems(totalPages);
const focusMap = {
backward: backBtnRef,
forward: forwardBtnRef
};
const handleFocus = (target) => {
const targetRef = focusMap[target];
if (targetRef?.current && !targetRef.current.disabled) targetRef.current.focus();
};
(0, react.useEffect)(() => {
if (focusTarget) {
handleFocus(focusTarget);
setFocusTarget(null);
}
}, [focusTarget]);
(0, react.useEffect)(() => {
if (pendingChangeRef.current && onChange) {
onChange(pendingChangeRef.current);
pendingChangeRef.current = null;
}
}, [
onChange,
page,
pageSize
]);
(0, react.useEffect)(() => {
setPage(controlledPage);
}, [controlledPage]);
(0, react.useEffect)(() => {
if (typeof prevControlledPageSizes === "undefined" || (0, react_fast_compare.default)(prevControlledPageSizes, normalizedControlledPageSizes)) return;
setPageSizes((prev) => (0, react_fast_compare.default)(normalizedControlledPageSizes, prev) ? prev : normalizedControlledPageSizes);
const nextPageSize = getPageSize(normalizedControlledPageSizes, controlledPageSize ?? pageSize);
const hasPageSize = normalizedControlledPageSizes.some((size) => {
return size.value === pageSize;
});
const nextPage = hasPageSize ? page : 1;
const hasControlledPageSize = typeof controlledPageSize !== "undefined";
const hasValidControlledPageSize = hasControlledPageSize ? normalizedControlledPageSizes.some((size) => size.value === controlledPageSize) : false;
if (!hasPageSize) setPage(nextPage);
if (nextPageSize !== pageSize) setPageSize(nextPageSize);
if (onChange && (!hasControlledPageSize || !hasValidControlledPageSize) && (nextPage !== page || nextPageSize !== pageSize)) pendingChangeRef.current = {
page: nextPage,
pageSize: nextPageSize
};
}, [
controlledPageSize,
normalizedControlledPageSizes,
onChange,
page,
pageSize,
prevControlledPageSizes
]);
(0, react.useEffect)(() => {
if (controlledPageSize === prevControlledPageSize) return;
setPageSize(getPageSize(normalizedControlledPageSizes, controlledPageSize));
}, [
controlledPageSize,
normalizedControlledPageSizes,
prevControlledPageSize
]);
function handleSizeChange(event) {
const changes = {
pageSize: Number(event.target.value),
page: 1
};
setPage(changes.page);
setPageSize(changes.pageSize);
if (onChange) onChange(changes);
}
function handlePageInputChange(event) {
const page = Number(event.target.value);
if (page > 0 && totalItems && page <= Math.max(Math.ceil(totalItems / pageSize), 1)) {
setPage(page);
if (onChange) onChange({
page,
pageSize
});
}
}
function incrementPage() {
const nextPage = page + 1;
setPage(nextPage);
if (nextPage === totalPages) setFocusTarget("backward");
if (onChange) onChange({
page: nextPage,
pageSize,
ref: backBtnRef
});
}
function decrementPage() {
const nextPage = page - 1;
setPage(nextPage);
if (nextPage === 1) setFocusTarget("forward");
if (onChange) onChange({
page: nextPage,
pageSize,
ref: forwardBtnRef
});
}
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className,
ref,
...rest,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--pagination__left`,
children: [
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
id: `${prefix}-pagination-select-${inputId}-count-label`,
className: `${prefix}--pagination__text`,
htmlFor: `${prefix}-pagination-select-${inputId}`,
children: itemsPerPageText
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
id: `${prefix}-pagination-select-${inputId}`,
className: `${prefix}--select__item-count`,
labelText: "",
hideLabel: true,
noLabel: true,
inline: true,
onChange: handleSizeChange,
disabled: pageSizeInputDisabled || disabled,
value: pageSize,
children: pageSizes.map((sizeObj) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
value: sizeObj.value,
text: String(sizeObj.text)
}, sizeObj.value))
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--pagination__text ${prefix}--pagination__items-count`,
children: pagesUnknown || !totalItems ? totalItems === 0 ? itemRangeText(0, 0, 0) : itemText(pageSize * (page - 1) + 1, page * pageSize) : itemRangeText(Math.min(pageSize * (page - 1) + 1, totalItems), Math.min(page * pageSize, totalItems), totalItems)
})
]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--pagination__right`,
children: [pagesUnknown ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--pagination__text ${prefix}--pagination__page-text ${prefix}--pagination__unknown-pages-text`,
children: pageText(page)
}) : /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
id: `${prefix}-pagination-select-${inputId}-right`,
className: `${prefix}--select__page-number`,
labelText: pageSelectLabelText(totalPages),
inline: true,
hideLabel: true,
onChange: handlePageInputChange,
value: page,
disabled: pageInputDisabled || disabled,
children: selectItems
}, page), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${prefix}--pagination__text`,
children: pageRangeText(page, totalPages)
})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${prefix}--pagination__control-buttons`,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
align: "top",
disabled: backButtonDisabled,
kind: "ghost",
className: backButtonClasses,
label: backwardText,
"aria-label": backwardText,
onClick: decrementPage,
ref: backBtnRef,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CaretLeft, {})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
align: "top",
disabled: forwardButtonDisabled || isLastPage,
kind: "ghost",
className: forwardButtonClasses,
label: forwardText,
"aria-label": forwardText,
onClick: incrementPage,
ref: forwardBtnRef,
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CaretRight, {})
})]
})]
})]
});
});
Pagination.propTypes = {
backwardText: prop_types.default.string,
className: prop_types.default.string,
disabled: prop_types.default.bool,
forwardText: prop_types.default.string,
id: prop_types.default.oneOfType([prop_types.default.string, prop_types.default.number]),
isLastPage: prop_types.default.bool,
itemRangeText: prop_types.default.func,
itemText: prop_types.default.func,
itemsPerPageText: prop_types.default.string,
onChange: prop_types.default.func,
page: prop_types.default.number,
pageInputDisabled: prop_types.default.bool,
pageNumberText: prop_types.default.string,
pageRangeText: prop_types.default.func,
pageSelectLabelText: prop_types.default.func,
pageSize: prop_types.default.number,
pageSizeInputDisabled: prop_types.default.bool,
pageSizes: prop_types.default.oneOfType([prop_types.default.arrayOf(prop_types.default.number.isRequired), prop_types.default.arrayOf(prop_types.default.shape({
text: prop_types.default.string.isRequired,
value: prop_types.default.number.isRequired
}).isRequired)]).isRequired,
pageText: prop_types.default.func,
pagesUnknown: prop_types.default.bool,
size: prop_types.default.oneOf([
"sm",
"md",
"lg"
]),
totalItems: prop_types.default.number
};
//#endregion
exports.default = Pagination;