strapi-plugin-generic-custom-fields
Version:
This plugin allows you to easily add custom fields to Strapi.
176 lines (175 loc) • 6.65 kB
JavaScript
;
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const admin = require("@strapi/strapi/admin");
const react = require("react");
const designSystem = require("@strapi/design-system");
const usehooks = require("@uidotdev/usehooks");
const styledComponents = require("styled-components");
const index = require("./index-Dfw1Zutk.js");
const Icon = styledComponents.styled.span.withConfig({
shouldForwardProp: (prop) => prop !== "src" && prop !== "colorMask"
}).attrs((props) => {
if (props.colorMask) {
return {
style: {
maskImage: `url(${props.src})`,
maskRepeat: "no-repeat",
maskSize: "100% 100%",
WebkitMaskImage: `url(${props.src})`,
WebkitMaskRepeat: "no-repeat",
WebkitMaskSize: "100% 100%"
}
};
} else {
return {
style: {
backgroundImage: `url(${props.src})`,
backgroundRepeat: "no-repeat",
backgroundSize: "contain",
backgroundPosition: "center"
}
};
}
})`
width: 2em;
height: 2em;
display: inline-block;
margin-right: 0.75em;
vertical-align: middle;
background-color: currentColor;
`;
const Input = react.forwardRef((props, forwardedRef) => {
const { get } = admin.useFetchClient();
const { value, onChange, error, attribute: { customField: customFieldUID } } = props;
const locale = admin.useQueryParams()[0].query.plugins?.i18n?.locale;
const [loading, setLoading] = react.useState(true);
const [items, setItems] = react.useState(void 0);
const [filter, setFilter] = react.useState("");
const debouncedFilter = usehooks.useDebounce(filter, 600);
const [customFieldConfig, setCustomFieldConfig] = react.useState(void 0);
const [selectedItem, setSelectedItem] = react.useState(void 0);
const loadFieldConfig = react.useCallback(async (localCustomFieldUID) => {
const searchParams = new URLSearchParams();
if (locale) {
searchParams.set("locale", locale);
}
const response = await get(
`/${index.PLUGIN_ID}/config/custom-fields/${localCustomFieldUID}?${searchParams.toString()}`
);
setCustomFieldConfig(response.data);
}, []);
const loadItems = react.useCallback(async () => {
if (!customFieldConfig) {
return;
}
setLoading(true);
if (!items || customFieldConfig.searchable) {
if (!props.disabled) {
const searchParams = new URLSearchParams();
if (locale) {
searchParams.set("locale", locale);
}
if (customFieldConfig.searchable && debouncedFilter) {
searchParams.set("query", debouncedFilter);
}
const response = await get(
`/${index.PLUGIN_ID}/custom-fields/${customFieldUID}/items?${searchParams.toString()}`
);
if (value && !response.data.items.find((item) => item.value === value)) {
const searchParams2 = new URLSearchParams();
searchParams2.set("value", value);
if (locale) {
searchParams2.set("locale", locale);
}
const responseItem = await get(
`/${index.PLUGIN_ID}/custom-fields/${customFieldUID}/item?${searchParams2.toString()}`
);
response.data.items.unshift(responseItem.data);
}
setItems(response.data.items);
setSelectedItem(response.data.items.find((item) => item.value === value));
} else if (value) {
const searchParams = new URLSearchParams();
searchParams.set("value", value);
if (locale) {
searchParams.set("locale", locale);
}
const response = await get(
`/${index.PLUGIN_ID}/custom-fields/${customFieldUID}/item?${searchParams.toString()}`
);
setItems([response.data]);
setSelectedItem(response.data);
}
}
setLoading(false);
}, [
props.disabled,
customFieldConfig,
debouncedFilter,
locale
]);
react.useEffect(() => {
loadFieldConfig(customFieldUID).catch((error2) => {
console.error(`Error fetching custom field config for CustomField[${customFieldUID}]:`, error2);
});
}, [
loadFieldConfig,
customFieldUID
]);
react.useEffect(() => {
if (!customFieldConfig) {
return;
}
loadItems().catch((error2) => {
console.error(`Error fetching items for CustomField[${customFieldUID}]:`, error2);
});
}, [
loadItems,
customFieldConfig
]);
react.useEffect(() => {
if (value) {
setSelectedItem(items?.find((item) => item.value === value));
} else {
setSelectedItem(void 0);
}
}, [value, items]);
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { disabled: props.disabled, required: props.required, hint: props.hint, name: props.name, id: props.name, error, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { action: props.labelAction, children: props.label }),
items ? /* @__PURE__ */ jsxRuntime.jsx(
designSystem.Combobox,
{
ref: forwardedRef,
onChange: (newValue) => onChange({ target: { name: props.name, value: newValue ?? "" } }),
defaultTextValue: selectedItem?.label || value || void 0,
value,
placeholder: props.placeholder,
disabled: props.disabled,
loading,
autocomplete: { type: "list", filter: "contains" },
onInputChange: (ev) => setFilter(ev.target.value),
filterValue: customFieldConfig?.searchable ? "" : void 0,
startIcon: selectedItem?.icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { src: selectedItem.icon.src, colorMask: selectedItem.icon.colorMask }) : null,
onClear: props.disabled ? void 0 : () => onChange({ target: { name: props.name, value: "" } }),
children: items.map((item) => {
return /* @__PURE__ */ jsxRuntime.jsxs(
designSystem.ComboboxOption,
{
value: item.value,
children: [
item.icon ? /* @__PURE__ */ jsxRuntime.jsx(Icon, { src: item.icon.src, colorMask: item.icon.colorMask }) : null,
item.label
]
},
item.value
);
})
},
`${props.name}-combobox`
) : /* @__PURE__ */ jsxRuntime.jsx(designSystem.TextInput, { disabled: true, value: value ?? "", startAction: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Loader, { small: true }) }, `${props.name}-input`),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
] });
});
exports.default = Input;