strapi-plugin-oembed
Version:
Embed content from third-party sites in Strapi
149 lines (148 loc) • 7.78 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const jsxRuntime = require("react/jsx-runtime");
const designSystem = require("@strapi/design-system");
const icons = require("@strapi/icons");
const reactIntl = require("react-intl");
const index = require("./index-CQQYxGzQ.js");
const admin = require("@strapi/strapi/admin");
const react = require("react");
const getTranslation = (id) => `${index.pkgJson.strapi.name}.${id}`;
function ImportModal({ onImport, entry, children }) {
const [open, setOpen] = react.useState(false);
const [isLoading, setIsLoading] = react.useState(false);
const [inputError, setInputError] = react.useState("");
const [url, setUrl] = react.useState("");
const { get } = admin.useFetchClient();
const handleSubmit = react.useCallback(
(event) => {
event.preventDefault();
(async () => {
setIsLoading(true);
try {
setInputError("");
const { data } = await get(
`/${index.pkgJson.strapi.name}/fetch?url=${encodeURIComponent(url)}`
);
if (data.error) {
setInputError(data.error);
} else {
onImport(data);
setOpen(false);
}
} catch (error) {
const message = error instanceof Error ? error.message : "An error occurred";
setInputError(message);
} finally {
setIsLoading(false);
}
})();
},
[url, get, onImport]
);
react.useEffect(() => {
setUrl(entry?.url ?? "");
}, [entry?.url]);
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Root, { open, onOpenChange: setOpen, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Trigger, { children }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Content, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Title, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: getTranslation("modal.import.title") }) }) }),
/* @__PURE__ */ jsxRuntime.jsxs("form", { onSubmit: handleSubmit, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Body, { children: /* @__PURE__ */ jsxRuntime.jsxs(
designSystem.Field.Root,
{
name: "name",
error: inputError,
required: true,
hint: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: getTranslation("modal.import.input.description") }),
children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: getTranslation("modal.import.input.label") }) }),
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.Field.Input,
{
type: "text",
value: url,
onChange: ({ target: { value } }) => {
setUrl(value);
}
}
),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
]
}
) }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.Modal.Footer, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Modal.Close, { children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { variant: "tertiary", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: "app.components.Button.cancel" }) }) }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Button, { type: "submit", variant: "default", loading: isLoading, children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: getTranslation("modal.import.button.import") }) })
] })
] })
] })
] });
}
function InputEmptyButton({ onImport }) {
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.CarouselInput, { label: "", nextLabel: "", previousLabel: "", selectedSlide: 0, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.CarouselSlide, { label: "", style: { cursor: "pointer" }, children: /* @__PURE__ */ jsxRuntime.jsx(ImportModal, { entry: null, onImport, children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Flex, { direction: "column", gap: "12px", alignItems: "center", children: [
/* @__PURE__ */ jsxRuntime.jsx(icons.PlusCircle, { "aria-hidden": true, width: "3.2em", height: "3.2em", fill: "primary600" }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Typography, { variant: "pi", fontWeight: "bold", textColor: "neutral600", children: /* @__PURE__ */ jsxRuntime.jsx(reactIntl.FormattedMessage, { id: getTranslation("form.button.import") }) })
] }) }) }) });
}
function InputOembedCard({ entry, onImport }) {
const { formatMessage } = reactIntl.useIntl();
const { oembed, thumbnail, url } = entry;
const onOpen = () => {
window.open(url, "_blank", "noopener,noreferrer");
};
const onClear = () => onImport(null);
return /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Card, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardHeader, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardAction, { position: "end", children: [
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.IconButton,
{
label: formatMessage({ id: getTranslation("form.button.open") }),
onClick: onOpen,
children: /* @__PURE__ */ jsxRuntime.jsx(icons.ExternalLink, {})
}
),
/* @__PURE__ */ jsxRuntime.jsx(ImportModal, { entry, onImport, children: /* @__PURE__ */ jsxRuntime.jsx(designSystem.IconButton, { label: formatMessage({ id: getTranslation("form.button.edit") }), children: /* @__PURE__ */ jsxRuntime.jsx(icons.Pencil, {}) }) }),
/* @__PURE__ */ jsxRuntime.jsx(
designSystem.IconButton,
{
label: formatMessage({ id: getTranslation("form.button.delete") }),
onClick: onClear,
variant: "danger",
children: /* @__PURE__ */ jsxRuntime.jsx(icons.Trash, {})
}
)
] }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardAsset, { src: thumbnail ?? void 0 }),
oembed.author_name && /* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTimer, { children: oembed.author_name })
] }),
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardBody, { children: [
/* @__PURE__ */ jsxRuntime.jsxs(designSystem.CardContent, { children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardTitle, { children: oembed.title ?? url }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardSubtitle, { children: oembed.provider_name })
] }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.CardBadge, { children: oembed.type })
] })
] });
}
function Input({ error = void 0, name, label, onChange, value }) {
const hasValue = !!value?.url && !!value?.oembed;
const handleImport = (data) => {
onChange({
target: {
name,
value: data
}
});
};
return /* @__PURE__ */ jsxRuntime.jsx(designSystem.DesignSystemProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(designSystem.Field.Root, { name: "oembed", error, children: [
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Label, { children: label }),
!hasValue && /* @__PURE__ */ jsxRuntime.jsx(InputEmptyButton, { onImport: handleImport }),
hasValue && /* @__PURE__ */ jsxRuntime.jsx(InputOembedCard, { entry: value, onImport: handleImport }),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Hint, {}),
/* @__PURE__ */ jsxRuntime.jsx(designSystem.Field.Error, {})
] }) });
}
exports.default = Input;