Fix createCollapsibleModifierSections not being lazy
This commit is contained in:
parent
1976628b16
commit
0c3ce6af45
1 changed files with 67 additions and 50 deletions
|
@ -259,16 +259,34 @@ 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) => {
|
const sectionJSX = sections.map((s, i) => {
|
||||||
if (unref(processedVisible[i]) === false) return null;
|
if (unref(processed.visible[i]) === false) return null;
|
||||||
const header = (
|
const header = (
|
||||||
<h3
|
<h3
|
||||||
onClick={() => (collapsed[i].value = !collapsed[i].value)}
|
onClick={() => (collapsed[i].value = !collapsed[i].value)}
|
||||||
|
@ -286,11 +304,11 @@ export function createCollapsibleModifierSections(
|
||||||
<>
|
<>
|
||||||
<div class="modifier-container">
|
<div class="modifier-container">
|
||||||
<span class="modifier-amount">
|
<span class="modifier-amount">
|
||||||
{format(unref(processedBase[i]) ?? 1)}
|
{format(unref(processed.base[i]) ?? 1)}
|
||||||
{s.unit}
|
{s.unit}
|
||||||
</span>
|
</span>
|
||||||
<span class="modifier-description">
|
<span class="modifier-description">
|
||||||
{renderJSX(unref(processedBaseText[i]) ?? "Base")}
|
{renderJSX(unref(processed.baseText[i]) ?? "Base")}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{renderJSX(unref(s.modifier.description))}
|
{renderJSX(unref(s.modifier.description))}
|
||||||
|
@ -305,7 +323,7 @@ export function createCollapsibleModifierSections(
|
||||||
<br />
|
<br />
|
||||||
{modifiers}
|
{modifiers}
|
||||||
<hr />
|
<hr />
|
||||||
Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
|
Total: {format(s.modifier.apply(unref(processed.base[i]) ?? 1))}
|
||||||
{s.unit}
|
{s.unit}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
|
@ -314,7 +332,6 @@ export function createCollapsibleModifierSections(
|
||||||
return <>{sectionJSX}</>;
|
return <>{sectionJSX}</>;
|
||||||
});
|
});
|
||||||
return [jsxFunc, collapsed];
|
return [jsxFunc, collapsed];
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
Loading…
Reference in a new issue