@carbon/react
Version:
React components for the Carbon Design System
158 lines (156 loc) • 6.97 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_index = require("../../IconButton/index.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");
//#region src/components/Pagination/experimental/Pagination.js
/**
* Copyright IBM Corp. 2016, 2023
*
* This source code is licensed under the Apache-2.0 license found in the
* LICENSE file in the root directory of this source tree.
*/
function Pagination({ backwardText = "Previous page", children = void 0, className = null, disabled = false, forwardText = "Next page", id = 1, initialPage = 1, itemsPerPageText = "Items per page:", itemRangeText = (min, max, total) => `${min}–${max} of ${total} items`, itemText = (min, max) => `${min}–${max} items`, onChange, pageRangeText = (current, total) => `${current} of ${total} pages`, pageSize = 10, pageSizes = void 0, pageText = (page) => `page ${page}`, pagesUnknown = false, totalItems = void 0, ...other }) {
const [currentPage, setCurrentPage] = (0, react.useState)(initialPage);
const [currentPageSize, setCurrentPageSize] = (0, react.useState)(pageSize);
const prefix = require_usePrefix.usePrefix();
const totalPages = totalItems ? Math.max(Math.ceil(totalItems / currentPageSize), 1) : void 0;
const backButtonDisabled = disabled || currentPage === 1;
const forwardButtonDisabled = disabled || currentPage === totalPages;
function onSetPage(newPage) {
setCurrentPage(Number(newPage));
}
function incrementPage() {
const page = currentPage + 1;
setCurrentPage(page);
onChange({
page,
pageSize: currentPageSize
});
}
function decrementPage() {
const page = currentPage - 1;
setCurrentPage(page);
onChange({
page,
pageSize: currentPageSize
});
}
const namespace = `${prefix}--unstable-pagination`;
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("section", {
className: (0, classnames.default)(namespace, className),
...other,
children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${namespace}__left`,
children: [pageSizes && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("label", {
id: `${namespace}__page-sizer__counter-${id}`,
className: `${namespace}__text`,
htmlFor: `${namespace}__page-sizer__input-${id}`,
children: itemsPerPageText
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$1.default, {
id: `${namespace}__page-sizer__input-${id}`,
className: `${namespace}__page-sizer`,
labelText: "",
hideLabel: true,
noLabel: true,
inline: true,
onChange: (event) => {
const pageSize = Number(event.target.value);
const page = 1;
setCurrentPage(page);
setCurrentPageSize(pageSize);
if (onChange) onChange({
page,
pageSize
});
},
value: currentPageSize,
children: pageSizes.map((size) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index$2.default, {
value: size,
text: String(size)
}, size))
})] }), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
className: `${namespace}__text`,
children: [
totalItems && !pagesUnknown && itemRangeText(Math.min(currentPageSize * (currentPage - 1) + 1, totalItems), Math.min(currentPage * currentPageSize, totalItems), totalItems),
totalItems && pagesUnknown && itemText(currentPageSize * (currentPage - 1) + 1, currentPage * currentPageSize),
!totalItems && itemText(currentPageSize * (currentPage - 1) + 1, currentPage * currentPageSize)
]
})]
}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
className: `${namespace}__right`,
children: [
children && totalItems && children({
currentPage,
currentPageSize,
onSetPage,
totalPages
}),
children && totalItems && !pagesUnknown && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${namespace}__text`,
children: pageRangeText("", totalPages)
}),
children && !totalItems && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${namespace}__text`,
children: pageText(currentPage)
}),
!children && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
className: `${namespace}__text`,
children: !totalItems ? pageText(currentPage) : pageRangeText(currentPage, totalPages)
}),
/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
align: "top",
disabled: backButtonDisabled,
kind: "ghost",
className: (0, classnames.default)(`${namespace}__button`, `${namespace}__button--backward`, { [`${namespace}__button--no-index`]: backButtonDisabled }),
label: backwardText,
onClick: () => decrementPage(),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CaretLeft, {})
}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_index.IconButton, {
align: "top-right",
disabled: forwardButtonDisabled,
kind: "ghost",
className: (0, classnames.default)(`${namespace}__button`, `${namespace}__button--forward`, { [`${namespace}__button--no-index`]: forwardButtonDisabled }),
label: forwardText,
onClick: () => incrementPage(),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_carbon_icons_react.CaretRight, {})
})] })
]
})]
});
}
Pagination.propTypes = {
backwardText: prop_types.default.string,
children: prop_types.default.oneOfType([prop_types.default.node, prop_types.default.func]),
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]),
initialPage: prop_types.default.number,
itemRangeText: prop_types.default.func,
itemText: prop_types.default.func,
itemsPerPageText: prop_types.default.string,
onChange: prop_types.default.func,
pageRangeText: prop_types.default.func,
pageSize: prop_types.default.number,
pageSizes: prop_types.default.arrayOf(prop_types.default.number),
pageText: prop_types.default.func,
pagesUnknown: prop_types.default.bool,
totalItems: prop_types.default.number
};
//#endregion
exports.default = Pagination;