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
/
index.js
59 lines (54 loc) · 1.45 KB
/
index.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
/**
* External dependencies
*/
import PropTypes from 'prop-types';
import classNames from 'classnames';
/**
* Internal dependencies
*/
import Label from '../label';
import './style.scss';
const OrderSelect = ( { className, componentId, defaultValue, label, onChange, options, screenReaderLabel, readOnly, value } ) => {
const selectId = `wc-block-order-select__select-${ componentId }`;
return (
<p className={ classNames( 'wc-block-order-select', className ) }>
<Label
label={ label }
screenReaderLabel={ screenReaderLabel }
wrapperElement="label"
wrapperProps={ {
className: 'wc-block-order-select__label',
htmlFor: selectId,
} }
/>
<select // eslint-disable-line jsx-a11y/no-onchange
id={ selectId }
className="wc-block-order-select__select"
defaultValue={ defaultValue }
onChange={ onChange }
readOnly={ readOnly }
value={ value }
>
{ options.map( ( option ) => (
<option key={ option.key } value={ option.key }>
{ option.label }
</option>
) ) }
</select>
</p>
);
};
OrderSelect.propTypes = {
componentId: PropTypes.number.isRequired,
defaultValue: PropTypes.string,
label: PropTypes.string,
onChange: PropTypes.func,
options: PropTypes.arrayOf( PropTypes.shape( {
key: PropTypes.string.isRequired,
label: PropTypes.string.isRequired,
} ) ),
readOnly: PropTypes.bool,
screenReaderLabel: PropTypes.string,
value: PropTypes.string,
};
export default OrderSelect;