64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
|
import { Input } from "@/components/ui/input";
|
||
|
|
import { type ChangeEvent, type KeyboardEvent, useState } from "react";
|
||
|
|
import { MdNavigateBefore, MdNavigateNext } from "react-icons/md";
|
||
|
|
|
||
|
|
export const Pagination = (props: {
|
||
|
|
pageNumber: number;
|
||
|
|
pageAmount: number;
|
||
|
|
onGotoNextPage: (nextPage: number) => any;
|
||
|
|
onGotoPrevPage: (prevPage: number) => any;
|
||
|
|
onJumpToSpecPage: (pageNum: number) => any;
|
||
|
|
}) => {
|
||
|
|
const [pageNumberInput, setPageNumberInput] = useState<string>(props.pageNumber.toString());
|
||
|
|
|
||
|
|
const handleEnterKeyJump = (event: KeyboardEvent<HTMLInputElement>) => {
|
||
|
|
setPageNumberInput(pageNumberInput.replace(/[^\d]/g, ""));
|
||
|
|
if (Number.parseInt(pageNumberInput) > 0 && Number.parseInt(pageNumberInput) < props.pageAmount + 1) {
|
||
|
|
(event.key === "Go" || event.key === "Enter") && props.onJumpToSpecPage(Number.parseInt(pageNumberInput));
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
};
|
||
|
|
|
||
|
|
const handleInputPageNumber = (event: ChangeEvent<HTMLInputElement>) => {
|
||
|
|
setPageNumberInput(event.target.value);
|
||
|
|
};
|
||
|
|
|
||
|
|
return (
|
||
|
|
<div className="my-5 flex justify-between font-bold text-base rtl:flex-row-reverse">
|
||
|
|
{props.pageNumber !== 1 && (
|
||
|
|
<Button
|
||
|
|
className="rounded-full"
|
||
|
|
onClick={() => {
|
||
|
|
setPageNumberInput((props.pageNumber - 1).toString());
|
||
|
|
props.onGotoPrevPage(props.pageNumber - 1);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<MdNavigateBefore className="text-3xl" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
<div className="my-auto flex justify-center font-bold">
|
||
|
|
<Input
|
||
|
|
className="mx-2 my-auto h-6 w-11"
|
||
|
|
onChange={handleInputPageNumber}
|
||
|
|
onKeyDown={handleEnterKeyJump}
|
||
|
|
title="Type the specified page number and press Enter to jump."
|
||
|
|
value={pageNumberInput}
|
||
|
|
/>
|
||
|
|
<div className="my-auto">{` / ${props.pageAmount}`}</div>
|
||
|
|
</div>
|
||
|
|
{props.pageNumber !== props.pageAmount && (
|
||
|
|
<Button
|
||
|
|
className="rounded-full"
|
||
|
|
onClick={() => {
|
||
|
|
setPageNumberInput((props.pageNumber + 1).toString());
|
||
|
|
props.onGotoNextPage(props.pageNumber + 1);
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<MdNavigateNext className="text-3xl" />
|
||
|
|
</Button>
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
);
|
||
|
|
};
|