diff --git a/components/SettingsText.tsx b/components/SettingsText.tsx index 8521ad0..557dc64 100644 --- a/components/SettingsText.tsx +++ b/components/SettingsText.tsx @@ -2,7 +2,7 @@ import { Component, ComponentChildren, ContextType } from "preact"; import { SettingsCtx } from "./SettingsContext.tsx"; import { ConfigType } from "../config.ts"; import TextField from "preact-material-components/TextField"; -import { Ref, useRef } from "preact/hooks"; +import { Ref, StateUpdater, useRef } from "preact/hooks"; export type SettingsTextProps = { value: string; @@ -14,6 +14,8 @@ export type SettingsTextProps = { fullwidth?: boolean; disabled?: boolean; children?: ComponentChildren; + set_value?: StateUpdater; + ignore_update_value?: boolean; }; export default class SettingsText @@ -34,37 +36,44 @@ export default class SettingsText } } } - set_text(value: string) { + set_changed() { if (this.context) { + this.context.set_changed((v) => { + v.add(this.props.name); + return v; + }); + } + } + set_text(value: string) { + 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 = v; t[this.props.name] = value; - if (this.context) { - this.context.set_changed((v) => { - v.add(this.props.name); - return v; - }); - } + this.set_changed(); return t as ConfigType; } }); } } componentDidMount() { - this.update(this.props.value); + if (!this.props.ignore_update_value) this.update(this.props.value); } componentWillUpdate( nextProps: Readonly, _nextState: Readonly, _nextContext: unknown, ) { - this.update(nextProps.value); + if (!this.props.ignore_update_value) this.update(nextProps.value); } render() { this.ref = useRef(); + const id = `s-${this.props.name}`; return ( -
+
{ const [settings, set_settings] = useState(); const [error, set_error] = useState(); const [changed, set_changed] = useState>(new Set()); + const [new_cookies, set_new_cookies] = useState(""); + const cookies_ref = useRef(); const fetchSettings = async () => { const re = await fetch("/api/config"); set_settings(await re.json()); set_changed(new Set()); + if (cookies_ref.current) { + const t = cookies_ref.current; + t.update(""); + } }; const loadData = () => { fetchSettings().catch((e) => { @@ -82,8 +88,20 @@ export default class Settings extends Component { Use current browser's user agent. + +
); } else { diff --git a/static/common.css b/static/common.css index 8aa2d7d..e2dba06 100644 --- a/static/common.css +++ b/static/common.css @@ -22,10 +22,20 @@ width: 100vw; } +.settings div.text { + width: 100%; +} + .settings label { line-height: 40px; } -.settings label.text { - line-height: 64px; +.settings .mdc-text-field label { + line-height: revert; + top: 22px; + bottom: auto; +} + +.settings #s-cookies .mdc-text-field { + min-width: 50%; }