@wordpress/block-editor
Version:
85 lines (83 loc) • 2.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _components = require("@wordpress/components");
var _icons = require("@wordpress/icons");
var _i18n = require("@wordpress/i18n");
var _jsxRuntime = require("react/jsx-runtime");
/**
* WordPress dependencies
*/
const icons = {
left: _icons.justifyLeft,
center: _icons.justifyCenter,
right: _icons.justifyRight,
'space-between': _icons.justifySpaceBetween,
stretch: _icons.justifyStretch
};
function JustifyContentUI({
allowedControls = ['left', 'center', 'right', 'space-between'],
isCollapsed = true,
onChange,
value,
popoverProps,
isToolbar
}) {
// If the control is already selected we want a click
// again on the control to deselect the item, so we
// call onChange( undefined )
const handleClick = next => {
if (next === value) {
onChange(undefined);
} else {
onChange(next);
}
};
const icon = value ? icons[value] : icons.left;
const allControls = [{
name: 'left',
icon: _icons.justifyLeft,
title: (0, _i18n.__)('Justify items left'),
isActive: 'left' === value,
onClick: () => handleClick('left')
}, {
name: 'center',
icon: _icons.justifyCenter,
title: (0, _i18n.__)('Justify items center'),
isActive: 'center' === value,
onClick: () => handleClick('center')
}, {
name: 'right',
icon: _icons.justifyRight,
title: (0, _i18n.__)('Justify items right'),
isActive: 'right' === value,
onClick: () => handleClick('right')
}, {
name: 'space-between',
icon: _icons.justifySpaceBetween,
title: (0, _i18n.__)('Space between items'),
isActive: 'space-between' === value,
onClick: () => handleClick('space-between')
}, {
name: 'stretch',
icon: _icons.justifyStretch,
title: (0, _i18n.__)('Stretch items'),
isActive: 'stretch' === value,
onClick: () => handleClick('stretch')
}];
const UIComponent = isToolbar ? _components.ToolbarGroup : _components.ToolbarDropdownMenu;
const extraProps = isToolbar ? {
isCollapsed
} : {};
return /*#__PURE__*/(0, _jsxRuntime.jsx)(UIComponent, {
icon: icon,
popoverProps: popoverProps,
label: (0, _i18n.__)('Change items justification'),
controls: allControls.filter(elem => allowedControls.includes(elem.name)),
...extraProps
});
}
var _default = exports.default = JustifyContentUI;
//# sourceMappingURL=ui.js.map