Mirrors/stash
1
0
Fork 0
mirror of https://github.com/stashapp/stash.git synced 2025-12-18 04:44:37 +03:00
Code Issues Packages Projects Releases Wiki Activity

Support patching Pagination and PaginationIndex (#5957)

Browse Source
This commit is contained in:
WithoutPants
2025-06-23 14:11:51 +10:00
committed by GitHub
parent f81f60e76f
commit 497146adc5
1 changed files with 103 additions and 102 deletions
Download Patch File Download Diff File Expand all files Collapse all files

205
ui/v2.5/src/components/List/Pagination.tsx
View File

@@ -14,6 +14,7 @@ import { Icon } from "../Shared/Icon";
import { faCheck, faChevronDown } from "@fortawesome/free-solid-svg-icons"; import { faCheck, faChevronDown } from "@fortawesome/free-solid-svg-icons";
import { useStopWheelScroll } from "src/utils/form"; import { useStopWheelScroll } from "src/utils/form";
import { Placement } from "react-bootstrap/esm/Overlay"; import { Placement } from "react-bootstrap/esm/Overlay";
import { PatchComponent } from "src/patch";
const PageCount: React.FC<{ const PageCount: React.FC<{
totalPages: number; totalPages: number;
@@ -158,114 +159,114 @@ interface IPaginationIndexProps {
const minPagesForCompact = 4; const minPagesForCompact = 4;
export const Pagination: React.FC<IPaginationProps> = ({ export const Pagination: React.FC<IPaginationProps> = PatchComponent(
itemsPerPage, "Pagination",
currentPage, ({
totalItems, itemsPerPage,
onChangePage, currentPage,
pagePopupPlacement, totalItems,
}) => { onChangePage,
const intl = useIntl(); pagePopupPlacement,
const totalPages = useMemo( }) => {
() => Math.ceil(totalItems / itemsPerPage), const intl = useIntl();
[totalItems, itemsPerPage] const totalPages = useMemo(
); () => Math.ceil(totalItems / itemsPerPage),
[totalItems, itemsPerPage]
);
const pageButtons = useMemo(() => { const pageButtons = useMemo(() => {
if (totalPages >= minPagesForCompact) if (totalPages >= minPagesForCompact)
return ( return (
<PageCount <PageCount
totalPages={totalPages} totalPages={totalPages}
currentPage={currentPage} currentPage={currentPage}
onChangePage={onChangePage} onChangePage={onChangePage}
pagePopupPlacement={pagePopupPlacement} pagePopupPlacement={pagePopupPlacement}
/> />
); );
const pages = [...Array(totalPages).keys()].map((i) => i + 1); const pages = [...Array(totalPages).keys()].map((i) => i + 1);
return pages.map((page: number) => ( return pages.map((page: number) => (
<Button <Button
variant="secondary" variant="secondary"
key={page} key={page}
active={currentPage === page} active={currentPage === page}
onClick={() => onChangePage(page)} onClick={() => onChangePage(page)}
> >
<FormattedNumber value={page} /> <FormattedNumber value={page} />
</Button> </Button>
)); ));
}, [totalPages, currentPage, onChangePage, pagePopupPlacement]); }, [totalPages, currentPage, onChangePage, pagePopupPlacement]);
if (totalPages <= 1) return <div />; if (totalPages <= 1) return <div />;
return ( return (
<ButtonGroup className="pagination"> <ButtonGroup className="pagination">
<Button <Button
variant="secondary" variant="secondary"
disabled={currentPage === 1} disabled={currentPage === 1}
onClick={() => onChangePage(1)} onClick={() => onChangePage(1)}
title={intl.formatMessage({ id: "pagination.first" })} title={intl.formatMessage({ id: "pagination.first" })}
> >
<span>«</span> <span>«</span>
</Button> </Button>
<Button <Button
variant="secondary" variant="secondary"
disabled={currentPage === 1} disabled={currentPage === 1}
onClick={() => onChangePage(currentPage - 1)} onClick={() => onChangePage(currentPage - 1)}
title={intl.formatMessage({ id: "pagination.previous" })} title={intl.formatMessage({ id: "pagination.previous" })}
> >
&lt; &lt;
</Button> </Button>
{pageButtons} {pageButtons}
<Button <Button
variant="secondary" variant="secondary"
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
onClick={() => onChangePage(currentPage + 1)} onClick={() => onChangePage(currentPage + 1)}
title={intl.formatMessage({ id: "pagination.next" })} title={intl.formatMessage({ id: "pagination.next" })}
> >
&gt; &gt;
</Button> </Button>
<Button <Button
variant="secondary" variant="secondary"
disabled={currentPage === totalPages} disabled={currentPage === totalPages}
onClick={() => onChangePage(totalPages)} onClick={() => onChangePage(totalPages)}
title={intl.formatMessage({ id: "pagination.last" })} title={intl.formatMessage({ id: "pagination.last" })}
> >
<span>»</span> <span>»</span>
</Button> </Button>
</ButtonGroup> </ButtonGroup>
); );
}; }
);
export const PaginationIndex: React.FC<IPaginationIndexProps> = ({ export const PaginationIndex: React.FC<IPaginationIndexProps> = PatchComponent(
loading, "PaginationIndex",
itemsPerPage, ({ loading, itemsPerPage, currentPage, totalItems, metadataByline }) => {
currentPage, const intl = useIntl();
totalItems,
metadataByline,
}) => {
const intl = useIntl();
if (loading) return null; if (loading) return null;
// Build the pagination index string // Build the pagination index string
const firstItemCount: number = Math.min( const firstItemCount: number = Math.min(
(currentPage - 1) * itemsPerPage + 1, (currentPage - 1) * itemsPerPage + 1,
totalItems totalItems
); );
const lastItemCount: number = Math.min( const lastItemCount: number = Math.min(
firstItemCount + (itemsPerPage - 1), firstItemCount + (itemsPerPage - 1),
totalItems totalItems
); );
const indexText: string = `${intl.formatNumber( const indexText: string = `${intl.formatNumber(
firstItemCount firstItemCount
)}-${intl.formatNumber(lastItemCount)} of ${intl.formatNumber(totalItems)}`; )}-${intl.formatNumber(lastItemCount)} of ${intl.formatNumber(totalItems)}`;
return ( return (
<span className="filter-container text-muted paginationIndex center-text"> <span className="filter-container text-muted paginationIndex center-text">
{indexText} {indexText}
<br /> <br />
{metadataByline} {metadataByline}
</span> </span>
); );
}; }
);