mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 15:19:01 +02:00
feat(react/ribbon): reintroduce number collection properties
This commit is contained in:
parent
927ebcbec9
commit
2b8b185b5b
@ -5,11 +5,12 @@ import FormSelect from "../react/FormSelect";
|
|||||||
import { TabContext } from "./ribbon-interface";
|
import { TabContext } from "./ribbon-interface";
|
||||||
import { mapToKeyValueArray } from "../../services/utils";
|
import { mapToKeyValueArray } from "../../services/utils";
|
||||||
import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
|
import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
|
||||||
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty } from "../ribbon_widgets/book_properties_config";
|
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, NumberProperty } from "../ribbon_widgets/book_properties_config";
|
||||||
import Button from "../react/Button";
|
import Button from "../react/Button";
|
||||||
import { ParentComponent } from "../react/react_utils";
|
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";
|
||||||
|
|
||||||
const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
|
const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
|
||||||
grid: t("book_properties.grid"),
|
grid: t("book_properties.grid"),
|
||||||
@ -66,6 +67,8 @@ function mapPropertyView({ note, property }: { note: FNote, property: BookProper
|
|||||||
return <ButtonPropertyView note={note} property={property} />
|
return <ButtonPropertyView note={note} property={property} />
|
||||||
case "checkbox":
|
case "checkbox":
|
||||||
return <CheckboxPropertyView note={note} property={property} />
|
return <CheckboxPropertyView note={note} property={property} />
|
||||||
|
case "number":
|
||||||
|
return <NumberPropertyView note={note} property={property} />
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -95,4 +98,23 @@ function CheckboxPropertyView({ note, property }: { note: FNote, property: Check
|
|||||||
currentValue={value} onChange={setValue}
|
currentValue={value} onChange={setValue}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
function NumberPropertyView({ note, property }: { note: FNote, property: NumberProperty }) {
|
||||||
|
const [ value, setValue ] = useNoteLabel(note, property.bindToLabel);
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<label>
|
||||||
|
{property.label}
|
||||||
|
|
||||||
|
<FormTextBox
|
||||||
|
type="number"
|
||||||
|
currentValue={value ?? ""} onChange={setValue}
|
||||||
|
style={{ width: (property.width ?? 100) + "px" }}
|
||||||
|
min={property.min ?? 0}
|
||||||
|
/>
|
||||||
|
</label>
|
||||||
|
</>
|
||||||
|
)
|
||||||
}
|
}
|
@ -56,27 +56,6 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
|
|||||||
return $container;
|
return $container;
|
||||||
}
|
}
|
||||||
switch (property.type) {
|
switch (property.type) {
|
||||||
case "number":
|
|
||||||
const $numberInput = $("<input>", {
|
|
||||||
type: "number",
|
|
||||||
class: "form-control form-control-sm",
|
|
||||||
value: note.getLabelValue(property.bindToLabel) || "",
|
|
||||||
width: property.width ?? 100,
|
|
||||||
min: property.min ?? 0
|
|
||||||
});
|
|
||||||
$numberInput.on("change", () => {
|
|
||||||
const value = $numberInput.val();
|
|
||||||
if (value === "") {
|
|
||||||
attributes.removeOwnedLabelByName(note, property.bindToLabel);
|
|
||||||
} else {
|
|
||||||
attributes.setLabel(note.noteId, property.bindToLabel, String(value));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
$container.append($("<label>")
|
|
||||||
.text(property.label)
|
|
||||||
.append(" ".repeat(2))
|
|
||||||
.append($numberInput));
|
|
||||||
break;
|
|
||||||
case "combobox":
|
case "combobox":
|
||||||
const $select = $("<select>", {
|
const $select = $("<select>", {
|
||||||
class: "form-select form-select-sm"
|
class: "form-select form-select-sm"
|
||||||
|
@ -23,7 +23,7 @@ export interface ButtonProperty {
|
|||||||
onClick: (context: BookContext) => void;
|
onClick: (context: BookContext) => void;
|
||||||
}
|
}
|
||||||
|
|
||||||
interface NumberProperty {
|
export interface NumberProperty {
|
||||||
type: "number",
|
type: "number",
|
||||||
label: string;
|
label: string;
|
||||||
bindToLabel: string;
|
bindToLabel: string;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user