1
Fork 0
tildes-reextended/source/options/components/theme-switcher.tsx

130 lines
3.0 KiB
TypeScript

import {Component} from "preact";
import {type Value} from "@holllo/webextension-storage";
import {
Data,
Feature,
fromStorage,
type ThemeSwitcherData,
} from "../../storage/exports.js";
import {Setting, type SettingProps} from "./index.js";
type State = {
data: Value<ThemeSwitcherData> | undefined;
hasUnsavedChanges: boolean;
themesList: Array<[string, string]>;
};
export class ThemeSwitcherSetting extends Component<SettingProps, State> {
constructor(props: SettingProps) {
super(props);
this.state = {
data: undefined,
hasUnsavedChanges: false,
themesList: [],
};
}
async componentDidMount() {
const themesList = await fromStorage(Data.ThemesList);
this.setState({
data: await fromStorage(Feature.ThemeSwitcher),
themesList: themesList.value,
});
}
onChange = (event: Event, key: keyof ThemeSwitcherData) => {
const {data} = this.state;
const target = event.target as HTMLInputElement | HTMLSelectElement;
if (data === undefined) {
return;
}
data.value[key] = target.value;
this.setState({data, hasUnsavedChanges: true});
};
save = async () => {
const {data} = this.state;
if (data === undefined) {
return;
}
await data.save();
this.setState({hasUnsavedChanges: false});
};
render() {
const {data, hasUnsavedChanges, themesList} = this.state;
if (data === undefined) {
return;
}
const themeOptions = themesList.map(([value, text]) => (
<option value={value}>{text}</option>
));
const unsavedChanges = hasUnsavedChanges ? "unsaved-changes" : "";
return (
<Setting {...this.props}>
<p class="info">
Automatically switch between two themes at certain times of the day.
</p>
<button
class={`button margin-bottom-8 has-save-status ${unsavedChanges}`}
onClick={this.save}
>
Save{hasUnsavedChanges ? "*" : ""}
</button>
<p>
Switch to{" "}
<select
class="styled-select"
onChange={(event) => {
this.onChange(event, "themeA");
}}
value={data.value.themeA}
>
{themeOptions}
</select>{" "}
at{" "}
<input
class="styled-text-input"
onChange={(event) => {
this.onChange(event, "hourA");
}}
type="text"
value={data.value.hourA}
/>
</p>
<p>
Switch to{" "}
<select
class="styled-select"
onChange={(event) => {
this.onChange(event, "themeB");
}}
value={data.value.themeB}
>
{themeOptions}
</select>{" "}
at{" "}
<input
class="styled-text-input"
onChange={(event) => {
this.onChange(event, "hourB");
}}
type="text"
value={data.value.hourB}
/>
</p>
</Setting>
);
}
}