← All changes | js/components/common/ListTable/TablePagination.tsx +27 -212 4.0.0-beta.1 → trunk View file →

		@@ -1,167 +1,10 @@
1	1	import React, { useState } from 'react'
2	2	import classnames from 'classnames'
3		-import { __, _n, _x, sprintf } from '@wordpress/i18n'
4		-import { buildUrl, updateQueryParams } from '../../../utils/urls'
5		-import { Button } from '../Button'
6		-import type { ListTablePaginationProps } from './ListTable'
7		-import type { ReactNode } from 'react'
	3	+import { __, _n, sprintf } from '@wordpress/i18n'
	4	+import { updateQueryParams } from '../../../utils/urls'
	5	+import { TablePaginationNavigation } from './TablePaginationNavigation'
8	6
9		-interface NavigationButtonProps {
10		- icon: ReactNode
11		- newPage: number
12		- className?: string
13		- disabled?: boolean
14		- helperText?: string
15		- renderAsLinks?: boolean
16		- setCurrentPage: (page: number) => void
17		-}
18		-
19		-const NavigationButton: React.FC<NavigationButtonProps> = ({
20		- icon,
21		- newPage,
22		- disabled,
23		- className,
24		- helperText,
25		- renderAsLinks,
26		- setCurrentPage
27		-}) =>
28		- renderAsLinks
29		- ? <>
30		- <a
31		- className={`${className} button`}
32		- href={buildUrl(window.location.href, { paged: 1 === newPage ? undefined : newPage })}
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		- renderAsLinks?: boolean
51		- setCurrentPage: (page: number) => void
52		-}
53		-
54		-const BackwardNavigationButtons: React.FC<NavigationButtonsProps> = ({ currentPage, ...buttonProps }) =>
55		- 1 === currentPage
56		- ? <>
57		- <span className="tablenav-pages-navspan button disabled" aria-hidden="true">&laquo;</span>{'\n'}
58		- <span className="tablenav-pages-navspan button disabled" aria-hidden="true">&lsaquo;</span>{'\n'}
59		- </>
60		- : <>
61		- <NavigationButton
62		- icon={<>&laquo;</>}
63		- newPage={1}
64		- className="first-page"
65		- /* translators: Hidden accessibility text. */
66		- helperText={__('First page', 'code-snippets')}
67		- {...buttonProps}
68		- />{'\n'}
69		- <NavigationButton
70		- icon={<>&lsaquo;</>}
71		- newPage={Math.max(1, currentPage - 1)}
72		- className="prev-page"
73		- /* translators: Hidden accessibility text. */
74		- helperText={__('Previous page', 'code-snippets')}
75		- {...buttonProps}
76		- />{'\n'}
77		- </>
78		-
79		-interface ForwardNavigationButtonsProps extends NavigationButtonsProps {
80		- totalPages: number
81		-}
82		-
83		-const ForwardNavigationButtons: React.FC<ForwardNavigationButtonsProps> = ({ currentPage, totalPages, ...buttonProps }) =>
84		- totalPages === currentPage
85		- ? <>
86		- <span className="tablenav-pages-navspan button disabled" aria-hidden="true">&rsaquo;</span>{'\n'}
87		- <span className="tablenav-pages-navspan button disabled" aria-hidden="true">&raquo;</span>
88		- </>
89		- : <>
90		- <NavigationButton
91		- icon={<>&rsaquo;</>}
92		- newPage={Math.min(totalPages, currentPage + 1)}
93		- className="next-page"
94		- /* translators: Hidden accessibility text. */
95		- helperText={__('Next page', 'code-snippets')}
96		- {...buttonProps}
97		- />{'\n'}
98		- <NavigationButton
99		- icon={<>&raquo;</>}
100		- newPage={totalPages}
101		- className="last-page"
102		- /* translators: Hidden accessibility text. */
103		- helperText={__('Last page', 'code-snippets')}
104		- {...buttonProps}
105		- />{'\n'}
106		- </>
107		-
108		-interface PagingInputProps {
109		- which: 'top' | 'bottom'
110		- totalPages: number
111		- disabled?: boolean
112		- inputValue: number
113		- setInputValue: (value: number) => void
114		- confirmInputValue: VoidFunction
115		-}
116		-
117		-const PagingInput: React.FC<PagingInputProps> = ({ which, totalPages, disabled, inputValue, setInputValue, confirmInputValue }) =>
118		- <input
119		- className="current-page"
120		- id={`current-page-selector-${which}`}
121		- aria-label={__('Current Page', 'code-snippets')}
122		- type="text"
123		- name="paged"
124		- value={inputValue}
125		- size={totalPages.toString().length}
126		- disabled={disabled}
127		- aria-describedby="table-paging"
128		- onBlur={confirmInputValue}
129		- onChange={event => {
130		- const value = Number(event.target.value)
131		-
132		- if (value) {
133		- setInputValue(value)
134		- }
135		- }}
136		- />
137		-
138		-interface CurrentPageProps extends PagingInputProps {
139		- currentPage: number
140		-}
141		-
142		-const CurrentPage: React.FC<CurrentPageProps> = ({ which, totalPages, currentPage, ...inputProps }) =>
143		- 'bottom' === which
144		- ? <>
145		- {/* translators: Hidden accessibility text. */}
146		- <span className="screen-reader-text">{__('Current Page', 'code-snippets')}</span>
147		- <span className="paging-input">
148		- <span className="tablenav-paging-text">
149		- {/* translators: 1: Current page. */
150		- sprintf(_x('%s of ', 'paging', 'code-snippets'), currentPage)}
151		- <span className="total-pages">{totalPages}</span>
152		- </span>
153		- </span>
154		- </>
155		- : <span className="paging-input">
156		- <PagingInput which={which} totalPages={totalPages} {...inputProps} />
157		- <span className="tablenav-paging-text">
158		- {/* translators: 1: Current page. */
159		- _x(' of ', 'paging', 'code-snippets')}
160		- <span className="total-pages">{totalPages}</span>
161		- </span>
162		- </span>
163		-
164	7	interface PaginationControlsProps {
165	8	which: 'top' | 'bottom'
166	9	inputValue: number
167	10	totalPages: number
		@@ -167,51 +10,13 @@
167	10	totalPages: number
168	11	totalItems: number
169	12	currentPage: number
170	13	disabled?: boolean
171		- useQueryVars?: boolean
172	14	setInputValue: (value: number) => void
173	15	setCurrentPage: (page: number) => void
	16	+ pageSearchParam?: string
174	17	}
175	18
176		-type NavigationLinksProps = Omit<PaginationControlsProps, 'totalItems'>
177		-
178		-const NavigationLinks: React.FC<NavigationLinksProps> = ({
179		- which,
180		- disabled,
181		- totalPages,
182		- inputValue,
183		- currentPage,
184		- useQueryVars,
185		- setCurrentPage,
186		- setInputValue
187		-}) => (
188		- <span className="pagination-links">
189		- <BackwardNavigationButtons
190		- disabled={disabled}
191		- currentPage={currentPage}
192		- renderAsLinks={useQueryVars}
193		- setCurrentPage={setCurrentPage}
194		- />
195		- <CurrentPage
196		- which={which}
197		- disabled={disabled}
198		- totalPages={totalPages}
199		- currentPage={currentPage}
200		- inputValue={inputValue}
201		- setInputValue={setInputValue}
202		- confirmInputValue={() => setCurrentPage(inputValue)}
203		- />{'\n'}
204		- <ForwardNavigationButtons
205		- disabled={disabled}
206		- totalPages={totalPages}
207		- currentPage={currentPage}
208		- renderAsLinks={useQueryVars}
209		- setCurrentPage={setCurrentPage}
210		- />
211		- </span>
212		-)
213		-
214	19	const PaginationControls: React.FC<PaginationControlsProps> = ({
215	20	which,
216	21	disabled,
217	22	totalPages,
		@@ -217,9 +22,9 @@
217	22	totalPages,
218	23	totalItems,
219	24	inputValue,
220	25	currentPage,
221		- useQueryVars,
	26	+ pageSearchParam,
222	27	setCurrentPage,
223	28	setInputValue
224	29	}) => {
225	30	const navLabel = 'top' === which
		@@ -226,9 +31,9 @@
226	31	? __('Pagination, before the table', 'code-snippets')
227	32	: __('Pagination, after the table', 'code-snippets')
228	33
229	34	return (
230		- <nav aria-label={navLabel}>
	35	+ <nav className="tablenav-pages-nav" aria-label={navLabel}>
231	36	<form
232	37	className={classnames('tablenav-pages', {
233	38	'one-page': totalPages && 1 === totalPages,
234	39	'no-pages': !totalPages
		@@ -241,15 +46,24 @@
241	46	<span className="displaying-num">
242	47	{
243	48	sprintf(
244	49	// translators: %s: Number of items.
245		- _n('%s item', '%s items', totalItems),
	50	+ _n('%s item', '%s items', totalItems, 'code-snippets'),
246	51	totalItems
247	52	)
248	53	}
249	54	</span>{'\n'}
250		- <NavigationLinks
251		- {...{ which, disabled, totalPages, inputValue, currentPage, useQueryVars, setCurrentPage, setInputValue }}
	55	+ <TablePaginationNavigation
	56	+ {...{
	57	+ which,
	58	+ disabled,
	59	+ totalPages,
	60	+ inputValue,
	61	+ currentPage,
	62	+ pageSearchParam,
	63	+ setCurrentPage,
	64	+ setInputValue
	65	+ }}
252	66	/>
253	67	</form>
254	68	</nav>
255	69	)
		@@ -254,14 +68,15 @@
254	68	</nav>
255	69	)
256	70	}
257	71
258		-export interface TablePaginationProps extends Omit<ListTablePaginationProps, 'totalPages'>,
259		- Required<Pick<ListTablePaginationProps, 'totalPages'>> {
	72	+export interface TablePaginationProps {
260	73	which: 'top' | 'bottom'
	74	+ disabled?: boolean
261	75	totalItems: number
262		- disabled?: boolean
	76	+ totalPages: number
263	77	currentPage: number
	78	+ pageSearchParam?: string
264	79	setCurrentPage: (page: number) => void
265	80	}
266	81
267	82	export const TablePagination: React.FC<TablePaginationProps> = ({
		@@ -267,12 +82,12 @@
267	82	export const TablePagination: React.FC<TablePaginationProps> = ({
268	83	which,
269	84	disabled,
270	85	totalItems,
	86	+ totalPages,
271	87	currentPage,
272		- totalPages,
273		- useQueryVars,
274		- setCurrentPage
	88	+ setCurrentPage,
	89	+ pageSearchParam
275	90	}) => {
276	91	const [inputValue, setInputValue] = useState(currentPage)
277	92
278	93	const setCurrentPageSafe = (page: number) => {
		@@ -280,10 +95,10 @@
280	95	const validPage = Math.max(1, Math.min(page, totalPages))
281	96	setInputValue(validPage)
282	97	setCurrentPage(validPage)
283	98
284		- if (useQueryVars) {
285		- updateQueryParams({ paged: 1 === validPage ? undefined : validPage })
	99	+ if (pageSearchParam) {
	100	+ updateQueryParams({ [pageSearchParam]: 1 === validPage ? undefined : validPage })
286	101	}
287	102	}
288	103	}
289	104