@wordpress/block-editor
Version:
71 lines • 1.8 kB
JavaScript
/**
* WordPress dependencies
*/
import { __, isRTL } from '@wordpress/i18n';
import { ToolbarDropdownMenu, ToolbarGroup } from '@wordpress/components';
import { alignLeft, alignRight, alignCenter } from '@wordpress/icons';
import { jsx as _jsx } from "react/jsx-runtime";
const DEFAULT_ALIGNMENT_CONTROLS = [{
icon: alignLeft,
title: __('Align text left'),
align: 'left'
}, {
icon: alignCenter,
title: __('Align text center'),
align: 'center'
}, {
icon: alignRight,
title: __('Align text right'),
align: 'right'
}];
const POPOVER_PROPS = {
placement: 'bottom-start'
};
function AlignmentUI({
value,
onChange,
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
label = __('Align text'),
description = __('Change text alignment'),
isCollapsed = true,
isToolbar
}) {
function applyOrUnset(align) {
return () => onChange(value === align ? undefined : align);
}
const activeAlignment = alignmentControls.find(control => control.align === value);
function setIcon() {
if (activeAlignment) {
return activeAlignment.icon;
}
return isRTL() ? alignRight : alignLeft;
}
const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const extraProps = isToolbar ? {
isCollapsed
} : {
toggleProps: {
description
},
popoverProps: POPOVER_PROPS
};
return /*#__PURE__*/_jsx(UIComponent, {
icon: setIcon(),
label: label,
controls: alignmentControls.map(control => {
const {
align
} = control;
const isActive = value === align;
return {
...control,
isActive,
role: isCollapsed ? 'menuitemradio' : undefined,
onClick: applyOrUnset(align)
};
}),
...extraProps
});
}
export default AlignmentUI;
//# sourceMappingURL=ui.js.map