@wordpress/block-editor
Version:
92 lines (91 loc) • 2.29 kB
JavaScript
// packages/block-editor/src/components/justify-content-control/ui.js
import { ToolbarDropdownMenu, ToolbarGroup } from "@wordpress/components";
import {
justifyLeft,
justifyCenter,
justifyRight,
justifySpaceBetween,
justifyStretch
} from "@wordpress/icons";
import { __ } from "@wordpress/i18n";
import { jsx } from "react/jsx-runtime";
var icons = {
left: justifyLeft,
center: justifyCenter,
right: justifyRight,
"space-between": justifySpaceBetween,
stretch: justifyStretch
};
function JustifyContentUI({
allowedControls = ["left", "center", "right", "space-between"],
isCollapsed = true,
onChange,
value,
popoverProps,
isToolbar
}) {
const handleClick = (next) => {
if (next === value) {
onChange(void 0);
} else {
onChange(next);
}
};
const icon = value ? icons[value] : icons.left;
const allControls = [
{
name: "left",
icon: justifyLeft,
title: __("Justify items left"),
isActive: "left" === value,
onClick: () => handleClick("left")
},
{
name: "center",
icon: justifyCenter,
title: __("Justify items center"),
isActive: "center" === value,
onClick: () => handleClick("center")
},
{
name: "right",
icon: justifyRight,
title: __("Justify items right"),
isActive: "right" === value,
onClick: () => handleClick("right")
},
{
name: "space-between",
icon: justifySpaceBetween,
title: __("Space between items"),
isActive: "space-between" === value,
onClick: () => handleClick("space-between")
},
{
name: "stretch",
icon: justifyStretch,
title: __("Stretch items"),
isActive: "stretch" === value,
onClick: () => handleClick("stretch")
}
];
const UIComponent = isToolbar ? ToolbarGroup : ToolbarDropdownMenu;
const extraProps = isToolbar ? { isCollapsed } : {};
return /* @__PURE__ */ jsx(
UIComponent,
{
icon,
popoverProps,
label: __("Change items justification"),
controls: allControls.filter(
(elem) => allowedControls.includes(elem.name)
),
...extraProps
}
);
}
var ui_default = JustifyContentUI;
export {
ui_default as default
};
//# sourceMappingURL=ui.js.map