feat(react/ribbon): reintroduce checkbox collection properties

This commit is contained in:
Elian Doran
2025-08-23 23:32:12 +03:00
parent ea1397de63
commit 927ebcbec9
3 changed files with 17 additions and 20 deletions

View File

@@ -4,11 +4,12 @@ import { ViewTypeOptions } from "../../services/note_list_renderer";
import FormSelect from "../react/FormSelect";
import { TabContext } from "./ribbon-interface";
import { mapToKeyValueArray } from "../../services/utils";
import { useNoteLabel } from "../react/hooks";
import { bookPropertiesConfig, BookProperty, ButtonProperty } from "../ribbon_widgets/book_properties_config";
import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty } 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";
const VIEW_TYPE_MAPPINGS: Record<ViewTypeOptions, string> = {
grid: t("book_properties.grid"),
@@ -63,6 +64,8 @@ function mapPropertyView({ note, property }: { note: FNote, property: BookProper
switch (property.type) {
case "button":
return <ButtonPropertyView note={note} property={property} />
case "checkbox":
return <CheckboxPropertyView note={note} property={property} />
}
}
@@ -81,4 +84,15 @@ function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonP
});
}}
/>
}
function CheckboxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
return (
<FormCheckbox
label={property.label}
currentValue={value} onChange={setValue}
/>
)
}

View File

@@ -56,23 +56,6 @@ export default class BookPropertiesWidget extends NoteContextAwareWidget {
return $container;
}
switch (property.type) {
case "checkbox":
const $label = $("<label>").text(property.label);
const $checkbox = $("<input>", {
type: "checkbox",
class: "form-check-input",
});
$checkbox.on("change", () => {
if ($checkbox.prop("checked")) {
attributes.setLabel(note.noteId, property.bindToLabel);
} else {
attributes.removeOwnedLabelByName(note, property.bindToLabel);
}
});
$checkbox.prop("checked", note.hasOwnedLabel(property.bindToLabel));
$label.prepend($checkbox);
$container.append($label);
break;
case "number":
const $numberInput = $("<input>", {
type: "number",

View File

@@ -9,7 +9,7 @@ interface BookConfig {
properties: BookProperty[];
}
interface CheckBoxProperty {
export interface CheckBoxProperty {
type: "checkbox",
label: string;
bindToLabel: string