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

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

119 lines 3.5 KB

Raw Download Zip

1	import React from 'react'
2	import classnames from 'classnames'
3	import { __ } from '@wordpress/i18n'
4	import type { ListTableColumn, ListTableSortDirection } from './ListTable'
5	import type { Key, ThHTMLAttributes } from 'react'
6
7	interface SortableHeadingCellProps<T> {
8	column: ListTableColumn<T>
9	cellProps: ThHTMLAttributes<HTMLTableCellElement>
10	sortColumn: ListTableColumn<T> \| undefined
11	sortDirection: ListTableSortDirection
12	setSortColumn: (column: ListTableColumn<T> \| undefined) => void
13	setSortDirection: (direction: ListTableSortDirection) => void
14	}
15
16	const SortableHeadingCell = <T, >({
17	column,
18	cellProps,
19	sortColumn,
20	sortDirection,
21	setSortColumn,
22	setSortDirection
23	}: SortableHeadingCellProps<T>) => {
24	const isCurrent = column.id === sortColumn?.id
25	const nextSortDirection = isCurrent
26	? 'asc' === sortDirection ? 'desc' : 'asc'
27	: column.defaultSortDirection ?? 'asc'
28
29	const classDirection = isCurrent ? sortDirection : 'asc' === nextSortDirection ? 'desc' : 'asc'
30	const ariaSort = isCurrent ? 'asc' === sortDirection ? 'ascending' : 'descending' : undefined
31
32	return (
33	<th
34	{...cellProps}
35	aria-sort={ariaSort}
36	className={classnames(cellProps.className, isCurrent ? 'sorted' : 'sortable', classDirection)}
37	>
38	<button
39	type="button"
40	className="list-table-sort-button"
41	onClick={() => {
42	setSortColumn(column)
43	setSortDirection(nextSortDirection)
44	}}
45	>
46	<span className="sortable-column-title">{column.title}</span>
47	<span className="sorting-indicators">
48	<span className="sorting-indicator asc" aria-hidden="true"></span>
49	<span className="sorting-indicator desc" aria-hidden="true"></span>
50	</span>
51	{isCurrent ? null
52	: <span className="screen-reader-text">
53	{/* translators: Hidden accessibility text. */}
54	{'asc' === nextSortDirection ? __('Sort ascending.', 'code-snippets') : __('Sort descending.', 'code-snippets')}
55	</span>}
56	</button>
57	</th>
58	)
59	}
60
61	export interface ColumnHeadingsProps<T, K extends Key> {
62	items: T[]
63	which: 'head' \| 'foot'
64	getKey: (item: T) => K
65	columns: ListTableColumn<T>[]
66	selected: Set<K>
67	sortColumn: ListTableColumn<T> \| undefined
68	setSelected: (selected: Set<K>) => void
69	sortDirection: ListTableSortDirection
70	setSortColumn: (column: ListTableColumn<T> \| undefined) => void
71	setSortDirection: (direction: ListTableSortDirection) => void
72	}
73
74	export const ColumnHeadings = <T, K extends Key>({
75	items,
76	which,
77	getKey,
78	columns,
79	sortColumn,
80	selected,
81	setSelected,
82	setSortColumn,
83	sortDirection,
84	setSortDirection
85	}: ColumnHeadingsProps<T, K>) =>
86	<tr>
87	<td className="column-cb check-column">
88	<input
89	id={`cb-select-all-${which}`}
90	type="checkbox"
91	name="checked[]"
92	checked={0 < items.length && items.every(item => selected.has(getKey(item)))}
93	aria-label={__('Select All', 'code-snippets')}
94	onChange={event => {
95	setSelected(new Set(event.target.checked ? items.map(getKey) : []))
96	}}
97	/>
98	</td>
99	{columns.map(column => {
100	const cellProps: ThHTMLAttributes<HTMLTableCellElement> = {
101	id: 'head' === which ? column.id.toString() : undefined,
102	scope: 'col',
103	className: classnames(
104	'manage-column',
105	`column-${column.id}`,
106	`${column.id}-column`,
107	{ 'hidden': column.isHidden, 'column-primary': column.isPrimary }
108	)
109	}
110
111	return column.sortedValue
112	? <SortableHeadingCell
113	key={column.id}
114	{...{ column, cellProps, sortColumn, sortDirection, setSortColumn, setSortDirection }}
115	/>
116	: <th key={column.id} {...cellProps}>{column.title}</th>
117	})}
118	</tr>
119