strapi-plugin-icons-field
Version:
A customizable plugin for Strapi to integrate an icons field into your content types.
161 lines (159 loc) • 4.86 kB
JavaScript
import { useRef, useEffect } from "react";
import { jsx } from "react/jsx-runtime";
import { Flex } from "@strapi/design-system";
import { Rocket } from "@strapi/icons";
import { styled } from "styled-components";
const __variableDynamicImportRuntimeHelper = (glob, path, segs) => {
const v = glob[path];
if (v) {
return typeof v === "function" ? v() : Promise.resolve(v);
}
return new Promise((_, reject) => {
(typeof queueMicrotask === "function" ? queueMicrotask : setTimeout)(
reject.bind(
null,
new Error(
"Unknown variable dynamic import: " + path + (path.split("/").length !== segs ? ". Note that variables only represent file names one level deep." : "")
)
)
);
});
};
const PLUGIN_ID = "icons-field";
const Initializer = ({ setPlugin }) => {
const ref = useRef(setPlugin);
useEffect(() => {
ref.current(PLUGIN_ID);
}, []);
return null;
};
const IconBox = styled(Flex)`
background-color: #ddfaf2;
border: 1px solid #87cec5;
svg > path {
fill: #19a796;
}
`;
const PluginIcon = () => {
return /* @__PURE__ */ jsx(IconBox, { justifyContent: "center", alignItems: "center", width: 7, height: 6, hasRadius: true, "aria-hidden": true, children: /* @__PURE__ */ jsx(Rocket, {}) });
};
const index = {
register(app) {
app.customFields.register({
name: "icon",
pluginId: "icons-field",
type: "text",
icon: PluginIcon,
intlLabel: {
id: `${PLUGIN_ID}.label`,
defaultMessage: "Icon Selector"
},
intlDescription: {
id: `${PLUGIN_ID}.description`,
defaultMessage: "Select any icon from your own config"
},
components: {
Input: async () => import("./IconSelect-DTVM-f3o.mjs")
},
options: {
base: [
{
intlLabel: {
id: `${PLUGIN_ID}.options.base.output`,
defaultMessage: "Output"
},
description: {
id: `${PLUGIN_ID}.options.base.output.description`,
defaultMessage: "Choose which data to return from the api"
},
name: "options.output",
type: "select",
defaultValue: "name",
options: [
{
key: "name",
value: "name",
metadatas: {
intlLabel: {
id: `${PLUGIN_ID}.options.base.output.name`,
defaultMessage: "Name"
}
}
},
{
key: "svg",
value: "svg",
metadatas: {
intlLabel: {
id: `${PLUGIN_ID}.options.base.output.svg`,
defaultMessage: "Svg"
}
}
}
]
},
{
name: "options.selection",
type: "textarea-enum",
intlLabel: {
id: `${PLUGIN_ID}.options.base.selection`,
defaultMessage: "Make your own icons selection"
},
description: {
id: `${PLUGIN_ID}.options.base.selection.description`,
defaultMessage: "Leave empty to select all icones library"
},
placeholder: {
id: `${PLUGIN_ID}.options.base.selection.placeholder`,
defaultMessage: "Attribute name set on the config (one per line)"
}
}
],
advanced: [
{
sectionTitle: {
id: "global.settings",
defaultMessage: "Settings"
},
items: [
{
name: "required",
type: "checkbox",
intlLabel: {
id: `${PLUGIN_ID}.options.advanced.requiredField`,
defaultMessage: "Required field"
},
description: {
id: `${PLUGIN_ID}.options.advanced.requiredField.description`,
defaultMessage: "You won't be able to create an entry if this field is empty"
}
}
]
}
]
}
});
app.registerPlugin({
id: PLUGIN_ID,
initializer: Initializer,
isReady: false,
name: PLUGIN_ID
});
},
async registerTrads({ locales }) {
return Promise.all(
locales.map(async (locale) => {
try {
const { default: data } = await __variableDynamicImportRuntimeHelper(/* @__PURE__ */ Object.assign({ "./translations/en.json": () => import("./en-BZFOIBIH.mjs") }), `./translations/${locale}.json`, 3);
return { data, locale };
} catch {
return { data: {}, locale };
}
})
);
}
};
export {
PLUGIN_ID as P,
index as i
};