78 lines
2.3 KiB
TypeScript
78 lines
2.3 KiB
TypeScript
import { PublicationAtom } from "@/recoil/atoms/publication";
|
|
import { useState, useEffect, useCallback, useRef, ReactNode } from "react";
|
|
import { useRecoilValue } from "recoil";
|
|
import { TTCQueryResolver } from "../ttcQuery/TTCResolvers";
|
|
|
|
export function Resolver({ resolver }: { resolver: string }) {
|
|
const parser = useRecoilValue(PublicationAtom);
|
|
const [res] = useState(new TTCQueryResolver(parser));
|
|
const [content, setContent] = useState<ReactNode>("");
|
|
useEffect(() => {
|
|
let resolved = res.resolve(resolver);
|
|
|
|
setContent(
|
|
typeof resolved?.display === "function" ? (
|
|
<resolved.display />
|
|
) : (
|
|
resolved?.display
|
|
)
|
|
);
|
|
}, [resolver, res]);
|
|
return <span>{content}</span>;
|
|
}
|
|
|
|
const defaultTemplate = "$x";
|
|
export function OnDemandResolver({
|
|
resolver,
|
|
template,
|
|
title,
|
|
}: {
|
|
resolver: string;
|
|
template: string;
|
|
title?: string;
|
|
}) {
|
|
const parser = useRecoilValue(PublicationAtom);
|
|
const res = useRef(new TTCQueryResolver(parser));
|
|
const [content, setContent] = useState<ReactNode>("");
|
|
const generateContent = useCallback(() => {
|
|
setContent(() => {
|
|
let content = template || defaultTemplate;
|
|
|
|
const stackIdxs = Array.from(new Set(content.match(/\$(?:\d+|x)/g)));
|
|
for (const idx of stackIdxs) {
|
|
let thing = res.current.getFromStack(idx);
|
|
if (Array.isArray(thing)) thing = thing.at(0);
|
|
console.log(thing);
|
|
if (typeof thing.display === "function") {
|
|
const disp = thing.display();
|
|
if (typeof disp === "string" || typeof disp === "number")
|
|
content = content.replaceAll(idx, disp.toString());
|
|
else return disp as ReactNode;
|
|
}
|
|
// else if (idx === defaultTemplate && )
|
|
else content = content.replaceAll(idx, thing.display as string);
|
|
return content;
|
|
}
|
|
});
|
|
}, [res, template]);
|
|
|
|
const resolve = useCallback(() => {
|
|
res.current.resolve(resolver, true);
|
|
generateContent();
|
|
}, [res, resolver, generateContent]);
|
|
|
|
return (
|
|
<div className="my-2 rounded-md p-1 bg-black/20 flex flex-col">
|
|
<button
|
|
className="text-primary-600"
|
|
onMouseDown={() => setContent("")}
|
|
onClick={resolve}
|
|
>
|
|
{title ?? "Resolve"}
|
|
</button>
|
|
<br />
|
|
{!!content && <span>{content}</span>}
|
|
</div>
|
|
);
|
|
}
|