From 0c3ce6af45a3cd02dd3d78dede46ceea5aa152f9 Mon Sep 17 00:00:00 2001
From: thepaperpilot <thepaperpilot@gmail.com>
Date: Tue, 26 Jul 2022 23:56:20 -0500
Subject: [PATCH] Fix createCollapsibleModifierSections not being lazy
---
src/data/common.tsx | 117 +++++++++++++++++++++++++-------------------
1 file changed, 67 insertions(+), 50 deletions(-)
diff --git a/src/data/common.tsx b/src/data/common.tsx
index 64fa63b..29ecd53 100644
--- a/src/data/common.tsx
+++ b/src/data/common.tsx
@@ -259,62 +259,79 @@ 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 jsxFunc = jsx(() => {
- 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 collapsed = createLazyProxy(() =>
+ calculateSections().map(() => persistent<boolean>(false))
+ ) as Persistent<boolean>[];
+ const jsxFunc = jsx(() => {
+ const sections = calculateSections();
- const modifiers = unref(collapsed[i]) ? null : (
- <>
- <div class="modifier-container">
- <span class="modifier-amount">
- {format(unref(processedBase[i]) ?? 1)}
- {s.unit}
- </span>
- <span class="modifier-description">
- {renderJSX(unref(processedBaseText[i]) ?? "Base")}
- </span>
- </div>
- {renderJSX(unref(s.modifier.description))}
- </>
- );
+ const sectionJSX = sections.map((s, i) => {
+ if (unref(processed.visible[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>
+ );
- return (
- <>
- {i === 0 ? null : <br />}
- <div>
- {header}
- <br />
- {modifiers}
- <hr />
- Total: {format(s.modifier.apply(unref(processedBase[i]) ?? 1))}
+ const modifiers = unref(collapsed[i]) ? null : (
+ <>
+ <div class="modifier-container">
+ <span class="modifier-amount">
+ {format(unref(processed.base[i]) ?? 1)}
{s.unit}
- </div>
- </>
- );
- });
- return <>{sectionJSX}</>;
+ </span>
+ <span class="modifier-description">
+ {renderJSX(unref(processed.baseText[i]) ?? "Base")}
+ </span>
+ </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];
}
/**