feat(react/ribbon): reintroduce number collection properties

This commit is contained in:
Elian Doran 2025-08-23 23:39:47 +03:00
parent 927ebcbec9
commit 2b8b185b5b
No known key found for this signature in database
3 changed files with 24 additions and 23 deletions

View File

@ -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}
&nbsp;&nbsp;
<FormTextBox
type="number"
currentValue={value ?? ""} onChange={setValue}
style={{ width: (property.width ?? 100) + "px" }}
min={property.min ?? 0}
/>
</label>
</>
)
}

View File

@ -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("&nbsp;".repeat(2))
.append($numberInput));
break;
case "combobox":
const $select = $("<select>", {
class: "form-select form-select-sm"

View File

@ -23,7 +23,7 @@ export interface ButtonProperty {
onClick: (context: BookContext) => void;
}
interface NumberProperty {
export interface NumberProperty {
type: "number",
label: string;
bindToLabel: string;