disco / backend / views / components / Analytics / components / ui-blocks / TableFooterWithPagination.jsx

TableFooterWithPagination.jsx in Discount Rules for WooCommerce – Disco | Dynamic Pricing, Conditions, Bulk, Bundle, BOGO 1.4.21, at backend/views/components/Analytics/components/ui-blocks/TableFooterWithPagination.jsx

95 lines 2.5 KB

Raw Download Zip

1	import {
2	Pagination,
3	PaginationContent,
4	PaginationEllipsis,
5	PaginationItem,
6	PaginationLink,
7	PaginationNext,
8	PaginationPrevious,
9	} from '@/components/ui/pagination';
10	import { cn } from '@/lib/utils';
11
12	const range = (start, end) =>
13	Array.from({ length: end - start + 1 }, (_, i) => start + i);
14
15	/**
16	* Build the list of pagination items, inserting ellipsis markers when there
17	* are too many pages to show at once (e.g. 1 2 3 … 99).
18	* @param {number} page current page
19	* @param {number} totalPages total number of pages
20	* @returns {Array<number\|'ellipsis'>}
21	*/
22	function getPaginationItems(page, totalPages) {
23	if (totalPages <= 7) {
24	return range(1, totalPages);
25	}
26	if (page <= 4) {
27	return [1, 2, 3, 4, 5, 'ellipsis', totalPages];
28	}
29	if (page >= totalPages - 3) {
30	return [1, 'ellipsis', ...range(totalPages - 4, totalPages)];
31	}
32	return [1, 'ellipsis', page - 1, page, page + 1, 'ellipsis', totalPages];
33	}
34
35	const TableFooterWithPagination = ({
36	totalPages,
37	page,
38	onPageChange,
39	disabled = false,
40	}) => {
41	const items = getPaginationItems(page, totalPages);
42
43	return (
44	<div className="disco:flex disco:items-center disco:justify-between disco:px-4 disco:py-2.5 disco:border-t disco:border-[#f3f4f6]">
45	<span className="disco:text-xs disco:text-[#9ca3af]">
46	Showing {page} of {totalPages}
47	</span>
48	{totalPages > 1 && (
49	<Pagination
50	aria-disabled={disabled}
51	className={cn(
52	'disco:border disco:border-primary disco:py-1 disco:px-2 disco:rounded-lg',
53	disabled &&
54	'disco:pointer-events-none disco:opacity-50'
55	)}
56	>
57	<PaginationContent>
58	<PaginationItem>
59	<PaginationPrevious
60	onClick={() => onPageChange(page - 1)}
61	disabled={disabled \|\| page <= 1}
62	/>
63	</PaginationItem>
64	{items.map((item, index) =>
65	item === 'ellipsis' ? (
66	<PaginationItem key={`ellipsis-${index}`}>
67	<PaginationEllipsis />
68	</PaginationItem>
69	) : (
70	<PaginationItem key={item}>
71	<PaginationLink
72	isActive={item === page}
73	onClick={() => onPageChange(item)}
74	disabled={disabled}
75	>
76	{item}
77	</PaginationLink>
78	</PaginationItem>
79	)
80	)}
81	<PaginationItem>
82	<PaginationNext
83	onClick={() => onPageChange(page + 1)}
84	disabled={disabled \|\| page >= totalPages}
85	/>
86	</PaginationItem>
87	</PaginationContent>
88	</Pagination>
89	)}
90	</div>
91	);
92	};
93
94	export default TableFooterWithPagination;
95