Add half checked icon to parent element with some checked children
merimem opened this issue · comments
Describe the bug
Hello, I'm utilizing the library to display a checkbox list with extensive data. However, I'm encountering an aesthetic challenge. I aim to display a half-checked icon in nodes that have some checked children. I am using the noCascade mode, as I don't want the children to be automatically checked when a parent is selected.
My inquiry is purely aesthetic. I don't need the parent being added to the list of checked items. But I need to have a half-checked icon into the parent node without adding the parent to the list of checked items.
This is my code:
<CheckboxTree checked={checkedValues} expanded={expandedValues} nodes={nodes} onCheck={onCheck} onExpand={onExpand} noCascade={true} icons={{ check: ( <CheckIcon className="h-4 w-4 rounded border border-blue-600 bg-blue-600 text-white focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" /> ), uncheck: ( <i className="h-4 w-4 rounded border border-gray-300 bg-gray-100 align-middle focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" /> ), halfCheck: ( <MinusIcon className="h-4 w-4 rounded border border-blue-600 bg-blue-600 text-white focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" /> ), expandClose: ( <ChevronRightIcon className="rct-icon rct-icon-expand-close mt-1 h-4 w-4 text-gray-500" /> ), expandOpen: ( <ChevronDownIcon className="rct-icon rct-icon-expand-open mt-1 h-4 w-4 text-gray-900" /> ), expandAll: ( <PlusIcon className="h-4 w-4 rounded border border-blue-600 bg-blue-600 text-white focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" /> ), collapseAll: ( <MinusIcon className="h-4 w-4 rounded border border-blue-600 bg-blue-600 text-white focus:ring-2 focus:ring-blue-500 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800 dark:focus:ring-blue-600" /> ), parentClose: <></>, parentOpen: <></>, leaf: <></> }} />
Expected behavior
The parent like you see in the screenshot is not half checked. So the user is lost because he doesn't know what did he check. Is there any error in my code or the feature doesn't exist yet?
Screenshots
Thank you for any guidance you can provide.
Hey there. The noCascade property makes the component ignore the half-check state altogether.
Currently, there is no way for this information to surface, as the design of noCascade makes the state of parents and nodes independent of one another. That is, the current design disables cascading in both directions. rather than in the single direction you are describing (parent to child).
In theory, the component should be able to handle this behavior with some internal modifications. A possible enhancement would be to introduce a new property like cascadeBehavior with one of ['parentToChild', 'childToParent', 'both']. The second option would align more with what you are saying, where checking children would induce a change of state in the parent.
The name of this property, its properties, and the potential deprecation of noCascade are all points of discussion.
Hello
Thank you for your answer.
Is that a feature that you plan to do in the near future? Because I see that the last release was the last year.
Thank you again
['parentToChild', 'childToParent', 'both'] is exactly what i'm looking for. I could not find another library that supports this. In my use case I assign products to collections. Due to the behaviour of other tools we need to select the parents automatically with a child selection but the parent could also be selected without any child collections.