Skip to content

Add a way to disable certain checkboxes #168

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,
  // ...
});

Activity

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

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