Update

components/SettingsSelect.tsx

@@ -1,7 +1,7 @@
 import { Component, ContextType } from "preact";
 import { SettingsCtx } from "./SettingsContext.tsx";
 import { ConfigType } from "../config.ts";
-import Select from "preact-material-components/Select";
+import Md3Select from "./Md3Select.tsx";
 import { Ref, StateUpdater, useRef } from "preact/hooks";
 
 interface obj {
@@ -16,10 +16,6 @@ type Props<T extends obj> = {
     selectedIndex?: number;
     /**@default {false}*/
     disabled?: boolean;
-    /**@default {false}*/
-    box?: boolean;
-    /**@default {false}*/
-    outlined?: boolean;
     hintText?: string;
     set_value?: StateUpdater<T>;
 };
@@ -32,7 +28,6 @@ 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.");
@@ -44,27 +39,17 @@ export default class SettingsSelect<T extends obj>
     ): 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}
+                <Md3Select
+                    supportingText={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;
+                    selectedIndex={this.state.selectedIndex}
+                    set_index={(selectedIndex) => {
                         this.setState({ selectedIndex });
                         this.set_value(selectedIndex);
                     }}
@@ -72,10 +57,10 @@ export default class SettingsSelect<T extends obj>
                     {this.props.list.map((v) => {
                         const t = v.text ? v.text : v.value.toString();
                         return (
-                            <Select.Item disabled={v.disabled}>{t}</Select.Item>
+                            <Md3Select.Option disabled={v.disabled} value={t} />
                         );
                     })}
-                </Select>
+                </Md3Select>
             </div>
         );
     }
@@ -103,17 +88,4 @@ export default class SettingsSelect<T extends obj>
             });
         }
     }
-    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;
-                }
-            }
-        }
-    }
 }