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 | 11x 11x 11x 11x 152x 152x 152x 641x 175x 466x 175x 291x 152x 73x 152x 3x 3x 3x 3x 152x 11x | import { ConfigProvider, Pagination, PaginationProps, Space } from "antd";
import { useEffect, useState } from "react";
import { useSearchParams } from "react-router-dom";
interface Props {
totalItems: number;
pageSize?: number;
handleChange?: (page: number) => void;
currentPageNumber?: number;
}
const CustomPagination: React.FC<Props> = ({
totalItems,
pageSize,
handleChange,
currentPageNumber,
}) => {
const [searchParams, setSearchParams] = useSearchParams();
const [currentPage, setCurrentPage] = useState<number>(
currentPageNumber || Number(searchParams.get("page") || 1)
);
const itemRender: PaginationProps["itemRender"] = (
_,
type,
originalElement
) => {
if (type === "prev") {
return <a>Previous</a>;
}
if (type === "next") {
return <a>Next</a>;
}
return originalElement;
};
useEffect(() => {
setCurrentPage(Number(searchParams.get("page") || 1));
}, [searchParams]);
const handleOnChange = (page: number) => {
setSearchParams((p) => {
p.set("page", String(page));
return p;
});
setCurrentPage(page);
};
return (
<Space.Compact>
<ConfigProvider
theme={{
components: {
Pagination: {
colorPrimary: "#CF2338",
colorPrimaryBorder: "#E9424D",
colorPrimaryHover: "#CF2338",
},
},
}}
>
<Pagination
current={currentPage}
total={totalItems}
pageSize={pageSize || 20}
onChange={
handleChange
? (page) => {
handleChange(page);
setCurrentPage(page);
}
: handleOnChange
}
showSizeChanger={false}
showQuickJumper={false}
showPrevNextJumpers={false}
itemRender={itemRender}
/>
</ConfigProvider>
</Space.Compact>
);
};
export default CustomPagination;
|