code-snippets / js / components / ImportMenu / UploadForm / SelectSnippets / SnippetSelectionTable.tsx

SnippetSelectionTable.tsx in Code Snippets 3.10.2, at js/components/ImportMenu/UploadForm/SelectSnippets/SnippetSelectionTable.tsx

75 lines 2.6 KB

Raw Download Zip

1	import React from 'react'
2	import { __, _x, sprintf } from '@wordpress/i18n'
3	import type { UseSelection } from '../../../../hooks/useSelection'
4	import type { ImportableSnippetSchema } from '../../../../types/schema/ImportableSnippetSchema'
5
6	const DESC_MAX_LENGTH = 50
7
8	const truncateDescription = (description: string \| undefined): string => {
9	if (!description) {
10	return __('No description', 'code-snippets')
11	}
12
13	return DESC_MAX_LENGTH < description.length
14	// translators: %s: truncated snippet description.
15	? sprintf(_x('%s…', 'import snippet description', 'code-snippets'), description.substring(0, DESC_MAX_LENGTH))
16	: description
17	}
18
19	export interface SnippetSelectionTableProps {
20	snippets: ImportableSnippetSchema[]
21	selection: UseSelection<ImportableSnippetSchema, ImportableSnippetSchema['table_data']['id']>
22	}
23
24	export const SnippetSelectionTable: React.FC<SnippetSelectionTableProps> = ({
25	snippets,
26	selection: { selectedItems, isAllSelected, toggleItem, selectAll }
27	}) =>
28	<table className="wp-list-table widefat fixed striped">
29	<thead>
30	<tr>
31	<th scope="col" className="check-column">
32	<input
33	id="cb-select-all-head"
34	type="checkbox"
35	aria-label={__('Select all snippets', 'code-snippets')}
36	checked={isAllSelected}
37	onChange={selectAll}
38	/>
39	</th>
40	<th scope="col" className="column-name">{__('Name', 'code-snippets')}</th>
41	<th scope="col" className="column-type">{__('Type', 'code-snippets')}</th>
42	<th scope="col" className="column-desc">{__('Description', 'code-snippets')}</th>
43	<th scope="col" className="column-tags">{__('Tags', 'code-snippets')}</th>
44	</tr>
45	</thead>
46	<tbody>
47	{snippets.map(snippet =>
48	<tr key={snippet.table_data.id} className={`${snippet.table_data.type}-snippet`}>
49	<th scope="row" className="check-column">
50	<input
51	id={`cb-select-${snippet.table_data.id}`}
52	type="checkbox"
53	aria-label={__('Select snippet', 'code-snippets')}
54	checked={selectedItems.has(snippet.table_data.id)}
55	onChange={() => toggleItem(snippet.table_data.id)}
56	/>
57	</th>
58	<td className="column-name">
59	<strong>{snippet.table_data.title}</strong>
60	{snippet.source_file && <div>
61	{sprintf(
62	// translators: %s: source file name.
63	_x('from %s', 'import snippet source file', 'code-snippets'),
64	snippet.source_file
65	)}
66	</div>}
67	</td>
68	<td className="column-type"><span>{snippet.table_data.type}</span></td>
69	<td className="column-desc">{truncateDescription(snippet.table_data.description)}</td>
70	<td className="column-tags">{snippet.table_data.tags \|\| '—'}</td>
71	</tr>
72	)}
73	</tbody>
74	</table>
75