@conduction/components
Version:
React (Gatsby) components used within the Conduction Skeleton Application (and its implementations)
36 lines (35 loc) • 2.43 kB
JavaScript
import { Fragment as _Fragment, jsx as _jsx } from "react/jsx-runtime";
import * as React from "react";
import * as styles from "./Pagination.module.css";
import clsx from "clsx";
import ReactPaginate from "react-paginate";
import { Button } from "@utrecht/component-library-react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faChevronRight, faChevronLeft } from "@fortawesome/free-solid-svg-icons";
export const Pagination = ({ totalPages, currentPage, setCurrentPage, ariaLabels, layoutClassName, }) => {
if (totalPages < 1)
return _jsx(_Fragment, {}); // no pages available
const setAttributes = () => {
const setRoleToPresentation = (selector) => {
document.querySelectorAll(selector).forEach((element) => {
if (element.getAttribute("role") !== "list")
element.setAttribute("role", "list");
});
};
setRoleToPresentation('ul[role*="navigation"][class*="Pagination"][aria-label="Pagination"]');
};
React.useEffect(() => {
setAttributes();
}, []);
React.useEffect(() => {
const setRoleToPresentation = (selector) => {
document.querySelectorAll(selector).forEach((element) => {
if (element.getAttribute("aria-label") !== ariaLabels.pagination) {
element.setAttribute("aria-label", ariaLabels.pagination);
}
});
};
setRoleToPresentation('ul[role*="list"][class*="Pagination"]');
}, [ariaLabels.pagination]);
return (_jsx(ReactPaginate, { className: clsx(styles.container, layoutClassName && layoutClassName), disabledClassName: styles.disabled, activeClassName: styles.currentPage, onPageChange: (e) => setCurrentPage(e.selected + 1), forcePage: currentPage - 1, pageRangeDisplayed: 3, pageCount: totalPages, disableInitialCallback: true, marginPagesDisplayed: 2, breakLabel: "...", nextClassName: styles.next, previousClassName: styles.previous, nextAriaLabel: ariaLabels.nextPage, previousAriaLabel: ariaLabels.previousPage, ariaLabelBuilder: (currentPage) => `${ariaLabels.page} ${currentPage}`, nextLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronRight }) }), previousLabel: _jsx(Button, { tabIndex: -1, className: styles.button, children: _jsx(FontAwesomeIcon, { icon: faChevronLeft }) }) }));
};