/
index.js
64 lines (60 loc) · 1.47 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
60
61
62
63
64
/**
* WordPress dependencies
*/
import { CustomSelectControl } from '@wordpress/components';
import { __ } from '@wordpress/i18n';
const DEFAULT_STYLE = {
key: 'default',
name: __( 'Default' ),
style: { borderStyle: undefined },
};
const BORDER_STYLES = [
DEFAULT_STYLE,
{
key: 'none',
name: __( 'None' ),
style: { borderStyle: 'none' },
},
{
key: 'solid',
name: __( 'Solid' ),
style: { borderStyle: 'solid' },
},
{
key: 'dashed',
name: __( 'Dashed' ),
style: { borderStyle: 'dashed' },
},
{
key: 'dotted',
name: __( 'Dotted' ),
style: { borderStyle: 'dotted' },
},
];
/**
* Control to display border style options.
*
* @param {Object} props Component props.
* @param {Object} props.onChange Handler for changing border style selection.
* @param {Object} props.value Currently selected border style value.
*
* @return {WPElement} Custom border style select control.
*/
export default function BorderStyleControl( { onChange, value } ) {
const style = BORDER_STYLES.find( ( option ) => option.key === value );
return (
<fieldset className="components-border-style-control">
<CustomSelectControl
className="components-border-style-control__select"
label={ __( 'Border style' ) }
options={ BORDER_STYLES }
value={ style || DEFAULT_STYLE }
onChange={ ( { selectedItem } ) =>
selectedItem.key === 'default'
? onChange( undefined )
: onChange( selectedItem.key )
}
/>
</fieldset>
);
}