Dockery/Trilium
1
0
Fork 0
mirror of https://github.com/zadam/trilium.git synced 2025-11-17 02:30:42 +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

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

@@ -1,25 +1,29 @@
import { ComponentChildren, RefObject } from "preact";
import { cloneElement, ComponentChildren, RefObject, VNode } from "preact";
import { CSSProperties } from "preact/compat";
import { useUniqueName } from "./hooks";
interface FormGroupProps {
name: string;
labelRef?: RefObject<HTMLLabelElement>;
label?: string;
title?: string;
className?: string;
children: ComponentChildren;
children: VNode<any>;
description?: string | ComponentChildren;
disabled?: boolean;
style?: CSSProperties;
}
export default function FormGroup({ label, title, className, children, description, labelRef, disabled }: FormGroupProps) {
export default function FormGroup({ name, label, title, className, children, description, labelRef, disabled, style }: FormGroupProps) {
const id = useUniqueName(name);
const childWithId = cloneElement(children, { id });
return (
<div className={`form-group ${className} ${disabled ? "disabled" : ""}`} title={title}
style={{ "margin-bottom": "15px" }}>
{ label
? <label style={{ width: "100%" }} ref={labelRef}>
{label && <div style={{ "margin-bottom": "10px" }}>{label}</div> }
{children}
</label>
: children}
<div className={`form-group ${className} ${disabled ? "disabled" : ""}`} title={title} style={style}>
{ label &&
<label style={{ width: "100%" }} ref={labelRef} htmlFor={id}>{label}</label>}
{childWithId}
{description && <small className="form-text">{description}</small>}
</div>