Update

components/SettingsSelect.tsx

@@ -0,0 +1,119 @@
+import { Component, ContextType } from "preact";
+import { SettingsCtx } from "./SettingsContext.tsx";
+import { ConfigType } from "../config.ts";
+import Select from "preact-material-components/Select";
+import { Ref, StateUpdater, useRef } from "preact/hooks";
+
+interface obj {
+    toString(): string;
+}
+
+type Props<T extends obj> = {
+    name: keyof ConfigType;
+    list: { value: T; text?: string; disabled?: boolean }[];
+    description: string;
+    /**@default {0}*/
+    selectedIndex?: number;
+    /**@default {false}*/
+    disabled?: boolean;
+    /**@default {false}*/
+    box?: boolean;
+    /**@default {false}*/
+    outlined?: boolean;
+    hintText?: string;
+    set_value?: StateUpdater<T>;
+};
+
+type State = {
+    selectedIndex: number;
+};
+
+export default class SettingsSelect<T extends obj>
+    extends Component<Props<T>, State> {
+    static contextType = SettingsCtx;
+    declare context: ContextType<typeof SettingsCtx>;
+    ref: Ref<Select | undefined> | undefined;
+    constructor(props: Props<T>) {
+        super(props);
+        if (!props.list.length) throw Error("No list.");
+        this.state = { selectedIndex: props.selectedIndex || 0 };
+    }
+    componentWillReceiveProps(
+        nextProps: Readonly<Props<T>>,
+        _nextContext: unknown,
+    ): void {
+        const selectedIndex = nextProps.selectedIndex || 0;
+        this.setState({ selectedIndex });
+        this.update(selectedIndex);
+    }
+    componentDidMount(): void {
+        this.update(this.state.selectedIndex);
+    }
+    render() {
+        this.ref = useRef<Select>();
+        const id = `s-${this.props.name}`;
+        return (
+            <div class="s-select" id={id}>
+                <label>{this.props.description}</label>
+                <Select
+                    ref={this.ref}
+                    hintText={this.props.hintText}
+                    disabled={this.props.disabled}
+                    box={this.props.box}
+                    outlined={this.props.outlined}
+                    onChange={(e: Event) => {
+                        if (!e.target) return;
+                        /**@ts-ignore */
+                        const selectedIndex: number = e.target.selectedIndex;
+                        this.setState({ selectedIndex });
+                        this.set_value(selectedIndex);
+                    }}
+                >
+                    {this.props.list.map((v) => {
+                        const t = v.text ? v.text : v.value.toString();
+                        return (
+                            <Select.Item disabled={v.disabled}>{t}</Select.Item>
+                        );
+                    })}
+                </Select>
+            </div>
+        );
+    }
+    set_changed() {
+        if (this.context) {
+            this.context.set_changed((v) => {
+                v.add(this.props.name);
+                return v;
+            });
+        }
+    }
+    set_value(index: number) {
+        const value = this.props.list[index].value;
+        if (this.props.set_value) {
+            this.props.set_value(value);
+            this.set_changed();
+        } else if (this.context) {
+            this.context.set_settings((v) => {
+                if (v) {
+                    const t: Record<string, unknown> = v;
+                    t[this.props.name] = value;
+                    this.set_changed();
+                    return t as ConfigType;
+                }
+            });
+        }
+    }
+    update(index: number) {
+        const e = this.ref?.current;
+        if (e) {
+            const b = e.base;
+            if (b) {
+                const t = b as HTMLElement;
+                const s = t.querySelector("select");
+                if (s) {
+                    s.selectedIndex = index;
+                }
+            }
+        }
+    }
+}

components/SettingsText.tsx

@@ -30,6 +30,7 @@ export type SettingsTextProps<T extends keyof TextType> = {
     set_value?: StateUpdater<TextType[T]>;
     min?: DataType[T];
     max?: DataType[T];
+    outlined?: boolean;
 };
 
 export default class SettingsText<T extends keyof TextType>
@@ -99,6 +100,7 @@ export default class SettingsText<T extends keyof TextType>
         const id = `s-${this.props.name}`;
         let cn = "text";
         if (this.props.helpertext) cn += " helper";
+        if (this.props.outlined) cn += " outlined";
         return (
             <div class={cn} id={id}>
                 <label>{this.props.description}</label>
@@ -118,6 +120,7 @@ export default class SettingsText<T extends keyof TextType>
                     }}
                     min={this.props.min}
                     max={this.props.max}
+                    outlined={this.props.outlined}
                 />
                 {this.props.children}
             </div>