code-snippets / js / components / common / ListTable / TablePaginationNavigation.tsx

TablePaginationNavigation.tsx in Code Snippets 3.10.1, at js/components/common/ListTable/TablePaginationNavigation.tsx

231 lines 5.8 KB

Raw Download Zip

1	import React from 'react'
2	import { __, _x, sprintf } from '@wordpress/i18n'
3	import { buildUrl } from '../../../utils/urls'
4	import { Button } from '../Button'
5	import type { ReactNode } from 'react'
6
7	interface NavigationButtonProps {
8	icon: ReactNode
9	newPage: number
10	className?: string
11	disabled?: boolean
12	helperText?: string
13	setCurrentPage: (page: number) => void
14	pageSearchParam?: string
15	}
16
17	const NavigationButton: React.FC<NavigationButtonProps> = ({
18	icon,
19	newPage,
20	disabled,
21	className,
22	helperText,
23	setCurrentPage,
24	pageSearchParam
25	}) =>
26	pageSearchParam
27	? <>
28	<a
29	className={`${className} button`}
30	href={buildUrl(window.location.href, {
31	[pageSearchParam]: 1 === newPage ? undefined : newPage
32	})}
33	onClick={event => {
34	event.preventDefault()
35	setCurrentPage(newPage)
36	}}
37	>
38	<span className="screen-reader-text">{helperText}</span>
39	<span aria-hidden>{icon}</span>
40	</a>{'\n'}
41	</>
42	: <Button className={className} onClick={() => setCurrentPage(newPage)} disabled={disabled}>
43	<span className="screen-reader-text">{helperText}</span>
44	<span aria-hidden>{icon}</span>
45	</Button>
46
47	interface NavigationButtonsProps {
48	currentPage: number
49	disabled?: boolean
50	pageSearchParam?: string
51	setCurrentPage: (page: number) => void
52	}
53
54	const BackwardNavigationButtons: React.FC<NavigationButtonsProps> = ({
55	currentPage,
56	...buttonProps
57	}) =>
58	1 === currentPage
59	? <>
60	<span className="tablenav-pages-navspan button disabled" aria-hidden="true">«</span>{'\n'}
61	<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>{'\n'}
62	</>
63	: <>
64	<NavigationButton
65	icon={<>«</>}
66	newPage={1}
67	className="first-page"
68	/* translators: Hidden accessibility text. */
69	helperText={__('First page', 'code-snippets')}
70	{...buttonProps}
71	/>{'\n'}
72	<NavigationButton
73	icon={<>&lsaquo;</>}
74	newPage={Math.max(1, currentPage - 1)}
75	className="prev-page"
76	/* translators: Hidden accessibility text. */
77	helperText={__('Previous page', 'code-snippets')}
78	{...buttonProps}
79	/>{'\n'}
80	</>
81
82	interface ForwardNavigationButtonsProps extends NavigationButtonsProps {
83	totalPages: number
84	}
85
86	const ForwardNavigationButtons: React.FC<ForwardNavigationButtonsProps> = ({
87	currentPage,
88	totalPages,
89	...buttonProps
90	}) =>
91	totalPages === currentPage
92	? <>
93	<span className="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>{'\n'}
94	<span className="tablenav-pages-navspan button disabled" aria-hidden="true">»</span>
95	</>
96	: <>
97	<NavigationButton
98	icon={<>&rsaquo;</>}
99	newPage={Math.min(totalPages, currentPage + 1)}
100	className="next-page"
101	/* translators: Hidden accessibility text. */
102	helperText={__('Next page', 'code-snippets')}
103	{...buttonProps}
104	/>{'\n'}
105	<NavigationButton
106	icon={<>»</>}
107	newPage={totalPages}
108	className="last-page"
109	/* translators: Hidden accessibility text. */
110	helperText={__('Last page', 'code-snippets')}
111	{...buttonProps}
112	/>{'\n'}
113	</>
114
115	interface PagingInputProps {
116	which: 'top' \| 'bottom'
117	totalPages: number
118	inputName?: string
119	disabled?: boolean
120	inputValue: number
121	setInputValue: (value: number) => void
122	confirmInputValue: VoidFunction
123	}
124
125	const PagingInput: React.FC<PagingInputProps> = ({
126	which,
127	disabled,
128	inputName,
129	inputValue,
130	totalPages,
131	setInputValue,
132	confirmInputValue
133	}) =>
134	<input
135	className="current-page"
136	id={`current-page-selector-${which}`}
137	aria-label={__('Current Page', 'code-snippets')}
138	type="text"
139	name={inputName}
140	value={inputValue}
141	size={totalPages.toString().length}
142	disabled={disabled}
143	aria-describedby={`table-paging-${which}`}
144	onBlur={confirmInputValue}
145	onChange={event => {
146	const value = Number(event.target.value)
147
148	if (value) {
149	setInputValue(value)
150	}
151	}}
152	/>
153
154	interface CurrentPageProps extends PagingInputProps {
155	currentPage: number
156	}
157
158	const CurrentPage: React.FC<CurrentPageProps> = ({
159	which,
160	totalPages,
161	currentPage,
162	...inputProps
163	}) =>
164	'bottom' === which
165	? <>
166	{/* translators: Hidden accessibility text. */}
167	<span className="screen-reader-text">{__('Current Page', 'code-snippets')}</span>
168	<span className="paging-input">
169	<span className="tablenav-paging-text">
170	{/* translators: 1: Current page. 2: Total pages. */
171	sprintf(_x('%1$s of %2$s', 'paging', 'code-snippets'), currentPage, totalPages)}
172	</span>
173	</span>
174	</>
175	: <span className="paging-input" id={`table-paging-${which}`}>
176	<PagingInput which={which} totalPages={totalPages} {...inputProps} />
177	<span className="tablenav-paging-text">
178	{/* translators: Mid-sentence: current page number of total pages. */}
179	{` ${__('of', 'code-snippets')} `}
180	<span className="total-pages">{totalPages}</span>
181	</span>
182	</span>
183
184	export interface TablePaginationNavigationProps {
185	which: 'top' \| 'bottom'
186	inputValue: number
187	totalPages: number
188	currentPage: number
189	disabled?: boolean
190	setInputValue: (value: number) => void
191	setCurrentPage: (page: number) => void
192	pageSearchParam?: string
193	}
194
195	export const TablePaginationNavigation: React.FC<TablePaginationNavigationProps> = ({
196	which,
197	disabled,
198	totalPages,
199	inputValue,
200	currentPage,
201	setCurrentPage,
202	setInputValue,
203	pageSearchParam
204	}) => (
205	<span className="pagination-links">
206	<BackwardNavigationButtons
207	disabled={disabled}
208	currentPage={currentPage}
209	setCurrentPage={setCurrentPage}
210	pageSearchParam={pageSearchParam}
211	/>
212	<CurrentPage
213	which={which}
214	disabled={disabled}
215	totalPages={totalPages}
216	currentPage={currentPage}
217	inputName={pageSearchParam}
218	inputValue={inputValue}
219	setInputValue={setInputValue}
220	confirmInputValue={() => setCurrentPage(inputValue)}
221	/>{'\n'}
222	<ForwardNavigationButtons
223	disabled={disabled}
224	totalPages={totalPages}
225	currentPage={currentPage}
226	setCurrentPage={setCurrentPage}
227	pageSearchParam={pageSearchParam}
228	/>
229	</span>
230	)
231