63 lines
1.8 KiB
TypeScript
63 lines
1.8 KiB
TypeScript
import { observer } from "mobx-react-lite";
|
|
import { useEffect } from "react";
|
|
import MemoAttachmentListView from "@/components/MemoAttachmentListView";
|
|
import useLoading from "@/hooks/useLoading";
|
|
import { cn } from "@/lib/utils";
|
|
import { attachmentStore } from "@/store";
|
|
import Error from "./Error";
|
|
|
|
interface Props {
|
|
resourceId: string;
|
|
params: string;
|
|
}
|
|
|
|
const getAdditionalClassNameWithParams = (params: URLSearchParams) => {
|
|
const additionalClassNames = [];
|
|
if (params.has("align")) {
|
|
const align = params.get("align");
|
|
if (align === "center") {
|
|
additionalClassNames.push("mx-auto");
|
|
}
|
|
}
|
|
if (params.has("size")) {
|
|
const size = params.get("size");
|
|
if (size === "lg") {
|
|
additionalClassNames.push("w-full");
|
|
} else if (size === "md") {
|
|
additionalClassNames.push("w-2/3");
|
|
} else if (size === "sm") {
|
|
additionalClassNames.push("w-1/3");
|
|
}
|
|
}
|
|
if (params.has("width")) {
|
|
const width = params.get("width");
|
|
additionalClassNames.push(`w-[${width}]`);
|
|
}
|
|
return additionalClassNames.join(" ");
|
|
};
|
|
|
|
const EmbeddedAttachment = observer(({ resourceId: uid, params: paramsStr }: Props) => {
|
|
const loadingState = useLoading();
|
|
const attachment = attachmentStore.getAttachmentByName(uid);
|
|
const params = new URLSearchParams(paramsStr);
|
|
|
|
useEffect(() => {
|
|
attachmentStore.fetchAttachmentByName(`attachments/${uid}`).finally(() => loadingState.setFinish());
|
|
}, [uid]);
|
|
|
|
if (loadingState.isLoading) {
|
|
return null;
|
|
}
|
|
if (!attachment) {
|
|
return <Error message={`Attachment not found: ${uid}`} />;
|
|
}
|
|
|
|
return (
|
|
<div className={cn("max-w-full", getAdditionalClassNameWithParams(params))}>
|
|
<MemoAttachmentListView attachments={[attachment]} />
|
|
</div>
|
|
);
|
|
});
|
|
|
|
export default EmbeddedAttachment;
|