mirror of
https://github.com/zadam/trilium.git
synced 2025-10-20 07:08:55 +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 { mapToKeyValueArray } from "../../services/utils";
|
||||
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 { ParentComponent } from "../react/react_utils";
|
||||
import FNote from "../../entities/fnote";
|
||||
import FormCheckbox from "../react/FormCheckbox";
|
||||
import FormTextBox from "../react/FormTextBox";
|
||||
|
||||
const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
|
||||
grid: t("book_properties.grid"),
|
||||
@ -66,6 +67,8 @@ function mapPropertyView({ note, property }: { note: FNote, property: BookProper
|
||||
return <ButtonPropertyView note={note} property={property} />
|
||||
case "checkbox":
|
||||
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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
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":
|
||||
const $select = $("<select>", {
|
||||
class: "form-select form-select-sm"
|
||||
|
@ -23,7 +23,7 @@ export interface ButtonProperty {
|
||||
onClick: (context: BookContext) => void;
|
||||
}
|
||||
|
||||
interface NumberProperty {
|
||||
export interface NumberProperty {
|
||||
type: "number",
|
||||
label: string;
|
||||
bindToLabel: string;
|
||||
|
Loading…
x
Reference in New Issue
Block a user