Skip to content

Add a way to disable certain checkboxes #168

@ttruefix14

Description

@ttruefix14

Is your feature request related to a problem? Please describe.

I need to prevent users from manually toggling certain checkboxes in the tree while still showing their checked state and allowing programmatic control. Currently, there's no way to disable specific checkboxes based on a condition.

Describe the solution you'd like

Add an isCheckboxDisabled option to useTree parameters that accepts a function to determine if a checkbox should be disabled:

const tree = useTree<SomeItem>({
  rootItemId: rootId,
  getItemName: (item) => item.getItemData().title,
  isItemFolder: (item) => item.getChildren().length > 0,
  isCheckboxDisabled: (item) => item.getItemData().isSystemEnabled, // New feature
  state: {
    checkedItems,
  },
  setCheckedItems,
  dataLoader: {
    getItem: (id) => items[id],
    getChildren: (id) => items[id].children,
  },
  canCheckFolders: true,
  features: [
    syncDataLoaderFeature,
    checkboxesFeature,
  ],
});

Disabled checkboxes should:

  • Render with disabled attribute
  • Still show their checked/unchecked state
  • Prevent user clicks
  • Be skipped by propagateCheckedState (not toggled when parent/children change)
  • Allow programmatic changes via setCheckedItems

Or maybe Instead of isCheckboxDisabled function, a fixedCheckedItems array in state could be used:

const tree = useTree<SomeItem>({
  rootItemId: rootId,
  state: {
    checkedItems,
    fixedCheckedItems, // Items that cannot be toggled by user
  },
  setCheckedItems,
  // ...
});

Metadata

Metadata

Assignees

Labels

No labels
No labels

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions