/
table.js
117 lines (109 loc) · 2.65 KB
/
table.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
/**
* WordPress dependencies
*/
import { useSelect } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { __, sprintf } from '@wordpress/i18n';
import {
VisuallyHidden,
__experimentalHeading as Heading,
} from '@wordpress/components';
import { addQueryArgs } from '@wordpress/url';
/**
* Internal dependencies
*/
import Actions from './actions';
export default function Table( { templateType } ) {
const { templates, isLoading, postType } = useSelect(
( select ) => {
const {
getEntityRecords,
hasFinishedResolution,
getPostType,
} = select( coreStore );
return {
templates: getEntityRecords( 'postType', templateType, {
per_page: -1,
} ),
isLoading: ! hasFinishedResolution( 'getEntityRecords', [
'postType',
templateType,
{ per_page: -1 },
] ),
postType: getPostType( templateType ),
};
},
[ templateType ]
);
if ( ! templates || isLoading ) {
return null;
}
if ( ! templates.length ) {
return (
<div>
{ sprintf(
// translators: The template type name, should be either "templates" or "template parts".
__( 'No %s found.' ),
postType?.labels?.name?.toLowerCase()
) }
</div>
);
}
return (
// These explicit aria roles are needed for Safari.
// See https://developer.mozilla.org/en-US/docs/Web/CSS/display#tables
<table className="edit-site-list-table" role="table">
<thead>
<tr className="edit-site-list-table-head" role="row">
<th
className="edit-site-list-table-column"
role="columnheader"
>
{ __( 'Template' ) }
</th>
<th
className="edit-site-list-table-column"
role="columnheader"
>
{ __( 'Added by' ) }
</th>
<th
className="edit-site-list-table-column"
role="columnheader"
>
<VisuallyHidden>{ __( 'Actions' ) }</VisuallyHidden>
</th>
</tr>
</thead>
<tbody>
{ templates.map( ( template ) => (
<tr
key={ template.id }
className="edit-site-list-table-row"
role="row"
>
<td className="edit-site-list-table-column" role="cell">
<Heading level={ 4 }>
<a
href={ addQueryArgs( window.location.href, {
postId: template.id,
postType: template.type,
} ) }
>
{ template.title.rendered }
</a>
</Heading>
{ template.description }
</td>
<td className="edit-site-list-table-column" role="cell">
{ template.theme }
</td>
<td className="edit-site-list-table-column" role="cell">
<Actions template={ template } />
</td>
</tr>
) ) }
</tbody>
</table>
);
}