@wordpress/block-library
Version:
Block library for the WordPress editor.
137 lines (136 loc) • 4.77 kB
JavaScript
// packages/block-library/src/icon/components/custom-inserter/index.js
import { __ } from "@wordpress/i18n";
import { Modal, SearchControl, Spinner } from "@wordpress/components";
import { Stack, Tabs } from "@wordpress/ui";
import { useState, useMemo } from "@wordpress/element";
import { useDebounce } from "@wordpress/compose";
import { useSelect } from "@wordpress/data";
import { store as coreDataStore } from "@wordpress/core-data";
import IconGrid from "./icon-grid.mjs";
import { normalizeSearchInput } from "../../../utils/search-patterns.mjs";
import { jsx, jsxs } from "react/jsx-runtime";
function CustomInserterModal({ onClose, value, onChange }) {
const [searchInput, setSearchInput] = useState("");
const [currentCollection, setCurrentCollection] = useState(null);
const debouncedSetSearchInput = useDebounce(setSearchInput, 300);
const collections = useSelect(
(select) => select(coreDataStore).getEntityRecords(
"root",
"iconCollection"
),
[]
);
const selectedCollection = value?.split("/")[0];
const collectionSlug = currentCollection ?? (collections?.some(({ slug }) => slug === selectedCollection) ? selectedCollection : collections?.[0]?.slug) ?? null;
const { icons, hasResolvedIcons } = useSelect(
(select) => {
if (collectionSlug === null) {
return { icons: null, hasResolvedIcons: false };
}
const query = collectionSlug === "" ? {} : { collection: collectionSlug };
const { getEntityRecords, hasFinishedResolution } = select(coreDataStore);
return {
icons: getEntityRecords("root", "icon", query),
hasResolvedIcons: hasFinishedResolution("getEntityRecords", [
"root",
"icon",
query
])
};
},
[collectionSlug]
);
const filteredIcons = useMemo(() => {
if (!icons) {
return [];
}
if (searchInput) {
const input = normalizeSearchInput(searchInput);
return icons.filter((icon) => {
const iconName = normalizeSearchInput(icon.name);
const iconLabel = normalizeSearchInput(icon.label);
return iconName.includes(input) || iconLabel.includes(input);
});
}
return icons;
}, [searchInput, icons]);
return /* @__PURE__ */ jsx(
Modal,
{
className: "wp-block-icon__inserter-modal",
title: __("Icon library"),
onRequestClose: onClose,
isFullScreen: true,
children: /* @__PURE__ */ jsxs(
Tabs.Root,
{
className: "wp-block-icon__inserter",
orientation: "vertical",
value: collectionSlug,
onValueChange: setCurrentCollection,
children: [
/* @__PURE__ */ jsxs(
Stack,
{
direction: "column",
gap: "lg",
className: "wp-block-icon__inserter-sidebar",
children: [
/* @__PURE__ */ jsx(
SearchControl,
{
value: searchInput,
onChange: debouncedSetSearchInput
}
),
/* @__PURE__ */ jsxs(Tabs.List, { children: [
/* @__PURE__ */ jsx(Tabs.Tab, { value: "", children: __("All") }),
collections?.map((collection) => /* @__PURE__ */ jsx(
Tabs.Tab,
{
value: collection.slug,
children: collection.label
},
collection.slug
))
] })
]
}
),
[{ slug: "" }, ...collections ?? []].map(
(collection) => /* @__PURE__ */ jsx(
Tabs.Panel,
{
tabIndex: -1,
value: collection.slug,
className: "wp-block-icon__inserter-panel",
children: !hasResolvedIcons ? /* @__PURE__ */ jsx(
"div",
{
className: "wp-block-icon__inserter-loading",
role: "status",
"aria-label": __("Loading…"),
children: /* @__PURE__ */ jsx(Spinner, {})
}
) : /* @__PURE__ */ jsx(
IconGrid,
{
icons: filteredIcons,
onChange,
value
}
)
},
collection.slug
)
)
]
}
)
}
);
}
export {
CustomInserterModal as default
};
//# sourceMappingURL=index.mjs.map