@wordpress/block-editor
Version:
61 lines (60 loc) • 1.67 kB
JavaScript
// packages/block-editor/src/components/global-styles/state-control.js
import { __, sprintf } from "@wordpress/i18n";
import { check, chevronDown } from "@wordpress/icons";
import { DropdownMenu, MenuGroup, MenuItem } from "@wordpress/components";
import { jsx } from "react/jsx-runtime";
function StateControl({
states = [],
value = "default",
onChange
}) {
if (!states || states.length === 0) {
return null;
}
const stateOptions = [
{ label: __("Default"), value: "default" },
...states.map((state) => ({
label: state.label,
value: state.value
}))
];
const getCurrentStateLabel = () => {
const currentOption = stateOptions.find(
(option) => option.value === value
);
return currentOption?.label || __("Default");
};
return /* @__PURE__ */ jsx(
DropdownMenu,
{
icon: chevronDown,
label: sprintf(
/* translators: %s: Current state (e.g. "Hover", "Focus") */
__("State: %s"),
getCurrentStateLabel()
),
text: getCurrentStateLabel(),
toggleProps: {
size: "compact",
variant: "tertiary",
iconPosition: "right"
},
children: ({ onClose }) => /* @__PURE__ */ jsx(MenuGroup, { label: __("State"), children: stateOptions.map((option) => /* @__PURE__ */ jsx(
MenuItem,
{
onClick: () => {
onChange(option.value);
onClose();
},
icon: value === option.value ? check : null,
children: option.label
},
option.value
)) })
}
);
}
export {
StateControl as default
};
//# sourceMappingURL=state-control.mjs.map