64 lines
2.2 KiB
TypeScript
64 lines
2.2 KiB
TypeScript
import React from 'react';
|
|
import { Icon, Tooltip } from 'UI';
|
|
import cn from 'classnames';
|
|
import { debounce } from 'App/utils';
|
|
import { numberWithCommas } from 'App/utils';
|
|
interface Props {
|
|
page: number;
|
|
totalPages: number;
|
|
onPageChange: (page: number) => void;
|
|
limit?: number;
|
|
debounceRequest?: number;
|
|
}
|
|
export default function Pagination(props: Props) {
|
|
const { page, totalPages, onPageChange, limit = 5, debounceRequest = 0 } = props;
|
|
const [currentPage, setCurrentPage] = React.useState(page);
|
|
React.useMemo(() => setCurrentPage(page), [page]);
|
|
|
|
const debounceChange = React.useCallback(debounce(onPageChange, debounceRequest), []);
|
|
|
|
const changePage = (page: number) => {
|
|
if (page > 0 && page <= totalPages) {
|
|
setCurrentPage(page);
|
|
debounceChange(page);
|
|
}
|
|
};
|
|
|
|
const isFirstPage = currentPage === 1;
|
|
const isLastPage = currentPage === totalPages;
|
|
return (
|
|
<div className="flex items-center">
|
|
<Tooltip title="Previous Page">
|
|
<button
|
|
className={cn('py-2 px-3', { 'opacity-50 cursor-default': isFirstPage })}
|
|
disabled={isFirstPage}
|
|
onClick={() => changePage(currentPage - 1)}
|
|
>
|
|
<Icon name="chevron-left" size="18" color={isFirstPage ? 'gray-medium' : 'teal'} />
|
|
</button>
|
|
</Tooltip>
|
|
<span className="mr-2 color-gray-medium">Page</span>
|
|
<input
|
|
type="number"
|
|
className={cn('py-1 px-2 bg-white border border-gray-light rounded w-16', {
|
|
'opacity-50 cursor-default': totalPages === 1,
|
|
})}
|
|
value={currentPage}
|
|
min={1}
|
|
max={totalPages ? totalPages : 1}
|
|
onChange={(e) => changePage(parseInt(e.target.value))}
|
|
/>
|
|
<span className="mx-3 color-gray-medium">of</span>
|
|
<span>{numberWithCommas(totalPages)}</span>
|
|
<Tooltip title="Next Page">
|
|
<button
|
|
className={cn('py-2 px-3', { 'opacity-50 cursor-default': isLastPage })}
|
|
disabled={isLastPage}
|
|
onClick={() => changePage(currentPage + 1)}
|
|
>
|
|
<Icon name="chevron-right" size="18" color={isLastPage ? 'gray-medium' : 'teal'} />
|
|
</button>
|
|
</Tooltip>
|
|
</div>
|
|
);
|
|
}
|