@octopusdeploy/design-system-components
Version:
The design systems component library.
58 lines (57 loc) • 4.33 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Pagination = Pagination;
const jsx_runtime_1 = require("react/jsx-runtime");
const css_1 = require("@emotion/css");
const design_system_icons_1 = require("@octopusdeploy/design-system-icons");
const design_system_tokens_1 = require("@octopusdeploy/design-system-tokens");
const Button_1 = require("../Button");
const Menu_1 = require("../Menu");
function Pagination({ label, currentPage, itemsPerPageOptions, selectedItemsPerPage, onPageChange, onPageSizeChange, ...props }) {
const [openMenu, menuState, buttonAriaAttributes] = (0, Menu_1.useMenuState)();
const hasTotalResults = props.totalResults !== "unknown";
const pageStart = Math.min((currentPage - 1) * selectedItemsPerPage + 1, hasTotalResults ? props.totalResults : Infinity);
const pageEnd = Math.min(currentPage * selectedItemsPerPage, hasTotalResults ? props.totalResults : Infinity);
const totalResultsText = hasTotalResults ? `${pageStart} - ${pageEnd} of ${props.totalResults} ${label}` : `${pageStart} - ${pageEnd} ${label}`;
const previousIsDisabled = currentPage === 1;
const nextIsDisabled = hasTotalResults ? currentPage * selectedItemsPerPage >= props.totalResults : !props.hasMoreResults;
const hasPageSizeOptions = itemsPerPageOptions.length > 0;
const defaultValue = itemsPerPageOptions[0];
const pageSizeIsDisabled = !hasPageSizeOptions || (hasTotalResults ? props.totalResults <= defaultValue : true);
const pagingButtonsAreDisabled = previousIsDisabled && nextIsDisabled;
const menuItems = [];
menuItems.push({
type: "information",
content: (0, jsx_runtime_1.jsxs)("p", { className: resultsPerPageMenuItemStyles, children: [label, " per page"] }),
});
itemsPerPageOptions.map((itemsPerPage) => {
menuItems.push({
type: "button",
label: `${itemsPerPage}`,
onClick: () => onPageSizeChange(itemsPerPage),
isSelected: itemsPerPage === selectedItemsPerPage,
});
});
return ((0, jsx_runtime_1.jsxs)("div", { className: paginationWrapper, children: [(0, jsx_runtime_1.jsx)("div", { className: "tracker-pagination", children: !hasTotalResults || pageSizeIsDisabled ? ((0, jsx_runtime_1.jsx)("p", { className: (0, css_1.cx)(textOnlyResultsPerPageStyles, { [disabledTextOnlyResultsPerPageStyles]: pagingButtonsAreDisabled }), children: totalResultsText })) : ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { importance: "quiet", ...buttonAriaAttributes, showExpandCollapseIcon: false, disabled: pageSizeIsDisabled, accessibleName: totalResultsText, label: totalResultsText, onClick: openMenu }), hasTotalResults && menuState.isOpen && (0, jsx_runtime_1.jsx)(Menu_1.SimpleMenu, { compact: true, menuState: menuState, items: menuItems, accessibleName: "Change page size" })] })) }), (0, jsx_runtime_1.jsx)("div", { className: iconButtonWrapper, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => onPageChange(currentPage - 1), importance: "ghost", accessibleName: "Previous", disabled: previousIsDisabled, icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ChevronLeftIcon, { size: 20 }) }) }), (0, jsx_runtime_1.jsx)("div", { className: iconButtonWrapper, children: (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: () => onPageChange(currentPage + 1), importance: "ghost", accessibleName: "Next", disabled: nextIsDisabled, icon: (0, jsx_runtime_1.jsx)(design_system_icons_1.ChevronRightIcon, { size: 20 }) }) })] }));
}
const resultsPerPageMenuItemStyles = (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.medium,
margin: 0,
});
const textOnlyResultsPerPageStyles = (0, css_1.css)({
font: design_system_tokens_1.text.body.bold.medium,
color: design_system_tokens_1.themeTokens.color.text.info,
margin: 0,
width: "max-content",
});
const disabledTextOnlyResultsPerPageStyles = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.text.tertiary,
});
const paginationWrapper = (0, css_1.css)({
display: "flex",
alignItems: "center",
gap: design_system_tokens_1.space[2],
});
const iconButtonWrapper = (0, css_1.css)({
color: design_system_tokens_1.themeTokens.color.button.text.quiet,
});