@wordpress/block-editor
Version:
78 lines (76 loc) • 2.01 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _i18n = require("@wordpress/i18n");
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
const DEFAULT_ALIGNMENT_CONTROLS = [{
icon: _icons.alignLeft,
title: (0, _i18n.__)('Align text left'),
align: 'left'
}, {
icon: _icons.alignCenter,
title: (0, _i18n.__)('Align text center'),
align: 'center'
}, {
icon: _icons.alignRight,
title: (0, _i18n.__)('Align text right'),
align: 'right'
}];
const POPOVER_PROPS = {
placement: 'bottom-start'
};
function AlignmentUI({
value,
onChange,
alignmentControls = DEFAULT_ALIGNMENT_CONTROLS,
label = (0, _i18n.__)('Align text'),
description = (0, _i18n.__)('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 (0, _i18n.isRTL)() ? _icons.alignRight : _icons.alignLeft;
}
const UIComponent = isToolbar ? _components.ToolbarGroup : _components.ToolbarDropdownMenu;
const extraProps = isToolbar ? {
isCollapsed
} : {
toggleProps: {
description
},
popoverProps: POPOVER_PROPS
};
return /*#__PURE__*/(0, _jsxRuntime.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
});
}
var _default = exports.default = AlignmentUI;
//# sourceMappingURL=ui.js.map