feat(note_bars/collection): support split button properties

This commit is contained in:
Elian Doran 2025-12-11 19:34:22 +02:00
parent 0de67b6a69
commit a1513a3567
No known key found for this signature in database

View File

@ -2,10 +2,10 @@ import { t } from "i18next";
import FNote from "../../entities/fnote"; import FNote from "../../entities/fnote";
import { ViewTypeOptions } from "../collections/interface"; import { ViewTypeOptions } from "../collections/interface";
import Dropdown from "../react/Dropdown"; import Dropdown from "../react/Dropdown";
import { FormDropdownDivider, FormListItem, FormListToggleableItem } from "../react/FormList"; import { FormDropdownDivider, FormDropdownSubmenu, FormListItem, FormListToggleableItem } from "../react/FormList";
import Icon from "../react/Icon"; import Icon from "../react/Icon";
import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab"; import { useViewType, VIEW_TYPE_MAPPINGS } from "../ribbon/CollectionPropertiesTab";
import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty } from "../ribbon/collection-properties-config"; import { bookPropertiesConfig, BookProperty, ButtonProperty, CheckBoxProperty, SplitButtonProperty } from "../ribbon/collection-properties-config";
import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks"; import { useNoteLabel, useNoteLabelBoolean } from "../react/hooks";
import { useContext } from "preact/hooks"; import { useContext } from "preact/hooks";
import { ParentComponent } from "../react/react_utils"; import { ParentComponent } from "../react/react_utils";
@ -78,6 +78,8 @@ function ViewProperty({ note, property }: { note: FNote, property: BookProperty
switch (property.type) { switch (property.type) {
case "button": case "button":
return <ButtonPropertyView note={note} property={property} />; return <ButtonPropertyView note={note} property={property} />;
case "split-button":
return <SplitButtonPropertyView note={note} property={property} />;
case "checkbox": case "checkbox":
return <CheckBoxPropertyView note={note} property={property} />; return <CheckBoxPropertyView note={note} property={property} />;
} }
@ -101,6 +103,17 @@ function ButtonPropertyView({ note, property }: { note: FNote, property: ButtonP
); );
} }
function SplitButtonPropertyView({ note, property }: { note: FNote, property: SplitButtonProperty }) {
const parentComponent = useContext(ParentComponent);
const ItemsComponent = property.items;
return (parentComponent &&
<FormDropdownSubmenu icon={property.icon ?? "bx bx-empty"} title={property.label}>
<ItemsComponent note={note} parentComponent={parentComponent} />
</FormDropdownSubmenu>
);
}
function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) { function CheckBoxPropertyView({ note, property }: { note: FNote, property: CheckBoxProperty }) {
const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel); const [ value, setValue ] = useNoteLabelBoolean(note, property.bindToLabel);
return ( return (