This repository has been archived by the owner on Feb 23, 2024. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 220
/
package.js
126 lines (122 loc) · 2.81 KB
/
package.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
118
119
120
121
122
123
124
125
126
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import { _n, sprintf } from '@wordpress/i18n';
import { decodeEntities } from '@wordpress/html-entities';
import Label from '@woocommerce/base-components/label';
import Title from '@woocommerce/base-components/title';
import Panel from '@woocommerce/base-components/panel';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import PackageOptions from './package-options';
import './style.scss';
const Package = ( {
className,
collapsible = false,
noResultsMessage,
onChange,
renderOption,
selected,
shippingRate,
showItems,
title,
} ) => {
const header = (
<>
{ title && (
<Title
className="wc-block-shipping-rates-control__package-title"
headingLevel="3"
>
{ title }
</Title>
) }
{ showItems && (
<ul className="wc-block-shipping-rates-control__package-items">
{ Object.values( shippingRate.items ).map( ( v ) => {
const name = decodeEntities( v.name );
const quantity = v.quantity;
return (
<li
key={ name }
className="wc-block-shipping-rates-control__package-item"
>
<Label
label={ `${ name } ×${ quantity }` }
screenReaderLabel={ sprintf(
// translators: %s name of the product (ie: Sunglasses), %d number of units in the current cart package
_n(
'%s (%d unit)',
'%s (%d units)',
quantity,
'woo-gutenberg-products-block'
),
name,
quantity
) }
/>
</li>
);
} ) }
</ul>
) }
</>
);
const body = (
<PackageOptions
className={ className }
noResultsMessage={ noResultsMessage }
onChange={ onChange }
options={ shippingRate.shipping_rates }
renderOption={ renderOption }
selected={ selected }
/>
);
if ( collapsible ) {
return (
<Panel
className="wc-block-shipping-rates-control__package"
hasBorder={ true }
initialOpen={ true }
title={ header }
>
{ body }
</Panel>
);
}
return (
<div
className={ classNames(
'wc-block-shipping-rates-control__package',
className
) }
>
{ header }
{ body }
</div>
);
};
Package.propTypes = {
onChange: PropTypes.func.isRequired,
renderOption: PropTypes.func.isRequired,
shippingRate: PropTypes.shape( {
shipping_rates: PropTypes.arrayOf( PropTypes.object ).isRequired,
items: PropTypes.arrayOf(
PropTypes.shape( {
name: PropTypes.string.isRequired,
key: PropTypes.string.isRequired,
quantity: PropTypes.number.isRequired,
} ).isRequired
).isRequired,
} ).isRequired,
className: PropTypes.string,
collapsible: PropTypes.bool,
noResultsMessage: PropTypes.string,
selected: PropTypes.string,
showItems: PropTypes.bool,
title: PropTypes.string,
};
export default Package;