gaschz/trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-10-20 07:08:55 +02:00
Code Issues Actions 18 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";
interface TimeSelectorProps {
id?: string;
name: string;
label: string;
optionValueId: keyof OptionDefinitions;
optionTimeScaleId: keyof OptionDefinitions;
includedTimeScales?: Set<TimeSelectorScale>;
@ -23,7 +23,7 @@ interface TimeScaleInfo {
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: TimeScaleInfo[] = [];
const timeScalesWithDefault = includedTimeScales ?? new Set(["seconds", "minutes", "hours", "days"]);
@ -48,38 +48,37 @@ export default function TimeSelector({ name, label, includedTimeScales, optionVa
}, [ value, scale ]);
return (
<FormGroup label={label}>
<div class="d-flex gap-2">
<FormTextBox
name={name}
type="number" min={0} step={1} required
currentValue={displayedTime} onChange={(value, validity) => {
if (!validity.valid) {
toast.showError(t("time_selector.invalid_input"));
return false;
}
<div class="d-flex gap-2">
<FormTextBox
id={id}
name={name}
type="number" min={0} step={1} required
currentValue={displayedTime} onChange={(value, validity) => {
if (!validity.valid) {
toast.showError(t("time_selector.invalid_input"));
return false;
}
let time = parseInt(value, 10);
const minimumSecondsOrDefault = (minimumSeconds ?? 0);
const newTime = convertTime(time, scale).toOption();
let time = parseInt(value, 10);
const minimumSecondsOrDefault = (minimumSeconds ?? 0);
const newTime = convertTime(time, scale).toOption();
if (Number.isNaN(time) || newTime < (minimumSecondsOrDefault)) {
toast.showError(t("time_selector.minimum_input", { minimumSeconds: minimumSecondsOrDefault }));
time = minimumSecondsOrDefault;
}
if (Number.isNaN(time) || newTime < (minimumSecondsOrDefault)) {
toast.showError(t("time_selector.minimum_input", { minimumSeconds: minimumSecondsOrDefault }));
time = minimumSecondsOrDefault;
}
setValue(newTime);
}}
/>
setValue(newTime);
}}
/>
<FormSelect
values={values}
keyProperty="value" titleProperty="unit"
style={{ width: "auto" }}
currentValue={scale} onChange={setScale}
/>
</div>
</FormGroup>
<FormSelect
values={values}
keyProperty="value" titleProperty="unit"
style={{ width: "auto" }}
currentValue={scale} onChange={setScale}
/>
</div>
)
}

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

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