chore(react/settings): port formatting locale

This commit is contained in:
Elian Doran 2025-08-14 23:31:57 +03:00
parent 22c3de582f
commit ba19fc7cf3
No known key found for this signature in database
2 changed files with 29 additions and 23 deletions

View File

@ -4,29 +4,46 @@ import FormSelect from "../../react/FormSelect";
import OptionsRow from "./components/OptionsRow";
import OptionsSection from "./components/OptionsSection";
import { useTriliumOption } from "../../react/hooks";
import type { Locale } from "@triliumnext/commons";
import { isElectron } from "../../../services/utils";
export default function InternationalizationOptions() {
return (
<OptionsSection title={t("i18n.title")}>
<>
<LocalizationOptions />
</OptionsSection>
</>
)
}
function LocalizationOptions() {
const locales = useMemo(() =>
getAvailableLocales().filter(locale => !locale.contentOnly)
, []);
const { uiLocales, formattingLocales: contentLocales } = useMemo(() => {
const allLocales = getAvailableLocales();
return {
uiLocales: allLocales.filter(locale => !locale.contentOnly),
formattingLocales: allLocales.filter(locale => locale.electronLocale),
}
}, []);
const [ locale, setLocale ] = useTriliumOption("locale");
const [ formattingLocale, setFormattingLocale ] = useTriliumOption("formattingLocale");
return (
<OptionsRow label={t("i18n.language")}>
<FormSelect
values={locales}
keyProperty="id" titleProperty="name"
currentValue={locale} onChange={setLocale}
/>
</OptionsRow>
<OptionsSection title={t("i18n.title")}>
<OptionsRow label={t("i18n.language")}>
<LocaleSelector locales={uiLocales} currentValue={locale} onChange={setLocale} />
</OptionsRow>
{isElectron() && <OptionsRow label={t("i18n.formatting-locale")}>
<LocaleSelector locales={contentLocales} currentValue={formattingLocale} onChange={setFormattingLocale} />
</OptionsRow>}
</OptionsSection>
)
}
function LocaleSelector({ locales, currentValue, onChange }: { locales: Locale[], currentValue: string, onChange: (newLocale: string) => void }) {
return <FormSelect
values={locales}
keyProperty="id" titleProperty="name"
currentValue={currentValue} onChange={onChange}
/>;
}

View File

@ -7,11 +7,6 @@ import type { OptionMap, Locale } from "@triliumnext/commons";
const TPL = /*html*/`
<div class="options-section">
<div class="locale-options-container">
<div class="option-row electron-only">
<label for="formatting-locale-select">${t("i18n.formatting-locale")}</label>
<select id="formatting-locale-select" class="formatting-locale-select form-select"></select>
</div>
<div class="option-row">
<label id="first-day-of-week-label">${t("i18n.first-day-of-the-week")}</label>
<div role="group" aria-labelledby="first-day-of-week-label">
@ -116,12 +111,6 @@ export default class LocalizationOptions extends OptionsWidget {
this.$minDaysRow = this.$widget.find(".min-days-row");
this.$formattingLocaleSelect = this.$widget.find(".formatting-locale-select");
this.$formattingLocaleSelect.on("change", async () => {
const newLocale = this.$formattingLocaleSelect.val();
await server.put(`options/formattingLocale/${newLocale}`);
});
this.$widget.find(`input[name="first-day-of-week"]`).on("change", () => {
const firstDayOfWeek = String(this.$widget.find(`input[name="first-day-of-week"]:checked`).val());
this.updateOption("firstDayOfWeek", firstDayOfWeek);