-
Notifications
You must be signed in to change notification settings - Fork 10.7k
/
custom-fields.tsx
55 lines (51 loc) · 1.42 KB
/
custom-fields.tsx
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
/**
* External dependencies
*/
import { createElement } from '@wordpress/element';
import { __ } from '@wordpress/i18n';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import { useCustomFields } from '../../hooks/use-custom-fields';
import { EmptyState } from './empty-state';
import type { CustomFieldsProps } from './types';
export function CustomFields( { className, ...props }: CustomFieldsProps ) {
const { customFields } = useCustomFields();
if ( customFields.length === 0 ) {
return <EmptyState />;
}
return (
<table
{ ...props }
className={ classNames(
'woocommerce-product-custom-fields__table',
className
) }
>
<thead>
<tr className="woocommerce-product-custom-fields__table-row">
<th>{ __( 'Name', 'woocommerce' ) }</th>
<th>{ __( 'Value', 'woocommerce' ) }</th>
<th>{ __( 'Actions', 'woocommerce' ) }</th>
</tr>
</thead>
<tbody>
{ customFields.map( ( customField ) => (
<tr
className="woocommerce-product-custom-fields__table-row"
key={ customField.id ?? customField.key }
>
<td className="woocommerce-product-custom-fields__table-datacell">
{ customField.key }
</td>
<td className="woocommerce-product-custom-fields__table-datacell">
{ customField.value }
</td>
<td className="woocommerce-product-custom-fields__table-datacell"></td>
</tr>
) ) }
</tbody>
</table>
);
}