@wordpress/block-library
Version:
Block library for the WordPress editor.
56 lines (55 loc) • 2.39 kB
JavaScript
// packages/block-library/src/icon/components/custom-inserter/icon-grid.js
import { __ } from "@wordpress/i18n";
import { Button } from "@wordpress/components";
import { useAsyncList } from "@wordpress/compose";
import { useRef, useLayoutEffect } from "@wordpress/element";
import { getScrollContainer } from "@wordpress/dom";
import HtmlRenderer from "../../../utils/html-renderer.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
var BATCH_SIZE = 20;
function IconGrid({ icons, onChange, value }) {
const shownIcons = useAsyncList(icons, {
step: BATCH_SIZE
});
const selectedIconRef = useRef();
const selectedIndex = icons?.findIndex((icon) => icon.name === value) ?? -1;
const isReadyToScroll = selectedIndex >= 0 && (shownIcons.length >= selectedIndex + BATCH_SIZE || shownIcons.length === icons.length);
useLayoutEffect(() => {
const node = selectedIconRef.current;
if (!isReadyToScroll || !node) {
return;
}
if (getScrollContainer(node)?.scrollTop) {
return;
}
node.scrollIntoView({ block: "center" });
}, [isReadyToScroll]);
return /* @__PURE__ */ jsx("div", { className: "wp-block-icon__inserter-grid", children: !icons?.length ? /* @__PURE__ */ jsx("div", { className: "wp-block-icon__inserter-grid-no-results", children: /* @__PURE__ */ jsx("p", { children: __("No results found.") }) }) : /* @__PURE__ */ jsx(
"div",
{
className: "wp-block-icon__inserter-grid-icons-list",
"aria-label": __("Icon library"),
children: shownIcons.map((icon) => {
return /* @__PURE__ */ jsxs(
Button,
{
ref: icon.name === value ? selectedIconRef : void 0,
className: "wp-block-icon__inserter-grid-icons-list-item",
onClick: () => onChange(icon.name),
variant: icon.name === value ? "primary" : void 0,
__next40pxDefaultSize: true,
children: [
/* @__PURE__ */ jsx("span", { className: "wp-block-icon__inserter-grid-icons-list-item-icon", children: /* @__PURE__ */ jsx(HtmlRenderer, { html: icon.content }) }),
/* @__PURE__ */ jsx("span", { className: "wp-block-icon__inserter-grid-icons-list-item-title", children: icon.label })
]
},
icon.name
);
})
}
) });
}
export {
IconGrid as default
};
//# sourceMappingURL=icon-grid.mjs.map