refactor(ui): Consistently handle child components

oliversalzburg · oliversalzburg · commit edaabe84a894 · 2023-02-11T18:41:28.000+01:00
diff --git a/packages/userscript/source/ui/TimeSkipSettingsUi.ts b/packages/userscript/source/ui/TimeSkipSettingsUi.ts
@@ -38,7 +38,7 @@ export class TimeSkipSettingsUi extends SettingsPanel<TimeSkipSettings> {
         icon: Icons.Cycles,
       }),
       {
-        child: new CyclesList(this._host, this.setting.cycles),
+        children: [new CyclesList(this._host, this.setting.cycles)],
       }
     );
     this._seasons = new Panel(
@@ -47,12 +47,14 @@ export class TimeSkipSettingsUi extends SettingsPanel<TimeSkipSettings> {
         icon: Icons.Seasons,
       }),
       {
-        child: new SeasonsList(this._host, this.setting.seasons, {
-          onCheck: (label: string) =>
-            this._host.engine.imessage("time.skip.season.enable", [label]),
-          onUnCheck: (label: string) =>
-            this._host.engine.imessage("time.skip.season.disable", [label]),
-        }),
+        children: [
+          new SeasonsList(this._host, this.setting.seasons, {
+            onCheck: (label: string) =>
+              this._host.engine.imessage("time.skip.season.enable", [label]),
+            onUnCheck: (label: string) =>
+              this._host.engine.imessage("time.skip.season.disable", [label]),
+          }),
+        ],
       }
     );
 
diff --git a/packages/userscript/source/ui/VillageSettingsUi.ts b/packages/userscript/source/ui/VillageSettingsUi.ts
@@ -131,17 +131,17 @@ export class VillageSettingsUi extends SettingsSectionUi<VillageSettings> {
     listAddition.addChild(this._promoteLeader);
 
     this._electLeader = new SettingListItem(this._host, "Elect leader", this.setting.electLeader, {
+      children: [
+        new OptionsListItem(host, "Job", this.setting.electLeader.job),
+        new OptionsListItem(host, "Trait", this.setting.electLeader.trait),
+      ],
       onCheck: () =>
         this._host.engine.imessage("status.sub.enable", [this._host.engine.i18n("option.elect")]),
       onUnCheck: () =>
         this._host.engine.imessage("status.sub.disable", [this._host.engine.i18n("option.elect")]),
     });
     listAddition.addChild(this._electLeader);
 
-    this._electLeader.addChildren([
-      new OptionsListItem(host, "Job", this.setting.electLeader.job),
-      new OptionsListItem(host, "Trait", this.setting.electLeader.trait),
-    ]);
     this.addChild(listAddition);
   }
 
diff --git a/packages/userscript/source/ui/components/Container.ts b/packages/userscript/source/ui/components/Container.ts
@@ -16,5 +16,6 @@ export class Container extends UiComponent {
     const element = $("<div/>");
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 }
diff --git a/packages/userscript/source/ui/components/ExpandoButton.ts b/packages/userscript/source/ui/components/ExpandoButton.ts
@@ -20,6 +20,7 @@ export class ExpandoButton extends UiComponent {
     }).addClass("ks-expando-button");
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 
   setCollapsed() {
diff --git a/packages/userscript/source/ui/components/ExplainerListItem.ts b/packages/userscript/source/ui/components/ExplainerListItem.ts
@@ -18,5 +18,6 @@ export class ExplainerListItem extends UiComponent {
     const element = $("<li/>", { text }).addClass("ks-explainer");
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 }
diff --git a/packages/userscript/source/ui/components/Fieldset.ts b/packages/userscript/source/ui/components/Fieldset.ts
@@ -26,5 +26,6 @@ export class Fieldset extends UiComponent {
     element.append(legend);
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 }
diff --git a/packages/userscript/source/ui/components/HeaderListItem.ts b/packages/userscript/source/ui/components/HeaderListItem.ts
@@ -22,5 +22,6 @@ export class HeaderListItem extends UiComponent implements ListItem {
     const element = $("<li/>", { text }).addClass("ks-header");
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 }
diff --git a/packages/userscript/source/ui/components/IconButton.ts b/packages/userscript/source/ui/components/IconButton.ts
@@ -29,5 +29,6 @@ export class IconButton extends UiComponent {
     }).addClass("ks-icon-button");
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 }
diff --git a/packages/userscript/source/ui/components/LimitedButton.ts b/packages/userscript/source/ui/components/LimitedButton.ts
@@ -40,6 +40,7 @@ export class LimitedButton extends UiComponent {
 
     this.checkbox = checkbox;
     this.element = element;
+    this.addChildren(options?.children);
     this.setting = setting;
   }
 
diff --git a/packages/userscript/source/ui/components/ListItem.ts b/packages/userscript/source/ui/components/ListItem.ts
@@ -28,5 +28,6 @@ export class ListItem extends UiComponent {
     }
 
     this.element = element;
+    this.addChildren(options?.children);
   }
 }
diff --git a/packages/userscript/source/ui/components/OptionsListItem.ts b/packages/userscript/source/ui/components/OptionsListItem.ts
@@ -28,7 +28,7 @@ export class OptionsListItem<TSetting extends SettingOptions = SettingOptions> e
     host: UserScript,
     label: string,
     setting: TSetting,
-    options?: Partial<OptionsListItemOptions>
+    options?: Partial<Omit<OptionsListItemOptions, "children">>
   ) {
     super(host, options);
 
diff --git a/packages/userscript/source/ui/components/Panel.ts b/packages/userscript/source/ui/components/Panel.ts
@@ -1,20 +1,10 @@
-import { is, isNil } from "../../tools/Maybe";
+import { is } from "../../tools/Maybe";
 import { UserScript } from "../../UserScript";
 import { Container } from "./Container";
 import { ExpandoButton } from "./ExpandoButton";
 import { UiComponent, UiComponentOptions } from "./UiComponent";
 
-export type PanelOptions<TChild extends UiComponent = UiComponent> = UiComponentOptions & {
-  /**
-   * A component that should be hosted in the panel.
-   */
-  child: TChild;
-
-  /**
-   * Component that should be hosted in the panel.
-   */
-  children: Array<TChild>;
-
+export type PanelOptions<TChild extends UiComponent = UiComponent> = UiComponentOptions<TChild> & {
   /**
    * Should the main child be expanded right away?
    */
@@ -67,15 +57,6 @@ export class Panel<
 
     head.element.append(expando.element, this.container.element);
 
-    const child = options?.child;
-    if (!isNil(child)) {
-      this.addChild(child);
-    }
-    const children = options?.children;
-    if (!isNil(children)) {
-      this.addChildren(children);
-    }
-
     if (options?.initiallyExpanded) {
       this.container.element.show();
       expando.setExpanded();
@@ -85,6 +66,7 @@ export class Panel<
 
     this._mainChildVisible = options?.initiallyExpanded ?? false;
     this.element = head.element;
+    this.addChildren(options?.children);
     this._expando = expando;
   }
 
diff --git a/packages/userscript/source/ui/components/RadioItem.ts b/packages/userscript/source/ui/components/RadioItem.ts
@@ -83,6 +83,7 @@ export class RadioItem<TSetting extends SettingOptions = SettingOptions> extends
 
     this.input = input;
     this.element = element;
+    this.addChildren(options?.children);
     this.setting = setting;
     this.option = option;
   }
diff --git a/packages/userscript/source/ui/components/SettingsList.ts b/packages/userscript/source/ui/components/SettingsList.ts
@@ -3,21 +3,10 @@ import { UserScript } from "../../UserScript";
 import { DisableButton } from "./buttons-icon/DisableButton";
 import { EnableButton } from "./buttons-icon/EnableButton";
 import { ResetButton } from "./buttons-icon/ResetButton";
-import { ListItem } from "./ListItem";
 import { SettingListItem } from "./SettingListItem";
 import { UiComponent, UiComponentOptions } from "./UiComponent";
 
 export type SettingsListOptions = UiComponentOptions & {
-  /**
-   * A component that should be hosted in the panel.
-   */
-  readonly child?: ListItem;
-
-  /**
-   * Component that should be hosted in the panel.
-   */
-  readonly children?: Array<ListItem>;
-
   readonly hasEnableAll?: boolean;
   readonly hasDisableAll?: boolean;
   readonly onEnableAll?: () => void;
@@ -48,7 +37,7 @@ export class SettingsList extends UiComponent {
    * @param options Which tools should be available on the list?
    */
   constructor(host: UserScript, options?: Partial<SettingsListOptions>) {
-    super(host, options);
+    super(host, { ...options, children: [] });
 
     const toolOptions = {
       hasDisableAll: true,
@@ -127,15 +116,7 @@ export class SettingsList extends UiComponent {
     }
 
     this.element = container;
-
-    const child = options?.child;
-    if (!isNil(child)) {
-      this.addChild(child);
-    }
-    const children = options?.children;
-    if (!isNil(children)) {
-      this.addChildren(children);
-    }
+    this.addChildren(options?.children);
   }
 
   override addChild(child: UiComponent) {
diff --git a/packages/userscript/source/ui/components/TextButton.ts b/packages/userscript/source/ui/components/TextButton.ts
@@ -35,6 +35,7 @@ export class TextButton extends UiComponent {
     }
 
     this.element = element;
+    this.addChildren(options?.children);
     this.readOnly = false;
   }
 }
diff --git a/packages/userscript/source/ui/components/UiComponent.ts b/packages/userscript/source/ui/components/UiComponent.ts
@@ -1,7 +1,8 @@
 import { cerror } from "../../tools/Log";
 import { UserScript } from "../../UserScript";
 
-export type UiComponentOptions = {
+export type UiComponentOptions<TChild extends UiComponent = UiComponent> = {
+  readonly children: Array<TChild>;
   readonly onRefresh: <T extends UiComponent>(subject: T) => void;
 };
 
@@ -20,6 +21,13 @@ export abstract class UiComponent extends EventTarget {
 
   private readonly _onRefresh: UiComponentOptions["onRefresh"] | undefined;
 
+  /**
+   * Constructs the base `UiComponent`.
+   * Subclasses MUST add children from options when `this.element` is constructed.
+   *
+   * @param host A reference to the host.
+   * @param options The options for this component.
+   */
   constructor(host: UserScript, options?: Partial<UiComponentOptions>) {
     super();
     this._host = host;
@@ -41,8 +49,8 @@ export abstract class UiComponent extends EventTarget {
     this.children.add(child);
     this.element.append(child.element);
   }
-  addChildren(children: Iterable<UiComponent>) {
-    for (const child of children) {
+  addChildren(children?: Iterable<UiComponent>) {
+    for (const child of children ?? []) {
       this.addChild(child);
     }
   }

Original file line number	Diff line number	Diff line change
`@@ -16,5 +16,6 @@ export class Container extends UiComponent {`
`16`	`16`	`const element = $("<div/>");`
`17`	`17`
`18`	`18`	`this.element = element;`
	`19`	`+ this.addChildren(options?.children);`
`19`	`20`	`}`
`20`	`21`	`}`
Original file line number	Diff line number	Diff line change
`@@ -20,6 +20,7 @@ export class ExpandoButton extends UiComponent {`
`20`	`20`	`}).addClass("ks-expando-button");`
`21`	`21`
`22`	`22`	`this.element = element;`
	`23`	`+ this.addChildren(options?.children);`
`23`	`24`	`}`
`24`	`25`
`25`	`26`	`setCollapsed() {`
Original file line number	Diff line number	Diff line change
`@@ -18,5 +18,6 @@ export class ExplainerListItem extends UiComponent {`
`18`	`18`	`const element = $("<li/>", { text }).addClass("ks-explainer");`
`19`	`19`
`20`	`20`	`this.element = element;`
	`21`	`+ this.addChildren(options?.children);`
`21`	`22`	`}`
`22`	`23`	`}`
Original file line number	Diff line number	Diff line change
`@@ -26,5 +26,6 @@ export class Fieldset extends UiComponent {`
`26`	`26`	`element.append(legend);`
`27`	`27`
`28`	`28`	`this.element = element;`
	`29`	`+ this.addChildren(options?.children);`
`29`	`30`	`}`
`30`	`31`	`}`
Original file line number	Diff line number	Diff line change
`@@ -22,5 +22,6 @@ export class HeaderListItem extends UiComponent implements ListItem {`
`22`	`22`	`const element = $("<li/>", { text }).addClass("ks-header");`
`23`	`23`
`24`	`24`	`this.element = element;`
	`25`	`+ this.addChildren(options?.children);`
`25`	`26`	`}`
`26`	`27`	`}`
Original file line number	Diff line number	Diff line change
`@@ -29,5 +29,6 @@ export class IconButton extends UiComponent {`
`29`	`29`	`}).addClass("ks-icon-button");`
`30`	`30`
`31`	`31`	`this.element = element;`
	`32`	`+ this.addChildren(options?.children);`
`32`	`33`	`}`
`33`	`34`	`}`
Original file line number	Diff line number	Diff line change
`@@ -40,6 +40,7 @@ export class LimitedButton extends UiComponent {`
`40`	`40`
`41`	`41`	`this.checkbox = checkbox;`
`42`	`42`	`this.element = element;`
	`43`	`+ this.addChildren(options?.children);`
`43`	`44`	`this.setting = setting;`
`44`	`45`	`}`
`45`	`46`
Original file line number	Diff line number	Diff line change
`@@ -28,5 +28,6 @@ export class ListItem extends UiComponent {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`this.element = element;`
	`31`	`+ this.addChildren(options?.children);`
`31`	`32`	`}`
`32`	`33`	`}`