@hitachivantara/uikit-react-core
Version:
Core React components for the NEXT Design System.
208 lines (207 loc) • 8.35 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const React = require("react");
const material = require("@mui/material");
const uikitReactUtils = require("@hitachivantara/uikit-react-utils");
const useLabels = require("../hooks/useLabels.cjs");
const icons = require("../icons.cjs");
const setId = require("../utils/setId.cjs");
const Pagination_styles = require("./Pagination.styles.cjs");
const Select = require("./Select.cjs");
const Typography = require("../Typography/Typography.cjs");
const IconButton = require("../IconButton/IconButton.cjs");
const Input = require("../Input/Input.cjs");
const defaultPageSizeOptions = [5, 10, 20, 25, 50, 100];
const DEFAULT_LABELS = {
/** The show label. */
pageSizePrev: "Show",
/** Indicate the units of the page size selection. */
pageSizeEntryName: "rows",
/** Used for the aria-label of the selection of number of unit.s */
pageSizeSelectorDescription: "Select how many to display",
/** Separator of current page and total pages. */
pagesSeparator: "/",
/** Title of button `firstPage`. @deprecated Use `firstPage` instead. */
paginationFirstPageTitle: "First page",
/** Title of button `previousPage`. @deprecated Use `previousPage` instead. */
paginationPreviousPageTitle: "Previous page",
/** Title of button `nextPage`. @deprecated Use `nextPage` instead. */
paginationNextPageTitle: "Next page",
/** Title of button `lastPage`. @deprecated Use `lastPage` instead. */
paginationLastPageTitle: "Last page",
/** Aria-label passed to the page input. */
paginationInputLabel: "Current page",
/** Label of the first page button */
firstPage: "First Page",
/** Label of the previous page button */
previousPage: "Previous Page",
/** Label of the next page button */
nextPage: "Next Page",
/** Label of the last page button */
lastPage: "Last Page"
};
const HvPagination = React.forwardRef(function HvPagination2(props, ref) {
const {
classes: classesProp,
className,
id,
pages = 1,
page = 0,
showPageSizeOptions = true,
pageSizeOptions = defaultPageSizeOptions,
pageSize = defaultPageSizeOptions[1],
showPageJump = true,
canPrevious = false,
canNext = false,
onPageChange,
onPageSizeChange,
labels: labelsProp,
showPageProps,
navigationProps,
currentPageInputProps,
...others
} = uikitReactUtils.useDefaultProps("HvPagination", props);
const { classes, cx } = Pagination_styles.useClasses(classesProp);
const labels = useLabels.useLabels(DEFAULT_LABELS, labelsProp);
const muiTheme = material.useTheme();
const isXsDown = material.useMediaQuery(muiTheme.breakpoints.down("xs"));
const [pageInput, setPageInput] = React.useState(page);
const changePage = React.useCallback(
(newPage) => {
const safePage = Number.isNaN(newPage) ? page : uikitReactUtils.clamp(newPage, pages - 1);
onPageChange?.(safePage);
setPageInput(safePage);
},
[page, pages, onPageChange]
);
React.useEffect(() => {
if (page >= pages && pages > 0) {
changePage(page);
}
}, [changePage, page, pages]);
React.useEffect(() => {
setPageInput(page);
}, [page]);
const renderPageJump = () => /* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageJump, children: /* @__PURE__ */ jsxRuntime.jsx(
Input.HvInput,
{
id: setId.setId(id, "currentPage"),
labels,
inputProps: {
"aria-label": labels?.paginationInputLabel,
// We really want the native number input
type: "number"
},
classes: {
root: classes?.pageSizeInputContainer,
input: classes?.pageSizeInput,
inputRoot: classes?.pageSizeInputRoot
},
value: String(pageInput + 1),
onChange: (event, value) => setPageInput(Number(value) - 1),
onBlur: (evt, value) => changePage(Math.round(Number(value)) - 1),
onEnter: (evt, value) => changePage(Math.round(Number(value)) - 1),
disabled: pageSize === 0,
disableClear: true,
...currentPageInputProps
}
) });
return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, id, className: cx(classes.root, className), ...others, children: [
/* @__PURE__ */ jsxRuntime.jsx("div", { className: classes.pageSizeOptions, ...showPageProps, children: showPageSizeOptions && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
!isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
component: "span",
className: classes?.pageSizeTextContainer,
children: labels?.pageSizePrev
}
),
/* @__PURE__ */ jsxRuntime.jsx(
Select.default,
{
id: setId.setId(id, "pageSize"),
disabled: pageSize === 0,
className: classes.pageSizeOptionsSelect,
"aria-label": labels?.pageSizeSelectorDescription,
onChange: (_, val) => onPageSizeChange?.(val),
value: pageSize,
classes: {
header: classes.pageSizeHeader,
root: classes.pageSizeRoot
},
children: pageSizeOptions.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Select.Option, { value: option, children: option }, option))
}
),
!isXsDown && /* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
component: "span",
className: classes.pageSizeTextContainer,
children: labels?.pageSizeEntryName
}
)
] }) }),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageNavigator, ...navigationProps, children: [
/* @__PURE__ */ jsxRuntime.jsx(
IconButton.HvIconButton,
{
id: setId.setId(id, "firstPage-button"),
className: classes.iconContainer,
disabled: !canPrevious,
onClick: () => changePage(0),
title: labels?.firstPage || labels?.paginationFirstPageTitle,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Start", className: classes.icon, size: "xs" })
}
),
/* @__PURE__ */ jsxRuntime.jsx(
IconButton.HvIconButton,
{
id: setId.setId(id, "previousPage-button"),
className: classes.iconContainer,
disabled: !canPrevious,
onClick: () => changePage(page - 1),
title: labels?.previousPage || labels?.paginationPreviousPageTitle,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Backwards", className: classes.icon, size: "xs" })
}
),
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: classes.pageInfo, children: [
showPageJump ? renderPageJump() : /* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { variant: "caption2", component: "span", children: `${page + 1}` }),
/* @__PURE__ */ jsxRuntime.jsx(Typography.HvTypography, { component: "span", children: `${labels?.pagesSeparator} ` }),
/* @__PURE__ */ jsxRuntime.jsx(
Typography.HvTypography,
{
component: "span",
id: setId.setId(id, "totalPages"),
className: classes.totalPagesTextContainer,
children: pages
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsx(
IconButton.HvIconButton,
{
id: setId.setId(id, "nextPage-button"),
className: classes.iconContainer,
disabled: !canNext,
onClick: () => changePage(page + 1),
title: labels?.nextPage || labels?.paginationNextPageTitle,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "Forwards", className: classes.icon, size: "xs" })
}
),
/* @__PURE__ */ jsxRuntime.jsx(
IconButton.HvIconButton,
{
id: setId.setId(id, "lastPage-button"),
className: classes.iconContainer,
disabled: !canNext,
onClick: () => changePage(pages - 1),
title: labels?.lastPage || labels?.paginationLastPageTitle,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.HvIcon, { name: "End", className: classes.icon, size: "xs" })
}
)
] })
] });
});
exports.paginationClasses = Pagination_styles.staticClasses;
exports.HvPagination = HvPagination;