strapi-plugin-icons-field
Version:
A customizable plugin for Strapi to integrate an icons field into your content types.
85 lines (84 loc) • 3.36 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const designSystem = require("@strapi/design-system");
const admin = require("@strapi/strapi/admin");
const React = require("react");
const reactIntl = require("react-intl");
const index = require("./index-DthZv_cO.js");
const parse = require("html-react-parser");
const _interopDefault = (e) => e && e.__esModule ? e : { default: e };
const React__default = /* @__PURE__ */ _interopDefault(React);
const parse__default = /* @__PURE__ */ _interopDefault(parse);
function Icon({ icon, ...props }) {
const parsedElement = icon && parse__default.default(icon);
if (parsedElement && React__default.default.isValidElement(parsedElement)) {
return React__default.default.cloneElement(parsedElement, props);
}
return null;
}
const IconSelect = (props) => {
const { label, attribute, placeholder, disabled, error, name, hint, onChange, required, value } = props;
const { formatMessage } = reactIntl.useIntl();
const [icons, setIcons] = React.useState([]);
const { get } = admin.useFetchClient();
React.useEffect(() => {
const fetchIcons = async () => {
try {
const { data } = await get(`/${index.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 = React.useMemo(
() => icons.find((i) => i[attribute.options.output] === value)?.svg,
[value, icons]
);
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { error, hint, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.SingleSelect,
{
"aria-label": label,
startIcon: /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
designSystem.SingleSelectOption,
{
startIcon: /* @__PURE__ */ jsxRuntime.jsx(Icon, { icon: icon2.svg, style: { height: "24px" } }),
value: icon2[attribute.options.output],
children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Box, { paddingLeft: 2, paddingRight: 2, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { children: icon2.name }) })
},
icon2.name
))
}
),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {})
] });
};
exports.default = IconSelect;