Fascinated/scoresaber-reloadedv3
Archived
1
1
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Activity

use the new prettier config and add a network offline loader
Some checks failed
Deploy / deploy (push) Failing after 2m17s
Details

Browse Source
This commit is contained in:
Lee
2024-09-30 22:16:55 +01:00
parent f32c329eb1
commit f38925c113
69 changed files with 517 additions and 1118 deletions
Download Patch File Download Diff File Expand all files Collapse all files

75
src/components/input/pagination.tsx
View File

@ -23,10 +23,7 @@ type PaginationItemWrapperProps = {
children: React.ReactNode;
};
function PaginationItemWrapper({
isLoadingPage,
children,
}: PaginationItemWrapperProps) {
function PaginationItemWrapper({ isLoadingPage, children }: PaginationItemWrapperProps) {
return (
<PaginationItem
className={clsx(isLoadingPage ? "cursor-not-allowed" : "cursor-pointer")}
@ -65,13 +62,7 @@ type Props = {
onPageChange: (page: number) => void;
};
export default function Pagination({
mobilePagination,
page,
totalPages,
loadingPage,
onPageChange,
}: Props) {
export default function Pagination({ mobilePagination, page, totalPages, loadingPage, onPageChange }: Props) {
totalPages = Math.round(totalPages);
const isLoading = loadingPage !== undefined;
const [currentPage, setCurrentPage] = useState(page);
@ -81,12 +72,7 @@ export default function Pagination({
}, [page]);
const handlePageChange = (newPage: number) => {
if (
newPage < 1 ||
newPage > totalPages ||
newPage == currentPage ||
isLoading
) {
if (newPage < 1 || newPage > totalPages || newPage == currentPage || isLoading) {
return;
}
@ -109,20 +95,15 @@ export default function Pagination({
pageNumbers.push(
<>
<PaginationItemWrapper key="start" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(1)}>
1
</PaginationLink>
<PaginationLink onClick={() => handlePageChange(1)}>1</PaginationLink>
</PaginationItemWrapper>
{/* Only show ellipsis if more than 2 pages from the start */}
{startPage > 2 && (
<PaginationItemWrapper
key="ellipsis-start"
isLoadingPage={isLoading}
>
<PaginationItemWrapper key="ellipsis-start" isLoadingPage={isLoading}>
<PaginationEllipsis />
</PaginationItemWrapper>
)}
</>,
</>
);
}
@ -130,17 +111,10 @@ export default function Pagination({
for (let i = startPage; i <= endPage; i++) {
pageNumbers.push(
<PaginationItemWrapper key={i} isLoadingPage={isLoading}>
<PaginationLink
isActive={i === currentPage}
onClick={() => handlePageChange(i)}
>
{loadingPage === i ? (
<ArrowPathIcon className="w-4 h-4 animate-spin" />
) : (
i
)}
<PaginationLink isActive={i === currentPage} onClick={() => handlePageChange(i)}>
{loadingPage === i ? <ArrowPathIcon className="w-4 h-4 animate-spin" /> : i}
</PaginationLink>
</PaginationItemWrapper>,
</PaginationItemWrapper>
);
}
@ -152,31 +126,22 @@ export default function Pagination({
<PaginationContent>
{/* Previous button for mobile and desktop */}
<PaginationItemWrapper isLoadingPage={isLoading}>
<PaginationPrevious
onClick={() => handlePageChange(currentPage - 1)}
/>
<PaginationPrevious onClick={() => handlePageChange(currentPage - 1)} />
</PaginationItemWrapper>
{renderPageNumbers()}
{/* For desktop, show ellipsis and link to the last page */}
{!mobilePagination &&
currentPage < totalPages &&
totalPages - currentPage > 2 && (
<>
<PaginationItemWrapper
key="ellipsis-end"
isLoadingPage={isLoading}
>
<PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
<PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(totalPages)}>
{totalPages}
</PaginationLink>
</PaginationItemWrapper>
</>
)}
{!mobilePagination && currentPage < totalPages && totalPages - currentPage > 2 && (
<>
<PaginationItemWrapper key="ellipsis-end" isLoadingPage={isLoading}>
<PaginationEllipsis className="cursor-default" />
</PaginationItemWrapper>
<PaginationItemWrapper key="end" isLoadingPage={isLoading}>
<PaginationLink onClick={() => handlePageChange(totalPages)}>{totalPages}</PaginationLink>
</PaginationItemWrapper>
</>
)}
{/* Next button for mobile and desktop */}
<PaginationItemWrapper isLoadingPage={isLoading}>