refactor(ui): Consistently accept options for construction

Author: oliversalzburg

packages/userscript/source/ui/components/Container.ts

@@ -1,5 +1,5 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
 
 export class Container extends UiComponent {
   readonly element: JQuery<HTMLElement>;
@@ -8,9 +8,10 @@ export class Container extends UiComponent {
    * Constructs a simple container element without any special properties.
    *
    * @param host A reference to the host.
+   * @param options Options for the container.
    */
-  constructor(host: UserScript) {
-    super(host);
+  constructor(host: UserScript, options?: Partial<UiComponentOptions>) {
+    super(host, options);
 
     const element = $("<div/>");
 

packages/userscript/source/ui/components/CyclesList.ts

@@ -3,6 +3,7 @@ import { Cycle } from "../../types";
 import { UserScript } from "../../UserScript";
 import { SettingListItem } from "./SettingListItem";
 import { SettingsList } from "./SettingsList";
+import { UiComponentOptions } from "./UiComponent";
 
 export type SettingWithCycles = Record<Cycle, Setting>;
 
@@ -28,9 +29,10 @@ export class CyclesList extends SettingsList {
    *
    * @param host A reference to the host.
    * @param setting The settings that correlate to this list.
+   * @param options Options for this list.
    */
-  constructor(host: UserScript, setting: SettingWithCycles) {
-    super(host);
+  constructor(host: UserScript, setting: SettingWithCycles, options?: Partial<UiComponentOptions>) {
+    super(host, options);
     this.setting = setting;
 
     this.addEventListener("enableAll", () => {

packages/userscript/source/ui/components/ExpandoButton.ts

@@ -1,5 +1,5 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
 
 export class ExpandoButton extends UiComponent {
   readonly element: JQuery<HTMLElement>;
@@ -9,9 +9,10 @@ export class ExpandoButton extends UiComponent {
    * collapses a section of the UI.
    *
    * @param host A reference to the host.
+   * @param options Options for this expando.
    */
-  constructor(host: UserScript) {
-    super(host);
+  constructor(host: UserScript, options?: Partial<UiComponentOptions>) {
+    super(host, options);
 
     const element = $("<div/>", {
       title: host.engine.i18n("ui.itemsShow"),

packages/userscript/source/ui/components/ExplainerListItem.ts

@@ -1,5 +1,5 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
 
 export class ExplainerListItem extends UiComponent {
   readonly element: JQuery<HTMLElement>;
@@ -10,8 +10,9 @@ export class ExplainerListItem extends UiComponent {
    *
    * @param host A reference to the host.
    * @param text The text to appear on the element.
+   * @param options Options for this explainer.
    */
-  constructor(host: UserScript, text: string) {
+  constructor(host: UserScript, text: string, options?: Partial<UiComponentOptions>) {
     super(host);
 
     const element = $("<li/>", { text }).addClass("ks-explainer");

packages/userscript/source/ui/components/Fieldset.ts

@@ -1,5 +1,9 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
+
+export type FieldsetOptions = UiComponentOptions & {
+  readonly delimiter: boolean;
+};
 
 export class Fieldset extends UiComponent {
   readonly element: JQuery<HTMLElement>;
@@ -9,13 +13,13 @@ export class Fieldset extends UiComponent {
    *
    * @param host A reference to the host.
    * @param label The label on the fieldset.
-   * @param delimiter Should this fieldset have additional padding on the bottom?
+   * @param options Options for the fieldset.
    */
-  constructor(host: UserScript, label: string, delimiter = false) {
-    super(host);
+  constructor(host: UserScript, label: string, options?: Partial<FieldsetOptions>) {
+    super(host, options);
 
     const element = $("<fieldset/>").addClass("ks-fieldset");
-    if (delimiter) {
+    if (options?.delimiter) {
       element.addClass("ks-delimiter");
     }
     const legend = $("<legend/>").text(label).addClass("ks-label");

packages/userscript/source/ui/components/HeaderListItem.ts

@@ -1,6 +1,6 @@
 import { UserScript } from "../../UserScript";
 import { ListItem } from "./ListItem";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
 
 export class HeaderListItem extends UiComponent implements ListItem {
   readonly element: JQuery<HTMLElement>;
@@ -14,9 +14,10 @@ export class HeaderListItem extends UiComponent implements ListItem {
    *
    * @param host A reference to the host.
    * @param text The text to appear on the header element.
+   * @param options Options for the header.
    */
-  constructor(host: UserScript, text: string) {
-    super(host);
+  constructor(host: UserScript, text: string, options?: Partial<UiComponentOptions>) {
+    super(host, options);
 
     const element = $("<li/>", { text }).addClass("ks-header");
 

packages/userscript/source/ui/components/IconButton.ts

@@ -1,5 +1,5 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
 
 /**
  * A button that is visually represented through an SVG element.
@@ -13,9 +13,15 @@ export class IconButton extends UiComponent {
    * @param host A reference to the host.
    * @param pathData The SVG path data of the icon.
    * @param title The `title` of the element.
+   * @param options Options for the icon button.
    */
-  constructor(host: UserScript, pathData: string, title: string) {
-    super(host);
+  constructor(
+    host: UserScript,
+    pathData: string,
+    title: string,
+    options?: Partial<UiComponentOptions>
+  ) {
+    super(host, options);
 
     const element = $("<div/>", {
       html: `<svg style="width: 18px; height: 18px;" viewBox="0 0 48 48"><path fill="currentColor" d="${pathData}"/></svg>`,

packages/userscript/source/ui/components/LimitedButton.ts

@@ -1,18 +1,19 @@
 import { SettingLimited } from "../../settings/Settings";
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
+
+export type LimitedButtonOptions = UiComponentOptions & {
+  readonly onLimitedCheck: () => void;
+  readonly onLimitedUnCheck: () => void;
+};
 
 export class LimitedButton extends UiComponent {
   readonly setting: SettingLimited;
   readonly element: JQuery<HTMLElement>;
   readonly checkbox: JQuery<HTMLElement>;
 
-  constructor(
-    host: UserScript,
-    setting: SettingLimited,
-    handler?: Partial<{ onLimitedCheck: () => void; onLimitedUnCheck: () => void }>
-  ) {
-    super(host);
+  constructor(host: UserScript, setting: SettingLimited, options?: Partial<LimitedButtonOptions>) {
+    super(host, options);
 
     const element = $("<div/>").addClass("ks-text-button");
 
@@ -27,10 +28,10 @@ export class LimitedButton extends UiComponent {
     checkbox.on("change", () => {
       if (checkbox.is(":checked") && setting.limited === false) {
         setting.limited = true;
-        handler?.onLimitedCheck?.();
+        options?.onLimitedCheck?.();
       } else if (!checkbox.is(":checked") && setting.limited === true) {
         setting.limited = false;
-        handler?.onLimitedUnCheck?.();
+        options?.onLimitedUnCheck?.();
       }
     });
 

packages/userscript/source/ui/components/ListItem.ts

@@ -1,7 +1,7 @@
 import { UserScript } from "../../UserScript";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
 
-export type ListItemOptions = {
+export type ListItemOptions = UiComponentOptions & {
   /**
    * Should there be additional padding below this element?
    */
@@ -18,7 +18,7 @@ export class ListItem extends UiComponent {
    * @param options Options for the list item.
    */
   constructor(host: UserScript, options?: Partial<ListItemOptions>) {
-    super(host);
+    super(host, options);
 
     const element = $("<li/>");
     element.addClass("ks-setting");

packages/userscript/source/ui/components/OptionsListItem.ts

@@ -2,7 +2,12 @@ import { SettingOptions } from "../../settings/Settings";
 import { UserScript } from "../../UserScript";
 import { Fieldset } from "./Fieldset";
 import { RadioItem } from "./RadioItem";
-import { UiComponent } from "./UiComponent";
+import { UiComponent, UiComponentOptions } from "./UiComponent";
+
+export type OptionsListItemOptions = UiComponentOptions & {
+  readonly onCheck: () => void;
+  readonly readOnly: boolean;
+};
 
 export class OptionsListItem<TSetting extends SettingOptions = SettingOptions> extends UiComponent {
   readonly fieldset: Fieldset;
@@ -17,20 +22,15 @@ export class OptionsListItem<TSetting extends SettingOptions = SettingOptions> e
    * @param host The userscript instance.
    * @param label The label on the setting element.
    * @param setting The setting this element is linked to.
-   * @param handler The event handlers for this setting element.
-   * @param handler.onCheck Will be invoked when the user selects an option.
-   * @param readOnly Should the user be prevented from changing the value of the input?
+   * @param options Options for the list item.
    */
   constructor(
     host: UserScript,
     label: string,
     setting: TSetting,
-    handler?: {
-      onCheck: () => void;
-    },
-    readOnly = false
+    options?: Partial<OptionsListItemOptions>
   ) {
-    super(host);
+    super(host, options);
 
     this.element = $(`<li/>`);
 
@@ -40,7 +40,10 @@ export class OptionsListItem<TSetting extends SettingOptions = SettingOptions> e
     this._options = new Array<RadioItem>();
     for (const option of setting.options) {
       this._options.push(
-        new RadioItem(host, setting, option, label, { onCheck: handler?.onCheck, readOnly })
+        new RadioItem(host, setting, option, label, {
+          onCheck: options?.onCheck,
+          readOnly: options?.readOnly,
+        })
       );
     }
     this.fieldset.addChildren(this._options);

packages/userscript/source/ui/components/SettingsList.ts

@@ -47,7 +47,7 @@ export class SettingsList extends UiComponent {
    * @param host A reference to the host.
    * @param options Which tools should be available on the list?
    */
-  constructor(host: UserScript, options?: SettingsListOptions) {
+  constructor(host: UserScript, options?: Partial<SettingsListOptions>) {
     super(host, options);
 
     const toolOptions = {