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