Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 | 20x 2x 19x 19x 6x 6x 6x 19x 4x 4x 4x 19x 2x 2x 19x 75x 2x 19x 5x 5x 17x 5x 19x 14x 14x 14x 14x 14x 6x 14x 14x 14x 30x 14x 9x 14x 14x 19x 19x 19x | import React, { useState } from "react";
import { Pagination } from "react-bootstrap";
export const emptyArray = () => []; // factored out for Stryker testing
const OurPagination = ({
updateActivePage,
totalPages = 10,
maxPages = 8,
testId = "OurPagination",
}) => {
const [activePage, setActivePage] = useState(1);
const nextPage = () => {
const newPage = Math.min(activePage + 1, totalPages);
setActivePage(newPage);
updateActivePage(newPage);
};
const prevPage = () => {
const newPage = Math.max(activePage - 1, 1);
setActivePage(newPage);
updateActivePage(newPage);
};
const thisPage = (page) => {
setActivePage(page);
updateActivePage(page);
};
const pageButton = (number) => (
<Pagination.Item
key={number}
active={number === activePage}
onClick={() => thisPage(number)}
data-testid={`${testId}-${number}`}
>
{number}
</Pagination.Item>
);
const generateSimplePaginationItems = () => {
const paginationItems = emptyArray();
for (let number = 1; number <= totalPages; number++) {
paginationItems.push(pageButton(number));
}
return paginationItems;
};
const generatePaginationItemsWithEllipsis = () => {
const paginationItems = emptyArray();
const leftEllipsis = activePage > 3;
const rightEllipsis = activePage < totalPages - 2;
paginationItems.push(pageButton(1));
if (leftEllipsis) {
paginationItems.push(
<Pagination.Ellipsis
key="left-ellipsis"
data-testid={`${testId}-left-ellipsis`}
/>,
);
}
// Show a range of pages around the active page
let start = Math.max(activePage - 1, 2);
let end = Math.min(activePage + 1, totalPages - 1);
for (let number = start; number <= end; number++) {
paginationItems.push(pageButton(number));
}
if (rightEllipsis) {
paginationItems.push(
<Pagination.Ellipsis
key="right-ellipsis"
data-testid={`${testId}-right-ellipsis`}
/>,
);
}
paginationItems.push(pageButton(totalPages));
return paginationItems;
};
const generatePaginationItems = () =>
totalPages <= maxPages
? generateSimplePaginationItems()
: generatePaginationItemsWithEllipsis();
return (
<Pagination>
<Pagination.Prev onClick={prevPage} data-testid={`${testId}-prev`} />
{generatePaginationItems()}
<Pagination.Next onClick={nextPage} data-testid={`${testId}-next`} />
</Pagination>
);
};
export default OurPagination;
|