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 | 4x 83x 17x 17x 83x 2x 2x 83x 7x 246x 7x 83x 66x 83x 32x 18x 14x 2x 12x 32x 83x 83x 83x | import React from "react";
import { Pagination } from "react-bootstrap";
const OurPagination = ({
activePage = 1,
updateActivePage,
totalPages = 10,
testId = "OurPagination",
}) => {
const nextPage = () => {
const newPage = Math.min(activePage + 1, totalPages);
updateActivePage(newPage);
};
const prevPage = () => {
const newPage = Math.max(activePage - 1, 1);
updateActivePage(newPage);
};
const thisPage = (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 = () =>
Array.from({ length: totalPages }, (_, index) => pageButton(index + 1));
const generateComplexPaginationItems = () => {
let middleItems;
// Case 1: activePage is near the beginning (1, 2, 3, 4)
if (activePage < 5) {
middleItems = [
pageButton(2),
pageButton(3),
pageButton(4),
pageButton(5),
<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) {
middleItems = [
<Pagination.Ellipsis
key="left-ellipsis"
data-testid={`${testId}-left-ellipsis`}
/>,
pageButton(totalPages - 4),
pageButton(totalPages - 3),
pageButton(totalPages - 2),
pageButton(totalPages - 1),
];
}
// Case 3: activePage is in the middle
else {
middleItems = [
<Pagination.Ellipsis
key="left-ellipsis"
data-testid={`${testId}-left-ellipsis`}
/>,
pageButton(activePage - 1),
pageButton(activePage),
pageButton(activePage + 1),
<Pagination.Ellipsis
key="right-ellipsis"
data-testid={`${testId}-right-ellipsis`}
/>,
];
}
return [pageButton(1), ...middleItems, pageButton(totalPages)];
};
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;
|