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 | 52x 3x 51x 6x 6x 51x 4x 4x 51x 3x 51x 129x 3x 51x 37x 37x 71x 37x 51x 14x 14x 14x 14x 14x 6x 14x 14x 14x 30x 14x 9x 14x 14x 51x 51x 51x | import React from "react";
import { Pagination } from "react-bootstrap";
export const emptyArray = () => []; // factored out for Stryker testing
const OurPagination = ({
updateActivePage,
totalPages = 10,
maxPages = 8,
testId = "OurPagination",
currentPage = 1,
}) => {
const nextPage = () => {
const newPage = Math.min(currentPage + 1, totalPages);
updateActivePage(newPage);
};
const prevPage = () => {
const newPage = Math.max(currentPage - 1, 1);
updateActivePage(newPage);
};
const thisPage = (page) => {
updateActivePage(page);
};
const pageButton = (number) => (
<Pagination.Item
key={number}
active={number === currentPage}
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 = currentPage > 3;
const rightEllipsis = currentPage < 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(currentPage - 1, 2);
let end = Math.min(currentPage + 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;
|