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

39
src/data/common.tsx
View file

@ -259,16 +259,34 @@ export interface Section {
export function createCollapsibleModifierSections(
sectionsFunc: () => Section[]
): [JSXFunction, Persistent<boolean>[]] {
return createLazyProxy(() => {
const sections = sectionsFunc();
const sections: Section[] = [];
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 processedBaseText = sections.map(s => convertComputable(s.baseText));
const processedVisible = sections.map(s => convertComputable(s.visible));
const collapsed = sections.map(() => persistent<boolean>(false));
const collapsed = createLazyProxy(() =>
calculateSections().map(() => persistent<boolean>(false))
) as Persistent<boolean>[];
const jsxFunc = jsx(() => {
const sections = calculateSections();
const sectionJSX = sections.map((s, i) => {
if (unref(processedVisible[i]) === false) return null;
if (unref(processed.visible[i]) === false) return null;
const header = (
<h3
onClick={() => (collapsed[i].value = !collapsed[i].value)}
@ -286,11 +304,11 @@ export function createCollapsibleModifierSections(
<>
<div class="modifier-container">
<span class="modifier-amount">
{format(unref(processedBase[i]) ?? 1)}
{format(unref(processed.base[i]) ?? 1)}
{s.unit}
</span>
<span class="modifier-description">
{renderJSX(unref(processedBaseText[i]) ?? "Base")}
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
</span>
</div>
{renderJSX(unref(s.modifier.description))}
@ -305,7 +323,7 @@ export function createCollapsibleModifierSections(
<br />
{modifiers}
<hr />
Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
{s.unit}
</div>
</>
@ -314,7 +332,6 @@ export function createCollapsibleModifierSections(
return <>{sectionJSX}</>;
});
return [jsxFunc, collapsed];
});
}
/**