@carbon/react
Version:
React components for the Carbon Design System
154 lines (152 loc) • 5.98 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.
*/
import { usePrefix } from "../../../internal/usePrefix.js";
import { IconButton } from "../../IconButton/index.js";
import Select_default from "../../Select/index.js";
import SelectItem_default from "../../SelectItem/index.js";
import classNames from "classnames";
import { useState } from "react";
import PropTypes from "prop-types";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { CaretLeft, CaretRight } from "@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] = useState(initialPage);
const [currentPageSize, setCurrentPageSize] = useState(pageSize);
const prefix = 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__ */ jsxs("section", {
className: classNames(namespace, className),
...other,
children: [/* @__PURE__ */ jsxs("div", {
className: `${namespace}__left`,
children: [pageSizes && /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("label", {
id: `${namespace}__page-sizer__counter-${id}`,
className: `${namespace}__text`,
htmlFor: `${namespace}__page-sizer__input-${id}`,
children: itemsPerPageText
}), /* @__PURE__ */ jsx(Select_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__ */ jsx(SelectItem_default, {
value: size,
text: String(size)
}, size))
})] }), /* @__PURE__ */ 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__ */ jsxs("div", {
className: `${namespace}__right`,
children: [
children && totalItems && children({
currentPage,
currentPageSize,
onSetPage,
totalPages
}),
children && totalItems && !pagesUnknown && /* @__PURE__ */ jsx("span", {
className: `${namespace}__text`,
children: pageRangeText("", totalPages)
}),
children && !totalItems && /* @__PURE__ */ jsx("span", {
className: `${namespace}__text`,
children: pageText(currentPage)
}),
!children && /* @__PURE__ */ jsx("span", {
className: `${namespace}__text`,
children: !totalItems ? pageText(currentPage) : pageRangeText(currentPage, totalPages)
}),
/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(IconButton, {
align: "top",
disabled: backButtonDisabled,
kind: "ghost",
className: classNames(`${namespace}__button`, `${namespace}__button--backward`, { [`${namespace}__button--no-index`]: backButtonDisabled }),
label: backwardText,
onClick: () => decrementPage(),
children: /* @__PURE__ */ jsx(CaretLeft, {})
}), /* @__PURE__ */ jsx(IconButton, {
align: "top-right",
disabled: forwardButtonDisabled,
kind: "ghost",
className: classNames(`${namespace}__button`, `${namespace}__button--forward`, { [`${namespace}__button--no-index`]: forwardButtonDisabled }),
label: forwardText,
onClick: () => incrementPage(),
children: /* @__PURE__ */ jsx(CaretRight, {})
})] })
]
})]
});
}
Pagination.propTypes = {
backwardText: PropTypes.string,
children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
className: PropTypes.string,
disabled: PropTypes.bool,
forwardText: PropTypes.string,
id: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
initialPage: PropTypes.number,
itemRangeText: PropTypes.func,
itemText: PropTypes.func,
itemsPerPageText: PropTypes.string,
onChange: PropTypes.func,
pageRangeText: PropTypes.func,
pageSize: PropTypes.number,
pageSizes: PropTypes.arrayOf(PropTypes.number),
pageText: PropTypes.func,
pagesUnknown: PropTypes.bool,
totalItems: PropTypes.number
};
//#endregion
export { Pagination as default };