65 lines
1.3 KiB
TypeScript
65 lines
1.3 KiB
TypeScript
import { ReactEventHandler, useState } from "react";
|
|
export default function Pagination({ pages, onPageChange, currentPage }: any) {
|
|
const [page, setPage] = useState(currentPage);
|
|
const handleClick = (e: any) => {
|
|
const { value } = e.target;
|
|
let newPage;
|
|
|
|
if (isNaN(parseInt(value))) {
|
|
switch (value) {
|
|
case "<<":
|
|
// goto start
|
|
newPage = 0;
|
|
break;
|
|
case "<":
|
|
newPage = page - 1;
|
|
break;
|
|
case ">":
|
|
newPage = page + 1;
|
|
break;
|
|
case ">>":
|
|
//goto end
|
|
newPage = pages.length - 1;
|
|
break;
|
|
|
|
default:
|
|
break;
|
|
}
|
|
} else {
|
|
newPage = value;
|
|
}
|
|
|
|
setPage(newPage);
|
|
onPageChange(newPage);
|
|
};
|
|
|
|
// useEffect(() => {
|
|
// onPageChange(page);
|
|
// }, [page]);
|
|
|
|
const QuickLink = ({ value }: { value: string }) => {
|
|
return (
|
|
<a
|
|
href="#"
|
|
style={{ fontWeight: value == page ? "bold" : "normal" }}
|
|
// value={value}
|
|
onClick={handleClick}
|
|
>
|
|
{value}
|
|
</a>
|
|
);
|
|
};
|
|
|
|
return (
|
|
<>
|
|
<QuickLink value={"<<"} />
|
|
<QuickLink value={"<"} />
|
|
{pages.map((p: number) => (
|
|
<QuickLink value={p.toString()} />
|
|
))}
|
|
<QuickLink value={">"} />
|
|
<QuickLink value={">>"} />
|
|
</>
|
|
);
|
|
}
|