react-arborist
react-arborist copied to clipboard
Checkbox and search support
Hello,
I would like to replace react-dropdown-tree-select with this library. Would it be possible to add functionality where you can checkbox folders and search for folders?
Hi @mooijtech thanks for the question. I think you can accomplish what you want by using the tree.selectById(id, true) method, and the state.isSelected parts of the NodeRenderer's state.
The tree instance is passed to the node renderer so you can use like so.
function NodeRenderer({data, state, tree}) {
return (
...
<input type="checkbox" checked={state.isSelected} onClick={() => tree.selectById(data.id, true)} />
...
}
When I have more time, I'll put up an example of checkboxes on the demo site.
Hi James,
Finally got around to implementing this.
Using the Tree API works but doesn't allow shift-clicking to select everything between the first and last selected node (even when setting shift
to true).
React wants to use the onChange
event for checkboxes otherwise will show this console warning:
Warning: You provided a checked
prop to a form field without an onChange
handler. This will render a read-only field. If the field should be mutable use defaultChecked
. Otherwise, set either onChange
or readOnly
.
I ended up fixing the shift-clicking by calling the handlers
passed to the node renderer:
<input
id="row"
name="row"
type="checkbox"
checked={state.isSelected}
onClick={handlers.select}
onChange={() => {}}
/>
I also needed to listen for the selection change, can we expose an onSelect
event?
I think defaultChecked will work for you case. And this seems like an okay workaround. I'm working on a version 2 that will clean this up.
Using defaultChecked
will break keyboard up/down.
My onChange
wasn't getting fired for keyboard events.
I just figured it out via https://github.com/facebook/react/issues/13477
Edit: Actually it's still broken, my onChange
won't fire.
I think I've found the root cause of the onChange
not firing: https://github.com/facebook/react/issues/13424
Closed as this is solved by react-arborist v2: https://github.com/brimdata/react-arborist/pull/49#issuecomment-1286083041