-
Notifications
You must be signed in to change notification settings - Fork 4k
/
index.js
67 lines (65 loc) · 1.51 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
65
66
67
/**
* External dependencies
*/
/**
* WordPress dependencies
*/
import {
__experimentalToggleGroupControl as ToggleGroupControl,
__experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import {
formatCapitalize,
formatLowercase,
formatUppercase,
} from '@wordpress/icons';
const TEXT_TRANSFORMS = [
{
name: __( 'Uppercase' ),
value: 'uppercase',
icon: formatUppercase,
},
{
name: __( 'Lowercase' ),
value: 'lowercase',
icon: formatLowercase,
},
{
name: __( 'Capitalize' ),
value: 'capitalize',
icon: formatCapitalize,
},
];
/**
* Control to facilitate text transform selections.
*
* @param {Object} props Component props.
* @param {string} props.value Currently selected text transform.
* @param {Function} props.onChange Handles change in text transform selection.
*
* @return {WPElement} Text transform control.
*/
export default function TextTransformControl( { value, onChange, ...props } ) {
return (
<ToggleGroupControl
{ ...props }
className="block-editor-text-transform-control"
__experimentalIsBorderless
label={ __( 'Letter case' ) }
value={ value }
onChange={ onChange }
>
{ TEXT_TRANSFORMS.map( ( textTransform ) => {
return (
<ToggleGroupControlOptionIcon
key={ textTransform.value }
value={ textTransform.value }
icon={ textTransform.icon }
label={ textTransform.name }
/>
);
} ) }
</ToggleGroupControl>
);
}