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 | 1x 1x 1x 30x 30x 30x 30x 30x 30x 16x 16x 16x 30x 1x 1x 1x 30x 6x 6x 30x 30x 30x 30x 30x 30x 30x 30x 7x 26x 7x 30x 23x 23x 23x 23x 11x 11x 11x 11x 11x 11x 11x 11x 11x 12x 5x 5x 5x 5x 5x 5x 5x 5x 5x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 23x 23x 23x 30x 30x 7x 23x 30x 30x 30x 30x 30x 30x 1x | import React from "react";
import { Pagination } from "react-bootstrap";
const OurPagination = ({
currentActivePage,
updateActivePage,
totalPages = 10,
testId = "OurPagination",
}) => {
const nextPage = () => {
const newPage = Math.min(currentActivePage + 1, totalPages);
updateActivePage(newPage);
};
const prevPage = () => {
const newPage = Math.max(currentActivePage - 1, 1);
updateActivePage(newPage);
};
const thisPage = (page) => {
updateActivePage(page);
};
const pageButton = (number) => (
<Pagination.Item
key={number}
active={number === currentActivePage}
onClick={() => thisPage(number)}
data-testid={`${testId}-${number}`}
>
{number}
</Pagination.Item>
);
const generateSimplePaginationItems = () => {
return Array.from({ length: totalPages }, (_, index) =>
pageButton(index + 1),
);
};
const generateComplexPaginationItems = () => {
// Always show page 1 and totalPages
const paginationItems = [pageButton(1)];
// Case 1: currentActivePage is near the beginning (1, 2, 3, 4)
if (currentActivePage < 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: currentActivePage is near the end (totalPages - 3, totalPages - 2, totalPages - 1, totalPages)
else if (currentActivePage > 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: currentActivePage is in the middle
else {
paginationItems.push(
<Pagination.Ellipsis
key="left-ellipsis"
data-testid={`${testId}-left-ellipsis`}
/>,
);
paginationItems.push(pageButton(currentActivePage - 1));
paginationItems.push(pageButton(currentActivePage));
paginationItems.push(pageButton(currentActivePage + 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;
|