mirror of
				https://github.com/zadam/trilium.git
				synced 2025-11-03 21:19:01 +01:00 
			
		
		
		
	feat(react/ribbon): reintroduce checkbox collection properties
This commit is contained in:
		
							parent
							
								
									ea1397de63
								
							
						
					
					
						commit
						927ebcbec9
					
				@ -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} />
 | 
			
		||||
  }
 | 
			
		||||
}
 | 
			
		||||
 | 
			
		||||
@ -82,3 +85,14 @@ 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
 | 
			
		||||
 | 
			
		||||
		Loading…
	
	
			
			x
			
			
		
	
		Reference in New Issue
	
	Block a user