Another bunch of functions converted.

Author: mike-lischke

src/components/ui/About.tsx

@@ -3,7 +3,7 @@
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
-import logo from "../../assets/images/animada-logo.svg";
+import logo from "../../assets/images/animada-logo2.svg";
 import githubLogo from "../../assets/images/GitHub_Invertocat_Dark.svg";
 
 import type { ComponentChild } from "preact";

src/components/ui/BananaDrumViewer.tsx

@@ -3,10 +3,11 @@
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
-/* eslint-disable prefer-arrow/prefer-arrow-functions, @typescript-eslint/naming-convention, jsdoc/require-jsdoc */
+import type { ComponentChild } from "preact";
+import { ComponentBase } from "./ComponentBase/ComponentBase.js";
 
-import type { JSX } from "preact/jsx-runtime";
-
-export function ExpandingSpacer(): JSX.Element {
-    return <div style={{ flexGrow: 1 }} />;
+export class ExpandingSpacer extends ComponentBase {
+    public override render(): ComponentChild {
+        return <div style={{ flexGrow: 1 }} />;
+    }
 }

src/components/ui/ExpandingSpacer.tsx

@@ -3,47 +3,28 @@
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
-/* eslint-disable prefer-arrow/prefer-arrow-functions, @typescript-eslint/naming-convention, jsdoc/require-jsdoc */
-
-import { useContext } from "preact/hooks";
-
-import type { JSX } from "preact/jsx-runtime";
-import type { ArrangementView, InstrumentMeta } from "../../core/index.js";
+import type { ComponentChild } from "preact";
 import { getLibrary } from "../../core/Library.js";
-import { useEditCommand, type EditFunction } from "../../ui/hooks/useEditCommand.js";
-import { ArrangementPlayerContext } from "./arrangement/ArrangementViewer.js";
+import { ComponentBase, type IComponentProperties } from "./ComponentBase/ComponentBase.js";
+import { InstrumentChooser } from "./InstrumentChooser.js";
 
-export function InstrumentBrowser({ close }: { close: () => void; }): JSX.Element {
-    return (
-        <div className="viewport-wrapper">
-            <div style={{ padding: "20pt" }}>
-                {getLibrary().instrumentMetas.map(meta => {
-                    return <InstrumentChooser key={meta.id} instrumentMeta={meta} close={close} />;
-                })}
-                <br />
-                <br />
-                <button className="push-button" onClick={close}>Back</button>
-            </div>
-        </div>
-    );
+export interface IInstrumentBrowserProps extends IComponentProperties {
+    close: () => void;
 }
 
-function InstrumentChooser(
-    { instrumentMeta, close }: { instrumentMeta: InstrumentMeta, close: () => void; }): JSX.Element {
-    const { id, displayName } = instrumentMeta;
-    const arrangement: ArrangementView = useContext(ArrangementPlayerContext)!.arrangement;
-    const edit = useEditCommand();
-
-    return (
-        <button className="instrument-chooser push-button" onClick={() => {
-            choose(id, arrangement, edit);
-            close();
-        }}>
-            {displayName}
-        </button>
-    );
-}
-
-function choose(id: string, arrangement: ArrangementView, edit: EditFunction) {
-    edit({ type: "EditCommand_ArrangementAddTrack", arrangement, addTrack: getLibrary().getInstrument(id) });
+export class InstrumentBrowser extends ComponentBase<IInstrumentBrowserProps> {
+    public render(): ComponentChild {
+        return (
+            <div className="viewport-wrapper">
+                <div style={{ padding: "20pt" }}>
+                    {getLibrary().instrumentMetas.map((meta) => {
+                        return <InstrumentChooser key={meta.id} instrumentMeta={meta} close={close} />;
+                    })}
+                    <br />
+                    <br />
+                    <button className="push-button" onClick={close}>Back</button>
+                </div>
+            </div>
+        );
+    }
 }

src/components/ui/InstrumentBrowser.tsx

@@ -0,0 +1,61 @@
+/*
+* Copyright (c) Mike Lischke. All rights reserved.
+* Licensed under the MIT License. See License.txt in the project root for license information.
+*/
+
+import type { ComponentChild, ContextType } from "preact";
+
+import type { ArrangementView, InstrumentMeta } from "../../core/index.js";
+import { getLibrary } from "../../core/Library.js";
+import { ArrangementPlayerContext } from "./arrangement/ArrangementViewer.js";
+import { ComponentBase, type IComponentProperties } from "./ComponentBase/ComponentBase.js";
+import { BananaDrumContext } from "./ScoreBookViewer.js";
+
+export interface IInstrumentChooserProps extends IComponentProperties {
+    instrumentMeta: InstrumentMeta;
+    close: () => void;
+}
+
+export class InstrumentChooser extends ComponentBase<IInstrumentChooserProps> {
+    private bananaDrumContext?: ContextType<typeof BananaDrumContext>;
+
+    public render(): ComponentChild {
+        const { instrumentMeta } = this.props;
+
+        return (
+            <BananaDrumContext.Consumer>
+                {(bananaDrumContext) => {
+                    this.bananaDrumContext = bananaDrumContext;
+
+                    return (
+                        <ArrangementPlayerContext.Consumer>
+                            {(context) => {
+                                const arrangement: ArrangementView = context!.arrangement;
+
+                                return (
+                                    <button
+                                        className="instrument-chooser push-button"
+                                        onClick={this.buttonClick.bind(this, arrangement)}
+                                    >
+                                        {instrumentMeta.displayName}
+                                    </button>
+                                );
+                            }}
+                        </ArrangementPlayerContext.Consumer>
+                    );
+                }}
+            </BananaDrumContext.Consumer>
+        );
+    }
+
+    private buttonClick(arrangement: ArrangementView) {
+        const { instrumentMeta, close } = this.props;
+
+        this.bananaDrumContext?.edit({
+            type: "EditCommand_ArrangementAddTrack", arrangement, addTrack: getLibrary()
+                .getInstrument(instrumentMeta.id)
+        });
+
+        close();
+    }
+}

src/components/ui/InstrumentChooser.tsx

@@ -3,73 +3,103 @@
 * Licensed under the MIT License. See License.txt in the project root for license information.
 */
 
-/* eslint-disable prefer-arrow/prefer-arrow-functions, @typescript-eslint/naming-convention, jsdoc/require-jsdoc */
-
-import { useState } from "preact/hooks";
-import type { JSX } from "preact/jsx-runtime";
+import type { ComponentChild } from "preact";
 import type { Subscribable } from "../../core/types/general.js";
-import { useSubscription } from "../../ui/hooks/useSubscription.js";
+import { ComponentBase, type IComponentProperties, type IComponentState } from "./ComponentBase/ComponentBase.js";
 
-export function NumberInput({ getValue, setValue, subscribable }: {
-    getValue: () => string,
-    setValue: (newValue: string) => void,
+export interface INumberInputProps extends IComponentProperties {
+    getValue: () => string;
+    setValue: (newValue: string) => void;
     subscribable: Subscribable;
-}): JSX.Element {
-    const [visibleValue, setVisibleValue] = useState(getValue());
+}
+
+interface INumberInputState extends IComponentState {
+    visibleValue: string;
+}
+
+export class NumberInput extends ComponentBase<INumberInputProps, INumberInputState> {
+
+    public constructor(props: INumberInputProps) {
+        super(props);
+
+        this.state = {
+            visibleValue: this.props.getValue()
+        };
+    }
+
+    public override componentDidMount(): void {
+        const { subscribable } = this.props;
 
-    // If the model pushes a change to this value for some other reason, we'd better update
-    useSubscription(subscribable, () => {
-        setVisibleValue(getValue());
-    });
+        subscribable.subscribe(this.handleChange);
+    }
+
+    public override componentWillUnmount(): void {
+        const { subscribable } = this.props;
+
+        subscribable.unsubscribe(this.handleChange);
+    }
+
+    public render(): ComponentChild {
+        const { visibleValue } = this.state;
+
+        return (
+            <input
+                className="short"
+                type="text"
+                inputMode="numeric"
+                pattern="[0-9]*"
+                onChange={(event) => {
+                    this.attemptSetVisibleValue((event.target as HTMLInputElement).value);
+                }}
+                value={visibleValue}
+                onBlur={() => {
+                    this.attemptSet();
+                }}
+                onKeyPress={(event) => {
+                    if (event.key === "Enter") {
+                        this.attemptSet();
+                    }
+                }}
+            />
+        );
+    }
 
     // To update the input as you type, but not update the model
-    function attemptSetVisibleValue(inputValue: string) {
+    private attemptSetVisibleValue(inputValue: string) {
         if (inputValue.length === 0) {
-            setVisibleValue("");
+            this.setState({ visibleValue: "" });
 
             return;
         }
 
         if (!inputValue.charAt(inputValue.length - 1).match(/[0-9]/)) {
-            attemptSetVisibleValue(inputValue.substring(0, inputValue.length - 1));
+            this.attemptSetVisibleValue(inputValue.substring(0, inputValue.length - 1));
 
             return;
         }
 
-        setVisibleValue(inputValue);
+        this.setState({ visibleValue: inputValue });
     }
 
     // Try to set the model value, which may fail due to validation
-    function attemptSet() {
+    private attemptSet() {
+        const { getValue, setValue } = this.props;
+        const { visibleValue } = this.state;
+
         if (visibleValue === getValue()) {
             return;
         }
 
         try {
             setValue(visibleValue);
         } catch {
-            setVisibleValue(getValue());
+            this.setState({ visibleValue: getValue() });
         }
     }
 
-    return (
-        <input
-            className="short"
-            type="text"
-            inputMode="numeric"
-            pattern="[0-9]*"
-            onChange={event => {
-                attemptSetVisibleValue((event.target as HTMLInputElement).value);
-            }}
-            value={visibleValue}
-            onBlur={() => {
-                attemptSet();
-            }}
-            onKeyPress={event => {
-                if (event.key === "Enter") {
-                    attemptSet();
-                }
-            }}
-        />
-    );
+    private handleChange = () => {
+        const { getValue } = this.props;
+
+        this.setState({ visibleValue: getValue() });
+    };
 }

src/components/ui/NumberInput.tsx

@@ -11,7 +11,7 @@ import type { JSX } from "preact/jsx-runtime";
 import type { PolyrhythmView } from "../../core/index.js";
 import { useEditCommand } from "../../ui/hooks/useEditCommand.js";
 import { useSubscription } from "../../ui/hooks/useSubscription.js";
-import { ServicesContext } from "./BananaDrumViewer.js";
+import { ServicesContext } from "./ScoreBookViewer.js";
 import { NoteViewer } from "./note/NoteViewer.js";
 
 export function PolyrhythmViewer({ polyrhythm }: { polyrhythm: PolyrhythmView; }): JSX.Element {