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 | 47x 4x 46x 46x 6x 6x 6x 46x 4x 4x 4x 46x 3x 3x 46x 125x 3x 46x 32x 32x 67x 32x 46x 14x 14x 14x 14x 14x 6x 14x 14x 14x 30x 14x 9x 14x 14x 46x 46x 46x | 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;
|