Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-31 10:26:08 +01:00
Code Issues Packages Projects Releases 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
5 changed files with 15 additions and 19 deletions
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 { isShare } from "./utils.js";
type OptionValue = number | string;
export type OptionValue = number | string;
class Options {
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 (
<option
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}
</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 SpacedUpdate from "../../services/spaced_update";
import { OptionNames } from "@triliumnext/commons";
import options from "../../services/options";
import options, { type OptionValue } from "../../services/options";
import utils, { reloadFrontendApp } from "../../services/utils";
import Component from "../../components/component";
@@ -99,12 +99,12 @@ export function useSpacedUpdate(callback: () => Promise<void>, interval = 1000)
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 [ value, setValue ] = useState(initialValue);
const wrappedSetValue = useMemo(() => {
return async (newValue: string) => {
return async (newValue: OptionValue) => {
await options.save(name, newValue);
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.
*

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 OptionsRow from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection";
import { useTriliumOption } from "../../react/hooks";
import { useTriliumOption, useTriliumOptionInt } from "../../react/hooks";
import type { Locale } from "@triliumnext/commons";
import { isElectron } from "../../../services/utils";
import FormRadioGroup from "../../react/FormRadioGroup";
@@ -54,7 +54,7 @@ function LocaleSelector({ locales, currentValue, onChange }: { locales: Locale[]
function DateSettings() {
const [ firstDayOfWeek, setFirstDayOfWeek ] = useTriliumOption("firstDayOfWeek");
const [ firstWeekOfYear, setFirstWeekOfYear ] = useTriliumOption("firstWeekOfYear");
const [ minDaysInFirstWeek, setMinDaysInFirstWeek ] = useTriliumOption("minDaysInFirstWeek");
const [ minDaysInFirstWeek, setMinDaysInFirstWeek ] = useTriliumOptionInt("minDaysInFirstWeek");
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 {
private $formattingLocaleSelect!: JQuery<HTMLElement>;
private $minDaysRow!: JQuery<HTMLElement>;
doRender() {
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);
}