add disabled cursor on first and last page of the pagination
All checks were successful
Deploy / deploy (push) Successful in 5m51s
All checks were successful
Deploy / deploy (push) Successful in 5m51s
This commit is contained in:
parent
dc7644876b
commit
903c49af7b
@ -94,6 +94,11 @@ export default function Pagination({
|
|||||||
|
|
||||||
const handleLinkClick = (newPage: number, event: React.MouseEvent) => {
|
const handleLinkClick = (newPage: number, event: React.MouseEvent) => {
|
||||||
event.preventDefault(); // Prevent default navigation behavior
|
event.preventDefault(); // Prevent default navigation behavior
|
||||||
|
|
||||||
|
// Check if the new page is valid
|
||||||
|
if (newPage < 1 || newPage > totalPages || newPage === currentPage || isLoading) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
handlePageChange(newPage);
|
handlePageChange(newPage);
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -107,7 +112,6 @@ export default function Pagination({
|
|||||||
startPage = Math.max(1, endPage - maxPagesToShow + 1);
|
startPage = Math.max(1, endPage - maxPagesToShow + 1);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Show "Jump to Start" with Ellipsis if currentPage is greater than 3 in desktop view
|
|
||||||
if (startPage > 1 && !mobilePagination) {
|
if (startPage > 1 && !mobilePagination) {
|
||||||
pageNumbers.push(
|
pageNumbers.push(
|
||||||
<>
|
<>
|
||||||
@ -116,7 +120,6 @@ export default function Pagination({
|
|||||||
1
|
1
|
||||||
</PaginationLink>
|
</PaginationLink>
|
||||||
</PaginationItemWrapper>
|
</PaginationItemWrapper>
|
||||||
{/* Only show ellipsis if more than 2 pages from the start */}
|
|
||||||
{startPage > 2 && (
|
{startPage > 2 && (
|
||||||
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
|
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
|
||||||
<PaginationEllipsis />
|
<PaginationEllipsis />
|
||||||
@ -126,7 +129,6 @@ export default function Pagination({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
// Generate page numbers between startPage and endPage for desktop view
|
|
||||||
for (let i = startPage; i <= endPage; i++) {
|
for (let i = startPage; i <= endPage; i++) {
|
||||||
pageNumbers.push(
|
pageNumbers.push(
|
||||||
<PaginationItemWrapper key={i} isLoadingPage={isLoading}>
|
<PaginationItemWrapper key={i} isLoadingPage={isLoading}>
|
||||||
@ -147,17 +149,18 @@ export default function Pagination({
|
|||||||
return (
|
return (
|
||||||
<ShadCnPagination className="select-none">
|
<ShadCnPagination className="select-none">
|
||||||
<PaginationContent>
|
<PaginationContent>
|
||||||
{/* Previous button for mobile and desktop */}
|
{/* Previous button - disabled on the first page */}
|
||||||
<PaginationItemWrapper isLoadingPage={isLoading}>
|
<PaginationItemWrapper isLoadingPage={isLoading}>
|
||||||
<PaginationPrevious
|
<PaginationPrevious
|
||||||
href={generatePageUrl ? generatePageUrl(currentPage - 1) : ""}
|
href={currentPage > 1 && generatePageUrl ? generatePageUrl(currentPage - 1) : ""}
|
||||||
onClick={e => handleLinkClick(currentPage - 1, e)}
|
onClick={e => handleLinkClick(currentPage - 1, e)}
|
||||||
|
aria-disabled={currentPage === 1}
|
||||||
|
className={clsx(currentPage === 1 && "cursor-not-allowed")}
|
||||||
/>
|
/>
|
||||||
</PaginationItemWrapper>
|
</PaginationItemWrapper>
|
||||||
|
|
||||||
{renderPageNumbers()}
|
{renderPageNumbers()}
|
||||||
|
|
||||||
{/* For desktop, show ellipsis and link to the last page */}
|
|
||||||
{!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
|
{!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
|
||||||
<>
|
<>
|
||||||
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
|
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
|
||||||
@ -174,11 +177,13 @@ export default function Pagination({
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Next button for mobile and desktop */}
|
{/* Next button - disabled on the last page */}
|
||||||
<PaginationItemWrapper isLoadingPage={isLoading}>
|
<PaginationItemWrapper isLoadingPage={isLoading}>
|
||||||
<PaginationNext
|
<PaginationNext
|
||||||
href={generatePageUrl ? generatePageUrl(currentPage + 1) : ""}
|
href={currentPage < totalPages && generatePageUrl ? generatePageUrl(currentPage + 1) : ""}
|
||||||
onClick={e => handleLinkClick(currentPage + 1, e)}
|
onClick={e => handleLinkClick(currentPage + 1, e)}
|
||||||
|
aria-disabled={currentPage === totalPages}
|
||||||
|
className={clsx(currentPage === totalPages && "cursor-not-allowed")}
|
||||||
/>
|
/>
|
||||||
</PaginationItemWrapper>
|
</PaginationItemWrapper>
|
||||||
</PaginationContent>
|
</PaginationContent>
|
||||||
|
Reference in New Issue
Block a user