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 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 | 82x 4x 81x 81x 16x 16x 16x 81x 1x 1x 1x 81x 6x 6x 240x 6x 81x 50x 50x 65x 50x 81x 31x 31x 31x 18x 18x 18x 18x 18x 13x 2x 2x 2x 2x 2x 11x 11x 11x 11x 11x 31x 31x 81x 81x 81x | import React, { useState } from "react";
import { Pagination } from "react-bootstrap";
// eslint-disable-next-line react-refresh/only-export-components
export const emptyArray = () => []; // factored out for Stryker testing
const OurPagination = ({
updateActivePage,
totalPages = 10,
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 generateComplexPaginationItems = () => {
const paginationItems = emptyArray();
// Always show page 1 and totalPages
paginationItems.push(pageButton(1));
// Case 1: activePage is near the beginning (1, 2, 3, 4)
if (activePage < 5) {
paginationItems.push(pageButton(2));
paginationItems.push(pageButton(3));
paginationItems.push(pageButton(4));
paginationItems.push(pageButton(5));
paginationItems.push(
<Pagination.Ellipsis
key="right-ellipsis"
data-testid={`${testId}-right-ellipsis`}
/>,
);
}
// Case 2: activePage is near the end (totalPages - 3, totalPages - 2, totalPages - 1, totalPages)
else if (activePage > totalPages - 4) {
paginationItems.push(
<Pagination.Ellipsis
key="left-ellipsis"
data-testid={`${testId}-left-ellipsis`}
/>,
);
paginationItems.push(pageButton(totalPages - 4));
paginationItems.push(pageButton(totalPages - 3));
paginationItems.push(pageButton(totalPages - 2));
paginationItems.push(pageButton(totalPages - 1));
}
// Case 3: activePage is in the middle
else {
paginationItems.push(
<Pagination.Ellipsis
key="left-ellipsis"
data-testid={`${testId}-left-ellipsis`}
/>,
);
paginationItems.push(pageButton(activePage - 1));
paginationItems.push(pageButton(activePage));
paginationItems.push(pageButton(activePage + 1));
paginationItems.push(
<Pagination.Ellipsis
key="right-ellipsis"
data-testid={`${testId}-right-ellipsis`}
/>,
);
}
paginationItems.push(pageButton(totalPages));
return paginationItems;
};
const generatePaginationItems = () =>
totalPages <= 7
? generateSimplePaginationItems()
: generateComplexPaginationItems();
return (
<Pagination>
<Pagination.Prev onClick={prevPage} data-testid={`${testId}-prev`} />
{generatePaginationItems()}
<Pagination.Next onClick={nextPage} data-testid={`${testId}-next`} />
</Pagination>
);
};
export default OurPagination;
|