strapi-plugin-icons-field
Version:
A customizable plugin for Strapi to integrate an icons field into your content types.
82 lines (81 loc) • 2.88 kB
JavaScript
import { jsxs, jsx } from "react/jsx-runtime";
import { Field, SingleSelect, SingleSelectOption, Box, Typography } from "@strapi/design-system";
import { useFetchClient } from "@strapi/strapi/admin";
import React, { useState, useEffect, useMemo } from "react";
import { useIntl } from "react-intl";
import { P as PLUGIN_ID } from "./index-Bc2EdcV5.mjs";
import parse from "html-react-parser";
function Icon({ icon, ...props }) {
const parsedElement = icon && parse(icon);
if (parsedElement && React.isValidElement(parsedElement)) {
return React.cloneElement(parsedElement, props);
}
return null;
}
const IconSelect = (props) => {
const { label, attribute, placeholder, disabled, error, name, hint, onChange, required, value } = props;
const { formatMessage } = useIntl();
const [icons, setIcons] = useState([]);
const { get } = useFetchClient();
useEffect(() => {
const fetchIcons = async () => {
try {
const { data } = await get(`/${PLUGIN_ID}/icons`);
if (!data) return;
if (!attribute?.options?.selection) {
setIcons(data);
return;
}
const { selection } = attribute.options;
if (Array.isArray(selection) && selection.length > 0 && selection[0] !== "") {
setIcons(data.filter((icon2) => selection.includes(icon2.name)));
} else {
setIcons(data);
}
} catch (error2) {
console.error("Error fetching icons:", error2);
}
};
fetchIcons();
}, []);
const handleChange = (value2) => {
onChange({ target: { name, value: value2, type: attribute.type } });
};
const icon = useMemo(
() => icons.find((i) => i[attribute.options.output] === value)?.svg,
[value, icons]
);
return /* @__PURE__ */ jsxs(Field.Root, { error, hint, children: [
/* @__PURE__ */ jsx(Field.Label, { children: label }),
/* @__PURE__ */ jsx(
SingleSelect,
{
"aria-label": label,
startIcon: /* @__PURE__ */ jsx(Icon, { icon, style: { height: "24px" } }),
required,
placeholder,
clearLabel: formatMessage({ id: "clearLabel", defaultMessage: "Clear" }),
disabled,
error,
onClear: () => handleChange(""),
onChange: (value2) => {
handleChange(value2);
},
value,
children: icons.map((icon2) => /* @__PURE__ */ jsx(
SingleSelectOption,
{
startIcon: /* @__PURE__ */ jsx(Icon, { icon: icon2.svg, style: { height: "24px" } }),
value: icon2[attribute.options.output],
children: /* @__PURE__ */ jsx(Box, { paddingLeft: 2, paddingRight: 2, children: /* @__PURE__ */ jsx(Typography, { children: icon2.name }) })
},
icon2.name
))
}
),
/* @__PURE__ */ jsx(Field.Hint, {})
] });
};
export {
IconSelect as default
};