@wordpress/block-library
Version:
Block library for the WordPress editor.
64 lines (63 loc) • 2.01 kB
JavaScript
// packages/block-library/src/query-total/edit.js
import { useBlockProps, BlockControls } from "@wordpress/block-editor";
import { ToolbarGroup, ToolbarDropdownMenu } from "@wordpress/components";
import { __ } from "@wordpress/i18n";
import { resultsFound, displayingResults } from "./icons";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function QueryTotalEdit({ attributes, setAttributes }) {
const { displayType } = attributes;
const blockProps = useBlockProps();
const getButtonPositionIcon = () => {
switch (displayType) {
case "total-results":
return resultsFound;
case "range-display":
return displayingResults;
}
};
const buttonPositionControls = [
{
role: "menuitemradio",
title: __("Total results"),
isActive: displayType === "total-results",
icon: resultsFound,
onClick: () => {
setAttributes({ displayType: "total-results" });
}
},
{
role: "menuitemradio",
title: __("Range display"),
isActive: displayType === "range-display",
icon: displayingResults,
onClick: () => {
setAttributes({ displayType: "range-display" });
}
}
];
const controls = /* @__PURE__ */ jsx(BlockControls, { children: /* @__PURE__ */ jsx(ToolbarGroup, { children: /* @__PURE__ */ jsx(
ToolbarDropdownMenu,
{
icon: getButtonPositionIcon(),
label: __("Change display type"),
controls: buttonPositionControls
}
) }) });
const renderDisplay = () => {
if (displayType === "total-results") {
return /* @__PURE__ */ jsx(Fragment, { children: __("12 results found") });
}
if (displayType === "range-display") {
return /* @__PURE__ */ jsx(Fragment, { children: __("Displaying 1 \u2013 10 of 12") });
}
return null;
};
return /* @__PURE__ */ jsxs("div", { ...blockProps, children: [
controls,
renderDisplay()
] });
}
export {
QueryTotalEdit as default
};
//# sourceMappingURL=edit.js.map