gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-21 15:49:00 +02:00
Code Issues Actions 17 Packages Projects Releases Wiki Activity

refactor(react/settings): use better option mechanism

Browse Source
This commit is contained in:
Elian Doran 2025-08-14 23:54:32 +03:00
parent cce3d3bce8
commit da92255dd6
No known key found for this signature in database
5 changed files with 15 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
apps/client/src/services/options.ts
View File

@ -1,7 +1,7 @@
import server from "./server.js"; import server from "./server.js";
import { isShare } from "./utils.js"; import { isShare } from "./utils.js";
type OptionValue = number | string; export type OptionValue = number | string;
class Options { class Options {
initializedPromise: Promise<void>; initializedPromise: Promise<void>;

2
apps/client/src/widgets/react/FormSelect.tsx
View File

@ -65,7 +65,7 @@ function FormSelectGroup<T>({ values, keyProperty, titleProperty, currentValue }
return ( return (
<option <option
value={item[keyProperty] as any} value={item[keyProperty] as any}
selected={item[keyProperty] == currentValue} // triple equal is intentionally not used here, for comparisons with numeric values selected={item[keyProperty] === currentValue}
> >
{item[titleProperty ?? keyProperty] ?? item[keyProperty] as any} {item[titleProperty ?? keyProperty] ?? item[keyProperty] as any}
</option> </option>

14
apps/client/src/widgets/react/hooks.tsx
View File

@ -3,7 +3,7 @@ import { EventData, EventNames } from "../../components/app_context";
import { ParentComponent } from "./ReactBasicWidget"; import { ParentComponent } from "./ReactBasicWidget";
import SpacedUpdate from "../../services/spaced_update"; import SpacedUpdate from "../../services/spaced_update";
import { OptionNames } from "@triliumnext/commons"; import { OptionNames } from "@triliumnext/commons";
import options from "../../services/options"; import options, { type OptionValue } from "../../services/options";
import utils, { reloadFrontendApp } from "../../services/utils"; import utils, { reloadFrontendApp } from "../../services/utils";
import Component from "../../components/component"; import Component from "../../components/component";
@ -99,12 +99,12 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
return spacedUpdateRef.current; return spacedUpdateRef.current;
} }
export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [string, (newValue: string) => Promise<void>] { export function useTriliumOption(name: OptionNames, needsRefresh?: boolean): [string, (newValue: OptionValue) => Promise<void>] {
const initialValue = options.get(name); const initialValue = options.get(name);
const [ value, setValue ] = useState(initialValue); const [ value, setValue ] = useState(initialValue);
const wrappedSetValue = useMemo(() => { const wrappedSetValue = useMemo(() => {
return async (newValue: string) => { return async (newValue: OptionValue) => {
await options.save(name, newValue); await options.save(name, newValue);
if (needsRefresh) { if (needsRefresh) {
@ -134,6 +134,14 @@ export function useTriliumOptionBool(name: OptionNames): [boolean, (newValue: bo
] ]
} }
export function useTriliumOptionInt(name: OptionNames): [number, (newValue: number) => Promise<void>] {
const [ value, setValue ] = useTriliumOption(name);
return [
(parseInt(value, 10)),
(newValue) => setValue(newValue)
]
}
/** /**
* Generates a unique name via a random alphanumeric string of a fixed length. * Generates a unique name via a random alphanumeric string of a fixed length.
* *

4
apps/client/src/widgets/type_widgets/options/i18n.tsx
View File

@ -3,7 +3,7 @@ import { getAvailableLocales, t } from "../../../services/i18n";
import FormSelect from "../../react/FormSelect"; import FormSelect from "../../react/FormSelect";
import OptionsRow from "./components/OptionsRow"; import OptionsRow from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection"; import OptionsSection from "./components/OptionsSection";
import { useTriliumOption } from "../../react/hooks"; import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import type { Locale } from "@triliumnext/commons"; import type { Locale } from "@triliumnext/commons";
import { isElectron } from "../../../services/utils"; import { isElectron } from "../../../services/utils";
import FormRadioGroup from "../../react/FormRadioGroup"; import FormRadioGroup from "../../react/FormRadioGroup";
@ -54,7 +54,7 @@ function LocaleSelector({ locales, currentValue, onChange }: { locales: Locale[]
function DateSettings() { function DateSettings() {
const [ firstDayOfWeek, setFirstDayOfWeek ] = useTriliumOption("firstDayOfWeek"); const [ firstDayOfWeek, setFirstDayOfWeek ] = useTriliumOption("firstDayOfWeek");
const [ firstWeekOfYear, setFirstWeekOfYear ] = useTriliumOption("firstWeekOfYear"); const [ firstWeekOfYear, setFirstWeekOfYear ] = useTriliumOption("firstWeekOfYear");
const [ minDaysInFirstWeek, setMinDaysInFirstWeek ] = useTriliumOption("minDaysInFirstWeek"); const [ minDaysInFirstWeek, setMinDaysInFirstWeek ] = useTriliumOptionInt("minDaysInFirstWeek");
return ( return (
<> <>

12
apps/client/src/widgets/type_widgets/options/i18n/i18n.ts
View File

@ -67,20 +67,8 @@ const TPL = /*html*/`
export default class LocalizationOptions extends OptionsWidget { export default class LocalizationOptions extends OptionsWidget {
private $formattingLocaleSelect!: JQuery<HTMLElement>;
private $minDaysRow!: JQuery<HTMLElement>;
doRender() { doRender() {
this.$widget = $(TPL); this.$widget = $(TPL);
this.$minDaysRow = this.$widget.find(".min-days-row");
this.$widget.find('input[name="first-week-of-year"]').on('change', (e) => {
const target = e.target as HTMLInputElement;
const value = parseInt(target.value);
this.updateOption("firstWeekOfYear", value);
});
this.$widget.find(".restart-app-button").on("click", utils.restartDesktopApp); this.$widget.find(".restart-app-button").on("click", utils.restartDesktopApp);
} }