Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-11 15:55:52 +01:00
Code Issues Packages Projects Releases Activity

refactor(react/settings): add names to all form groups

Browse Source
This commit is contained in:
Elian Doran
2025-08-19 23:34:25 +03:00
parent 51291a61e6
commit 1d7799f981
29 changed files with 144 additions and 154 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
apps/client/src/widgets/react/FormCheckbox.tsx
View File

@@ -3,9 +3,11 @@ import { useEffect, useRef, useMemo, useCallback } from "preact/hooks";
import { escapeQuotes } from "../../services/utils";
import { ComponentChildren } from "preact";
import { CSSProperties, memo } from "preact/compat";
import { useUniqueName } from "./hooks";
interface FormCheckboxProps {
id?: string;
name?: string;
label: string | ComponentChildren;
/**
* If set, the checkbox label will be underlined and dotted, indicating a hint. When hovered, it will show the hint text.
@@ -17,7 +19,8 @@ interface FormCheckboxProps {
containerStyle?: CSSProperties;
}
const FormCheckbox = memo(({ id, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) => {
const FormCheckbox = memo(({ name, id: _id, disabled, label, currentValue, onChange, hint, containerStyle }: FormCheckboxProps) => {
const id = _id ?? useUniqueName(name);
const labelRef = useRef<HTMLLabelElement>(null);
// Fix: Move useEffect outside conditional

12
apps/client/src/widgets/react/FormGroup.tsx
View File

@@ -28,4 +28,16 @@ export default function FormGroup({ name, label, title, className, children, des
{description && <small className="form-text">{description}</small>}
</div>
);
}
/**
* Similar to {@link FormGroup} but allows more than one child. Due to this behaviour, there is no automatic ID assignment.
*/
export function FormMultiGroup({ label, children }: { label: string, children: ComponentChildren }) {
return (
<div className={`form-group`}>
{label && <label>{label}</label>}
{children}
</div>
);
}

4
apps/client/src/widgets/react/FormRadioGroup.tsx
View File

@@ -31,9 +31,9 @@ export default function FormRadioGroup({ values, ...restProps }: FormRadioProps)
export function FormInlineRadioGroup({ values, ...restProps }: FormRadioProps) {
return (
<>
<div role="group">
{values.map(({ value, label }) => (<FormRadio value={value} label={label} {...restProps} />))}
</>
</div>
)
}

4
apps/client/src/widgets/react/NoteAutocomplete.tsx
View File

@@ -6,6 +6,7 @@ import type { RefObject } from "preact";
import type { CSSProperties } from "preact/compat";
interface NoteAutocompleteProps {
id?: string;
inputRef?: RefObject<HTMLInputElement>;
text?: string;
placeholder?: string;
@@ -18,7 +19,7 @@ interface NoteAutocompleteProps {
noteId?: string;
}
export default function NoteAutocomplete({ inputRef: _ref, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged }: NoteAutocompleteProps) {
export default function NoteAutocomplete({ id, inputRef: _ref, text, placeholder, onChange, onTextChange, container, containerStyle, opts, noteId, noteIdChanged }: NoteAutocompleteProps) {
const ref = _ref ?? useRef<HTMLInputElement>(null);
useEffect(() => {
@@ -74,6 +75,7 @@ export default function NoteAutocomplete({ inputRef: _ref, text, placeholder, on
return (
<div className="input-group" style={containerStyle}>
<input
id={id}
ref={ref}
className="note-autocomplete form-control"
placeholder={placeholder ?? t("add_link.search_note")} />

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

@@ -190,6 +190,6 @@ export function useTriliumOptions<T extends OptionNames>(...names: T[]) {
* @param prefix a prefix to add to the unique name.
* @returns a name with the given prefix and a random alpanumeric string appended to it.
*/
export function useUniqueName(prefix: string) {
return useMemo(() => prefix + "-" + utils.randomString(10), [ prefix]);
export function useUniqueName(prefix?: string) {
return useMemo(() => (prefix ? prefix + "-" : "") + utils.randomString(10), [ prefix ]);
}