Adds capability of on-demand resolver to render more complex stack items

This commit is contained in:
Emmaline Autumn 2024-08-21 16:08:10 -06:00
parent 1799c8da79
commit b2e7223c16

View File

@ -21,6 +21,7 @@ export function Resolver({ resolver }: { resolver: string }) {
return <span>{content}</span>;
}
const defaultTemplate = "$x";
export function OnDemandResolver({
resolver,
template,
@ -34,16 +35,25 @@ export function OnDemandResolver({
const res = useRef(new TTCQueryResolver(parser));
const [content, setContent] = useState<ReactNode>("");
const generateContent = useCallback(() => {
let content = template || "$x";
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);
if (typeof thing.display === "function")
content = content.replaceAll(idx, thing.display() as string);
else content = content.replaceAll(idx, thing.display as string);
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;
}
setContent(content);
// else if (idx === defaultTemplate && )
else content = content.replaceAll(idx, thing.display as string);
return content;
}
});
}, [res, template]);
const resolve = useCallback(() => {
@ -52,7 +62,7 @@ export function OnDemandResolver({
}, [res, resolver, generateContent]);
return (
<div className="my-2 rounded-md p-1 bg-black/20 w-min">
<div className="my-2 rounded-md p-1 bg-black/20 flex flex-col">
<button
className="text-primary-600"
onMouseDown={() => setContent("")}