2022-06-05 22:35:53 +00:00
|
|
|
import { PaginationDataSet } from '@/api/http';
|
|
|
|
import classNames from 'classnames';
|
|
|
|
import { Button } from '@/components/elements/button/index';
|
|
|
|
import { ChevronDoubleLeftIcon, ChevronDoubleRightIcon } from '@heroicons/react/solid';
|
|
|
|
|
|
|
|
interface Props {
|
|
|
|
className?: string;
|
|
|
|
pagination: PaginationDataSet;
|
|
|
|
onPageSelect: (page: number) => void;
|
|
|
|
}
|
|
|
|
|
|
|
|
const PaginationFooter = ({ pagination, className, onPageSelect }: Props) => {
|
|
|
|
const start = (pagination.currentPage - 1) * pagination.perPage;
|
2022-06-26 19:13:52 +00:00
|
|
|
const end = (pagination.currentPage - 1) * pagination.perPage + pagination.count;
|
2022-06-05 22:35:53 +00:00
|
|
|
|
|
|
|
const { currentPage: current, totalPages: total } = pagination;
|
|
|
|
|
|
|
|
const pages = { previous: [] as number[], next: [] as number[] };
|
|
|
|
for (let i = 1; i <= 2; i++) {
|
|
|
|
if (current - i >= 1) {
|
|
|
|
pages.previous.push(current - i);
|
|
|
|
}
|
|
|
|
if (current + i <= total) {
|
|
|
|
pages.next.push(current + i);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2022-06-18 19:48:22 +00:00
|
|
|
if (pagination.total === 0) {
|
|
|
|
return null;
|
|
|
|
}
|
|
|
|
|
2022-06-20 16:38:23 +00:00
|
|
|
const buttonProps = (page: number) => ({
|
|
|
|
size: Button.Sizes.Small,
|
|
|
|
shape: Button.Shapes.IconSquare,
|
|
|
|
variant: Button.Variants.Secondary,
|
|
|
|
onClick: () => onPageSelect(page),
|
|
|
|
});
|
|
|
|
|
2022-06-05 22:35:53 +00:00
|
|
|
return (
|
2023-01-12 19:31:47 +00:00
|
|
|
<div className={classNames('my-2 flex items-center justify-between', className)}>
|
2022-06-05 22:35:53 +00:00
|
|
|
<p className={'text-sm text-neutral-500'}>
|
|
|
|
Showing
|
|
|
|
<span className={'font-semibold text-neutral-400'}>
|
|
|
|
{Math.max(start, Math.min(pagination.total, 1))}
|
2022-06-26 19:13:52 +00:00
|
|
|
</span>
|
|
|
|
to
|
2022-06-05 22:35:53 +00:00
|
|
|
<span className={'font-semibold text-neutral-400'}>{end}</span> of
|
|
|
|
<span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
|
|
|
|
</p>
|
2022-06-26 19:13:52 +00:00
|
|
|
{pagination.totalPages > 1 && (
|
2022-06-05 22:35:53 +00:00
|
|
|
<div className={'flex space-x-1'}>
|
2022-06-20 16:38:23 +00:00
|
|
|
<Button.Text {...buttonProps(1)} disabled={pages.previous.length !== 2}>
|
2023-01-12 19:31:47 +00:00
|
|
|
<ChevronDoubleLeftIcon className={'h-3 w-3'} />
|
2022-06-05 22:35:53 +00:00
|
|
|
</Button.Text>
|
2022-11-25 20:25:03 +00:00
|
|
|
{pages.previous.reverse().map(value => (
|
2022-06-20 16:38:23 +00:00
|
|
|
<Button.Text key={`previous-${value}`} {...buttonProps(value)}>
|
2022-06-05 22:35:53 +00:00
|
|
|
{value}
|
|
|
|
</Button.Text>
|
|
|
|
))}
|
2022-06-26 19:13:52 +00:00
|
|
|
<Button size={Button.Sizes.Small} shape={Button.Shapes.IconSquare}>
|
|
|
|
{current}
|
|
|
|
</Button>
|
2022-11-25 20:25:03 +00:00
|
|
|
{pages.next.map(value => (
|
2022-06-20 16:38:23 +00:00
|
|
|
<Button.Text key={`next-${value}`} {...buttonProps(value)}>
|
2022-06-05 22:35:53 +00:00
|
|
|
{value}
|
|
|
|
</Button.Text>
|
|
|
|
))}
|
2022-06-20 16:38:23 +00:00
|
|
|
<Button.Text {...buttonProps(total)} disabled={pages.next.length !== 2}>
|
2023-01-12 19:31:47 +00:00
|
|
|
<ChevronDoubleRightIcon className={'h-3 w-3'} />
|
2022-06-05 22:35:53 +00:00
|
|
|
</Button.Text>
|
|
|
|
</div>
|
2022-06-26 19:13:52 +00:00
|
|
|
)}
|
2022-06-05 22:35:53 +00:00
|
|
|
</div>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default PaginationFooter;
|