misc_pterodactyl-panel/resources/scripts/components/elements/table/PaginationFooter.tsx

78 lines
3 KiB
TypeScript
Raw Normal View History

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;
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);
}
}
if (pagination.total === 0) {
return null;
}
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&nbsp;
<span className={'font-semibold text-neutral-400'}>
{Math.max(start, Math.min(pagination.total, 1))}
</span>
&nbsp;to&nbsp;
2022-06-05 22:35:53 +00:00
<span className={'font-semibold text-neutral-400'}>{end}</span> of&nbsp;
<span className={'font-semibold text-neutral-400'}>{pagination.total}</span> results.
</p>
{pagination.totalPages > 1 && (
2022-06-05 22:35:53 +00:00
<div className={'flex space-x-1'}>
<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 => (
<Button.Text key={`previous-${value}`} {...buttonProps(value)}>
2022-06-05 22:35:53 +00:00
{value}
</Button.Text>
))}
<Button size={Button.Sizes.Small} shape={Button.Shapes.IconSquare}>
{current}
</Button>
2022-11-25 20:25:03 +00:00
{pages.next.map(value => (
<Button.Text key={`next-${value}`} {...buttonProps(value)}>
2022-06-05 22:35:53 +00:00
{value}
</Button.Text>
))}
<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-05 22:35:53 +00:00
</div>
);
};
export default PaginationFooter;