thepaperpilot/chromatic-lattice
1
0
Fork 0
Code Issues Pull requests Releases Activity Actions

Fix createCollapsibleModifierSections not being lazy

Browse source
This commit is contained in:
thepaperpilot 2022-07-26 23:56:20 -05:00
parent 1976628b16
commit 0c3ce6af45
1 changed files with 67 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

117
src/data/common.tsx
View file

@ -259,62 +259,79 @@ export interface Section {
export function createCollapsibleModifierSections( export function createCollapsibleModifierSections(
sectionsFunc: () => Section[] sectionsFunc: () => Section[]
): [JSXFunction, Persistent<boolean>[]] { ): [JSXFunction, Persistent<boolean>[]] {
return createLazyProxy(() => { const sections: Section[] = [];
const sections = sectionsFunc(); const processed:
| {
base: ProcessedComputable<DecimalSource | undefined>[];
baseText: ProcessedComputable<CoercableComponent | undefined>[];
visible: ProcessedComputable<boolean | undefined>[];
}
| Record<string, never> = {};
let calculated = false;
function calculateSections() {
if (!calculated) {
sections.push(...sectionsFunc());
processed.base = sections.map(s => convertComputable(s.base));
processed.baseText = sections.map(s => convertComputable(s.baseText));
processed.visible = sections.map(s => convertComputable(s.visible));
calculated = true;
}
return sections;
}
const processedBase = sections.map(s => convertComputable(s.base)); const collapsed = createLazyProxy(() =>
const processedBaseText = sections.map(s => convertComputable(s.baseText)); calculateSections().map(() => persistent<boolean>(false))
const processedVisible = sections.map(s => convertComputable(s.visible)); ) as Persistent<boolean>[];
const collapsed = sections.map(() => persistent<boolean>(false)); const jsxFunc = jsx(() => {
const jsxFunc = jsx(() => { const sections = calculateSections();
const sectionJSX = sections.map((s, i) => {
if (unref(processedVisible[i]) === false) return null;
const header = (
<h3
onClick={() => (collapsed[i].value = !collapsed[i].value)}
style="cursor: pointer"
>
<span class={"modifier-toggle" + (unref(collapsed[i]) ? " collapsed" : "")}>
▼
</span>
{s.title}
{s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
</h3>
);
const modifiers = unref(collapsed[i]) ? null : ( const sectionJSX = sections.map((s, i) => {
<> if (unref(processed.visible[i]) === false) return null;
<div class="modifier-container"> const header = (
<span class="modifier-amount"> <h3
{format(unref(processedBase[i]) ?? 1)} onClick={() => (collapsed[i].value = !collapsed[i].value)}
{s.unit} style="cursor: pointer"
</span> >
<span class="modifier-description"> <span class={"modifier-toggle" + (unref(collapsed[i]) ? " collapsed" : "")}>
{renderJSX(unref(processedBaseText[i]) ?? "Base")} ▼
</span> </span>
</div> {s.title}
{renderJSX(unref(s.modifier.description))} {s.subtitle ? <span class="subtitle"> ({s.subtitle})</span> : null}
</> </h3>
); );
return ( const modifiers = unref(collapsed[i]) ? null : (
<> <>
{i === 0 ? null : <br />} <div class="modifier-container">
<div> <span class="modifier-amount">
{header} {format(unref(processed.base[i]) ?? 1)}
<br />
{modifiers}
<hr />
Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
{s.unit} {s.unit}
</div> </span>
</> <span class="modifier-description">
); {renderJSX(unref(processed.baseText[i]) ?? "Base")}
}); </span>
return <>{sectionJSX}</>; </div>
{renderJSX(unref(s.modifier.description))}
</>
);
return (
<>
{i === 0 ? null : <br />}
<div>
{header}
<br />
{modifiers}
<hr />
Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
{s.unit}
</div>
</>
);
}); });
return [jsxFunc, collapsed]; return <>{sectionJSX}</>;
}); });
return [jsxFunc, collapsed];
} }
/** /**