mirror of
https://github.com/zadam/trilium.git
synced 2025-10-26 07:46:30 +01:00
feat(react/ribbon): reintroduce checkbox collection properties
This commit is contained in:
@@ -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}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -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",
|
||||
|
||||
@@ -9,7 +9,7 @@ interface BookConfig {
|
||||
properties: BookProperty[];
|
||||
}
|
||||
|
||||
interface CheckBoxProperty {
|
||||
export interface CheckBoxProperty {
|
||||
type: "checkbox",
|
||||
label: string;
|
||||
bindToLabel: string
|
||||
|
||||
Reference in New Issue
Block a user