From 734655b06cb13133ed5711b4eb4c19e9bc424650 Mon Sep 17 00:00:00 2001 From: lifegpc Date: Tue, 4 Jul 2023 17:02:56 +0800 Subject: [PATCH] Update --- components/BMd3TextField.tsx | 15 ++++--------- components/BSelect.tsx | 3 +-- components/Md3Select.tsx | 9 ++++++++ components/SettingsSelect.tsx | 42 ++++++----------------------------- islands/Settings.tsx | 37 ++++++++++++++++++++---------- server/dmodule.ts | 8 +++++++ server/md3.ts | 28 +++++++++++++++++++++++ 7 files changed, 82 insertions(+), 60 deletions(-) diff --git a/components/BMd3TextField.tsx b/components/BMd3TextField.tsx index 591a18c..26f3c85 100644 --- a/components/BMd3TextField.tsx +++ b/components/BMd3TextField.tsx @@ -1,10 +1,7 @@ import { Component, ComponentChildren, ContextType } from "preact"; import { BCtx } from "./BContext.tsx"; -import { Ref, useRef, useState } from "preact/hooks"; -import type { - _MdOutlinedTextField as _TextFieldE, - MdOutlinedTextField as _TextField, -} from "../server/md3.ts"; +import { useState } from "preact/hooks"; +import type { _MdOutlinedTextField as _TextField } from "../server/md3.ts"; import { MdOutlinedTextField } from "../server/dmodule.ts"; import List from "preact-material-components/List"; @@ -41,14 +38,13 @@ type Props = { export default class BMd3TextField extends Component, unknown> { static contextType = BCtx; - ref: Ref | undefined; declare context: ContextType; get clear_cache() { return this.props.clear_cache !== undefined ? this.props.clear_cache : true; } - get_value(e: _TextFieldE): TextType[T] | undefined { + get_value(e: _TextField): TextType[T] | undefined { const type = this.props.type; if (!e.value.length) return undefined; // @ts-ignore Checked @@ -57,7 +53,6 @@ export default class BMd3TextField return e.valueAsNumber; } render() { - this.ref = useRef(null); if (!MdOutlinedTextField.value) return null; let datalist_div = null; const [display_datalist, set_display_datalist] = useState(false); @@ -111,8 +106,6 @@ export default class BMd3TextField
{desc} /**@ts-ignore */ onInput={(ev: InputEvent) => { if (ev.target) { - const e = ev.target as _TextFieldE; + const e = ev.target as _TextField; this.set_value(this.get_value(e)); } }} diff --git a/components/BSelect.tsx b/components/BSelect.tsx index b6df991..078fa5b 100644 --- a/components/BSelect.tsx +++ b/components/BSelect.tsx @@ -28,8 +28,7 @@ type State = { selectedIndex: number; }; -export default class SettingsSelect - extends Component, State> { +export default class BSelect extends Component, State> { static contextType = BCtx; declare context: ContextType; ref: Ref | undefined; constructor(props: Props) { super(props); if (!props.list.length) throw Error("No list."); @@ -44,27 +39,17 @@ export default class SettingsSelect ): void { const selectedIndex = nextProps.selectedIndex || 0; this.setState({ selectedIndex }); - this.update(selectedIndex); - } - componentDidMount(): void { - this.update(this.state.selectedIndex); } render() { - this.ref = useRef { - 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 {this.props.list.map((v) => { const t = v.text ? v.text : v.value.toString(); return ( - {t} + ); })} - +
); } @@ -103,17 +88,4 @@ export default class SettingsSelect }); } } - 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; - } - } - } - } } diff --git a/islands/Settings.tsx b/islands/Settings.tsx index fe4cdd4..c5a0a7d 100644 --- a/islands/Settings.tsx +++ b/islands/Settings.tsx @@ -1,7 +1,6 @@ import { Component, ContextType } from "preact"; import { useEffect, useRef, useState } from "preact/hooks"; import Button from "preact-material-components/Button"; -import Dialog from "preact-material-components/Dialog"; import Snackbar from "preact-material-components/Snackbar"; import { tw } from "twind"; import { GlobalCtx } from "../components/GlobalContext.tsx"; @@ -11,6 +10,8 @@ import SettingsContext from "../components/SettingsContext.tsx"; import SettingsText from "../components/SettingsText.tsx"; import t from "../server/i18n.ts"; import SettingsSelect from "../components/SettingsSelect.tsx"; +import type { _MdDialog, DialogAction } from "../server/md3.ts"; +import { MdDialog, MdTextButton } from "../server/dmodule.ts"; export type SettingsProps = { show: boolean; @@ -21,6 +22,10 @@ export default class Settings extends Component { declare context: ContextType; render() { if (!this.props.show) return; + if (!MdDialog.value) return; + if (!MdTextButton.value) return; + const Dialog = MdDialog.value; + const TextButton = MdTextButton.value; const [settings, set_settings] = useState(); const [error, set_error] = useState(); const [changed, set_changed] = useState>(new Set()); @@ -69,13 +74,13 @@ export default class Settings extends Component { data =
{error}
; } else if (settings) { const ref = useRef>(); - const dlg = useRef(); + const dlg = useRef<_MdDialog>(); const showDlg = () => { if (!changed.size) { show_snack(t("settings.no_changed")); return; } - dlg.current?.MDComponent?.show(); + dlg.current?.show(); }; const save = () => { set_disabled(true); @@ -141,7 +146,6 @@ export default class Settings extends Component { }]} description={t("settings.thumbnail_method")} selectedIndex={settings.thumbnail_method} - outlined={true} /> { - - {t("settings.save_dlg")} - - + { + const e = ev as CustomEvent; + if (e.detail.action === "yes") { + save(); + } + }} + > + {t("settings.save_dlg")} +
+ {t("common.yes")} - - + + {t("common.no")} - - + +
); diff --git a/server/dmodule.ts b/server/dmodule.ts index 79d5ecb..33f5930 100644 --- a/server/dmodule.ts +++ b/server/dmodule.ts @@ -1,9 +1,11 @@ import { signal } from "@preact/signals"; import type { + MdDialog as _MdDialog, MdOutlinedButton as _MdOutlinedButton, MdOutlinedSelect as _MdOutlinedSelect, MdOutlinedTextField as _MdOutlinedTextField, MdSelectOption as _MdSelectOption, + MdTextButton as _MdTextButton, MdTonalButton as _MdTonalButton, } from "./md3.ts"; @@ -27,6 +29,10 @@ export const MdOutlinedSelect = signal( undefined, ); +export const MdDialog = signal(undefined); + +export const MdTextButton = signal(undefined); + export async function load_dmodule() { const md3 = await import("./md3.ts"); MdOutlinedTextField.value = md3.MdOutlinedTextField; @@ -34,4 +40,6 @@ export async function load_dmodule() { MdTonalButton.value = md3.MdTonalButton; MdSelectOption.value = md3.MdSelectOption; MdOutlinedSelect.value = md3.MdOutlinedSelect; + MdDialog.value = md3.MdDialog; + MdTextButton.value = md3.MdTextButton; } diff --git a/server/md3.ts b/server/md3.ts index dc6dd9f..ff271dd 100644 --- a/server/md3.ts +++ b/server/md3.ts @@ -3,6 +3,8 @@ import { MdOutlinedButton as _MdOutlinedButton } from "@material/web/button/outl import { MdTonalButton as _MdTonalButton } from "@material/web/button/tonal-button.js?dts=1"; import { MdSelectOption as _MdSelectOption } from "@material/web/select/select-option.js?dts=1"; import { MdOutlinedSelect as _MdOutlinedSelect } from "@material/web/select/outlined-select.js?dts=1"; +import { MdDialog as _MdDialog } from "@material/web/dialog/dialog.js?dts=1"; +import { MdTextButton as _MdTextButton } from "@material/web/button/text-button.js?dts=1"; import { createComponent } from "@lit-labs/react/?target=es2022"; import * as Preact from "preact/compat"; @@ -41,8 +43,34 @@ export const MdOutlinedSelect = createComponent({ react: Preact, }); +export type DialogAction = { + action: string; +}; + +export const MdDialog = createComponent({ + tagName: "md-dialog", + elementClass: _MdDialog, + // @ts-ignore Checked + react: Preact, + events: { + "onopening": "opening", + "onopened": "opened", + "onclosing": "closing", + "onclosed": "closed", + }, +}); + +export const MdTextButton = createComponent({ + tagName: "md-text-button", + elementClass: _MdTextButton, + // @ts-ignore Checked + react: Preact, +}); + export { _MdOutlinedTextField }; export { _MdOutlinedButton }; export { _MdTonalButton }; export { _MdSelectOption }; export { _MdOutlinedSelect }; +export { _MdDialog }; +export { _MdTextButton };