index.js
37 lines
| 1 | import { __, sprintf } from '@wordpress/i18n'; |
| 2 | import { useState } from '@wordpress/element'; |
| 3 | import { Toolbar } from '@wordpress/components'; |
| 4 | import { alignLeft, alignRight, alignCenter } from '@wordpress/icons'; |
| 5 | |
| 6 | export const AlignControl = (props) => { |
| 7 | const { setAttributes, schema, initial, component } = props; |
| 8 | const [activeControl, setActiveControl] = useState(initial); |
| 9 | |
| 10 | function createAlignControl(align) { |
| 11 | let alignIcon = ''; |
| 12 | if (align === 'left') { |
| 13 | alignIcon = alignLeft; |
| 14 | } else if (align === 'center') { |
| 15 | alignIcon = alignCenter; |
| 16 | } else if (align === 'right') { |
| 17 | alignIcon = alignRight; |
| 18 | } |
| 19 | return { |
| 20 | icon: alignIcon, |
| 21 | // translators: %s is align. |
| 22 | title: sprintf(__(`Align %s`, 'vk-blocks'), align), |
| 23 | isActive: activeControl === align, |
| 24 | onClick: () => { |
| 25 | schema[component] = align; |
| 26 | setAttributes({ activeControl: JSON.stringify(schema) }); |
| 27 | setActiveControl(align); |
| 28 | }, |
| 29 | }; |
| 30 | } |
| 31 | return ( |
| 32 | <Toolbar |
| 33 | controls={['left', 'center', 'right'].map(createAlignControl)} |
| 34 | /> |
| 35 | ); |
| 36 | }; |
| 37 |