gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 23:29:02 +02:00
Code Issues Actions 19 Packages Projects Releases Wiki Activity

refactor(react/settings): use FormGroup for time selector

Browse Source
This commit is contained in:
Elian Doran 2025-08-19 22:36:47 +03:00
parent 59ba6a0b1e
commit 0841603be0
No known key found for this signature in database
3 changed files with 55 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

59
apps/client/src/widgets/type_widgets/options/components/TimeSelector.tsx
View File

@ -10,8 +10,8 @@ import toast from "../../../../services/toast";
type TimeSelectorScale = "seconds" | "minutes" | "hours" | "days"; type TimeSelectorScale = "seconds" | "minutes" | "hours" | "days";
interface TimeSelectorProps { interface TimeSelectorProps {
id?: string;
name: string; name: string;
label: string;
optionValueId: keyof OptionDefinitions; optionValueId: keyof OptionDefinitions;
optionTimeScaleId: keyof OptionDefinitions; optionTimeScaleId: keyof OptionDefinitions;
includedTimeScales?: Set<TimeSelectorScale>; includedTimeScales?: Set<TimeSelectorScale>;
@ -23,7 +23,7 @@ interface TimeScaleInfo {
unit: string; unit: string;
} }
export default function TimeSelector({ name, label, includedTimeScales, optionValueId, optionTimeScaleId, minimumSeconds }: TimeSelectorProps) { export default function TimeSelector({ id, name, includedTimeScales, optionValueId, optionTimeScaleId, minimumSeconds }: TimeSelectorProps) {
const values = useMemo(() => { const values = useMemo(() => {
const values: TimeScaleInfo[] = []; const values: TimeScaleInfo[] = [];
const timeScalesWithDefault = includedTimeScales ?? new Set(["seconds", "minutes", "hours", "days"]); const timeScalesWithDefault = includedTimeScales ?? new Set(["seconds", "minutes", "hours", "days"]);
@ -48,38 +48,37 @@ export default function TimeSelector({ name, label, includedTimeScales, optionVa
}, [ value, scale ]); }, [ value, scale ]);
return ( return (
<FormGroup label={label}> <div class="d-flex gap-2">
<div class="d-flex gap-2"> <FormTextBox
<FormTextBox id={id}
name={name} name={name}
type="number" min={0} step={1} required type="number" min={0} step={1} required
currentValue={displayedTime} onChange={(value, validity) => { currentValue={displayedTime} onChange={(value, validity) => {
if (!validity.valid) { if (!validity.valid) {
toast.showError(t("time_selector.invalid_input")); toast.showError(t("time_selector.invalid_input"));
return false; return false;
} }
let time = parseInt(value, 10); let time = parseInt(value, 10);
const minimumSecondsOrDefault = (minimumSeconds ?? 0); const minimumSecondsOrDefault = (minimumSeconds ?? 0);
const newTime = convertTime(time, scale).toOption(); const newTime = convertTime(time, scale).toOption();
if (Number.isNaN(time) || newTime < (minimumSecondsOrDefault)) { if (Number.isNaN(time) || newTime < (minimumSecondsOrDefault)) {
toast.showError(t("time_selector.minimum_input", { minimumSeconds: minimumSecondsOrDefault })); toast.showError(t("time_selector.minimum_input", { minimumSeconds: minimumSecondsOrDefault }));
time = minimumSecondsOrDefault; time = minimumSecondsOrDefault;
} }
setValue(newTime); setValue(newTime);
}} }}
/> />
<FormSelect <FormSelect
values={values} values={values}
keyProperty="value" titleProperty="unit" keyProperty="value" titleProperty="unit"
style={{ width: "auto" }} style={{ width: "auto" }}
currentValue={scale} onChange={setScale} currentValue={scale} onChange={setScale}
/> />
</div> </div>
</FormGroup>
) )
} }

35
apps/client/src/widgets/type_widgets/options/other.tsx
View File

@ -104,11 +104,12 @@ function NoteErasureTimeout() {
return ( return (
<OptionsSection title={t("note_erasure_timeout.note_erasure_timeout_title")}> <OptionsSection title={t("note_erasure_timeout.note_erasure_timeout_title")}>
<FormText>{t("note_erasure_timeout.note_erasure_description")}</FormText> <FormText>{t("note_erasure_timeout.note_erasure_description")}</FormText>
<TimeSelector <FormGroup label={t("note_erasure_timeout.erase_notes_after")}>
name="erase-entities-after" <TimeSelector
label={t("note_erasure_timeout.erase_notes_after")} name="erase-entities-after"
optionValueId="eraseEntitiesAfterTimeInSeconds" optionTimeScaleId="eraseEntitiesAfterTimeScale" optionValueId="eraseEntitiesAfterTimeInSeconds" optionTimeScaleId="eraseEntitiesAfterTimeScale"
/> />
</FormGroup>
<FormText>{t("note_erasure_timeout.manual_erasing_description")}</FormText> <FormText>{t("note_erasure_timeout.manual_erasing_description")}</FormText>
<Button <Button
@ -127,11 +128,12 @@ function AttachmentErasureTimeout() {
return ( return (
<OptionsSection title={t("attachment_erasure_timeout.attachment_erasure_timeout")}> <OptionsSection title={t("attachment_erasure_timeout.attachment_erasure_timeout")}>
<FormText>{t("attachment_erasure_timeout.attachment_auto_deletion_description")}</FormText> <FormText>{t("attachment_erasure_timeout.attachment_auto_deletion_description")}</FormText>
<TimeSelector <FormGroup label={t("attachment_erasure_timeout.erase_attachments_after")}>
name="erase-unused-attachments-after" <TimeSelector
label={t("attachment_erasure_timeout.erase_attachments_after")} name="erase-unused-attachments-after"
optionValueId="eraseUnusedAttachmentsAfterSeconds" optionTimeScaleId="eraseUnusedAttachmentsAfterTimeScale" optionValueId="eraseUnusedAttachmentsAfterSeconds" optionTimeScaleId="eraseUnusedAttachmentsAfterTimeScale"
/> />
</FormGroup>
<FormText>{t("attachment_erasure_timeout.manual_erasing_description")}</FormText> <FormText>{t("attachment_erasure_timeout.manual_erasing_description")}</FormText>
<Button <Button
@ -155,12 +157,13 @@ function RevisionSnapshotInterval() {
components={{ doc: <a href="https://triliumnext.github.io/Docs/Wiki/note-revisions.html" class="external" />}} components={{ doc: <a href="https://triliumnext.github.io/Docs/Wiki/note-revisions.html" class="external" />}}
/> />
</FormText> </FormText>
<TimeSelector <FormGroup label={t("revisions_snapshot_interval.snapshot_time_interval_label")}>
name="revision-snapshot-time-interval" <TimeSelector
label={t("revisions_snapshot_interval.snapshot_time_interval_label")} name="revision-snapshot-time-interval"
optionValueId="revisionSnapshotTimeInterval" optionTimeScaleId="revisionSnapshotTimeIntervalTimeScale" optionValueId="revisionSnapshotTimeInterval" optionTimeScaleId="revisionSnapshotTimeIntervalTimeScale"
minimumSeconds={10} minimumSeconds={10}
/> />
</FormGroup>
</OptionsSection> </OptionsSection>
) )
} }

13
apps/client/src/widgets/type_widgets/options/password.tsx
View File

@ -114,12 +114,13 @@ function ProtectedSessionTimeout() {
<a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" className="external">{t("password.wiki")}</a> {t("password.for_more_info")} <a class="tn-link" href="https://triliumnext.github.io/Docs/Wiki/protected-notes.html" className="external">{t("password.wiki")}</a> {t("password.for_more_info")}
</FormText> </FormText>
<TimeSelector <FormGroup label={t("password.protected_session_timeout_label")}>
name="protected-session-timeout" <TimeSelector
label={t("password.protected_session_timeout_label")} name="protected-session-timeout"
optionValueId="protectedSessionTimeout" optionTimeScaleId="protectedSessionTimeoutTimeScale" optionValueId="protectedSessionTimeout" optionTimeScaleId="protectedSessionTimeoutTimeScale"
minimumSeconds={60} minimumSeconds={60}
/> />
</FormGroup>
</OptionsSection> </OptionsSection>
) )
} }