Pagination.tsx — GiveWP – Donation Plugin and Fundraising Platform 2.23.2

give / src / Views / Components / ListTable / Pagination.tsx

give / src / Views / Components / ListTable Last commit date

Pagination.tsx

121 lines

1	import PropTypes from 'prop-types';
2	import {useState, useEffect} from 'react';
3	import styles from './Pagination.module.scss';
4	import cx from 'classnames';
5	import {__, sprintf} from '@wordpress/i18n';
6
7	const Pagination = ({currentPage, totalPages, totalItems = -1, disabled, setPage, singleName, pluralName}) => {
8	const [pageInput, setPageInput] = useState(1);
9
10	useEffect(() => {
11	setPageInput(currentPage);
12	}, [currentPage]);
13
14	const nextPage = parseInt(currentPage) + 1;
15	const previousPage = parseInt(currentPage) - 1;
16
17	return (
18	<nav aria-label={sprintf(__('%s table', 'give'), pluralName)} className={styles.container}>
19	{totalItems >= 1 &&
20	<span>
21	{totalItems.toString() + " "}{totalItems == 1 ? singleName : pluralName}
22	</span>
23	}
24	{1 < totalPages &&
25	<>
26	<button
27	className={cx(styles.navDirection, styles.navElement)}
28	aria-disabled={previousPage <= 1}
29	aria-label={(__('first page'))}
30	onClick={(e) => {
31	if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
32	setPage(1);
33	}
34	}}
35	>
36	<span aria-hidden={true}>«</span>
37	</button>
38	<button
39	className={cx(styles.navDirection, styles.navElement)}
40	aria-disabled={previousPage <= 0}
41	aria-label={(__('previous page'))}
42	onClick={(e) => {
43	if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
44	setPage(parseInt(currentPage) - 1);
45	}
46	}}
47	>
48	<span aria-hidden={true}>‹</span>
49	</button>
50	<span>
51	<label htmlFor={styles.currentPage} className={styles.visuallyHidden}>
52	{__('Current Page', 'give')}
53	</label>
54	<input className={styles.navElement} id={styles.currentPage} name={'currentPageSelector'}
55	type="number" min={1} max={totalPages} value={pageInput}
56	onChange={(e) => {
57	const cleanValue = parseInt(e.target.value.replace(/[^0-9]/, ''));
58	const page = Number(cleanValue);
59	setPageInput(cleanValue);
60	if (totalPages >= page && page > 0) {
61	setPage(page);
62	}
63	}}
64	/>
65	<span>
66	{' '}
67	{__('of', 'give')} <span>{totalPages}</span>{' '}
68	</span>
69	</span>
70	<button
71	className={cx(styles.navDirection, styles.navElement)}
72	aria-disabled={nextPage > totalPages}
73	aria-label={(__('next page'))}
74	onClick={(e) => {
75	if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
76	setPage(parseInt(currentPage) + 1);
77	}
78	}}
79	>
80	<span aria-hidden={true}>›</span>
81	</button>
82	<button
83	className={cx(styles.navDirection, styles.navElement)}
84	aria-disabled={nextPage > totalPages - 1}
85	aria-label={(__('final page'))}
86	onClick={(e) => {
87	if (e.currentTarget.getAttribute('aria-disabled') === 'false') {
88	setPage(totalPages);
89	}
90	}}
91	>
92	<span aria-hidden={true}>»</span>
93	</button>
94	</>
95	}
96	</nav>
97	);
98	};
99
100	Pagination.propTypes = {
101	// Current page
102	currentPage: PropTypes.number.isRequired,
103	// Total number of pages
104	totalPages: PropTypes.number.isRequired,
105	// Total number of items
106	totalItems: PropTypes.number,
107	// Function to set the next/previous page
108	setPage: PropTypes.func.isRequired,
109	// Is pagination disabled
110	disabled: PropTypes.bool.isRequired,
111	};
112
113	Pagination.defaultProps = {
114	currentPage: 1,
115	totalPages: 0,
116	setPage: () => {},
117	disabled: false,
118	};
119
120	export default Pagination;
121