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

refactor(react/ribbon): shared component for labelled entry

Browse Source
This commit is contained in:
Elian Doran
2025-08-23 23:59:41 +03:00
parent d7e36bdf93
commit b607d1e628
1 changed files with 23 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

41
apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx
View File

@@ -11,6 +11,7 @@ import { ParentComponent } from "../react/react_utils";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import FormCheckbox from "../react/FormCheckbox"; import FormCheckbox from "../react/FormCheckbox";
import FormTextBox from "../react/FormTextBox"; import FormTextBox from "../react/FormTextBox";
import { ComponentChildren } from "preact";
const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = { const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
grid: t("book_properties.grid"), grid: t("book_properties.grid"),
@@ -106,34 +107,38 @@ function NumberPropertyView({ note, property }: { note: FNote, property: NumberP
const [ value, setValue ] = useNoteLabel(note, property.bindToLabel); const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
return ( return (
<> <LabelledEntry label={property.label}>
<label> <FormTextBox
{property.label} type="number"
&nbsp;&nbsp; currentValue={value ?? ""} onChange={setValue}
<FormTextBox style={{ width: (property.width ?? 100) + "px" }}
type="number" min={property.min ?? 0}
currentValue={value ?? ""} onChange={setValue} />
style={{ width: (property.width ?? 100) + "px" }} </LabelledEntry>
min={property.min ?? 0}
/>
</label>
</>
) )
} }
function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) { function ComboBoxPropertyView({ note, property }: { note: FNote, property: ComboBoxProperty }) {
const [ value, setValue ] = useNoteLabel(note, property.bindToLabel); const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
return (
<LabelledEntry label={property.label}>
<FormSelectWithGroups
values={property.options}
keyProperty="value" titleProperty="label"
currentValue={value ?? ""} onChange={setValue}
/>
</LabelledEntry>
)
}
function LabelledEntry({ label, children }: { label: string, children: ComponentChildren }) {
return ( return (
<> <>
<label> <label>
{property.label} {label}
&nbsp;&nbsp; &nbsp;&nbsp;
<FormSelectWithGroups {children}
values={property.options}
keyProperty="value" titleProperty="label"
currentValue={value ?? ""} onChange={setValue}
/>
</label> </label>
</> </>
) )