feat(react/ribbon): reintroduce number collection properties

apps/client/src/widgets/ribbon/CollectionPropertiesTab.tsx

@@ -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>
+        </>
+    )
 }

apps/client/src/widgets/ribbon_widgets/book_properties.ts

@@ -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"

apps/client/src/widgets/ribbon_widgets/book_properties_config.ts

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