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

refactor(react/settings): associate IDs for labels

Browse Source
This commit is contained in:
Elian Doran
2025-08-19 22:54:15 +03:00
parent 0841603be0
commit 51291a61e6
8 changed files with 46 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -19,6 +19,7 @@ interface ValueConfig<T, Q> {
}
interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
id?: string;
onChange: OnChangeListener;
style?: CSSProperties;
}
@@ -26,9 +27,9 @@ interface FormSelectProps<T, Q> extends ValueConfig<T, Q> {
/**
* Combobox component that takes in any object array as data. Each item of the array is rendered as an item, and the key and values are obtained by looking into the object by a specified key.
*/
export default function FormSelect<T>({ onChange, style, ...restProps }: FormSelectProps<T, T>) {
export default function FormSelect<T>({ id, onChange, style, ...restProps }: FormSelectProps<T, T>) {
return (
<FormSelectBody onChange={onChange} style={style}>
<FormSelectBody id={id} onChange={onChange} style={style}>
<FormSelectGroup {...restProps} />
</FormSelectBody>
);
@@ -37,9 +38,9 @@ export default function FormSelect<T>({ onChange, style, ...restProps }: FormSel
/**
* Similar to {@link FormSelect}, but the top-level elements are actually groups.
*/
export function FormSelectWithGroups<T>({ values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
export function FormSelectWithGroups<T>({ id, values, keyProperty, titleProperty, currentValue, onChange }: FormSelectProps<T, FormSelectGroup<T>>) {
return (
<FormSelectBody onChange={onChange}>
<FormSelectBody id={id} onChange={onChange}>
{values.map(({ title, items }) => {
return (
<optgroup label={title}>
@@ -51,9 +52,10 @@ export function FormSelectWithGroups<T>({ values, keyProperty, titleProperty, cu
)
}
function FormSelectBody({ children, onChange, style }: { children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
function FormSelectBody({ id, children, onChange, style }: { id?: string, children: ComponentChildren, onChange: OnChangeListener, style?: CSSProperties }) {
return (
<select
id={id}
class="form-select"
onChange={e => onChange((e.target as HTMLInputElement).value)}
style={style}