Add a way to disable certain checkboxes
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
disabledattribute - 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,
// ...
});
The checkboxes are rendered by the library consumer anyways, what would be the benefit of managing disabled checkboxes on a library-level compared to just the case where the user directly sets the disabled attribute on the checkboxes that they want to disable?