lukasbach / react-complex-tree

Unopinionated Accessible Tree Component with Multi-Select and Drag-And-Drop
https://rct.lukasbach.com
MIT License
915 stars 72 forks source link

Expand tree element without selecting it #310

Closed andreash closed 5 months ago

andreash commented 7 months ago

** I am trying to use react-complex-tree in controlled environment and I'd like to expand elements by clicking on the arrow without selecting the element at the same time. That doesn't seem to be configurable yet - a click on the arrow alway causes the onSelect event w/o providing the source of the event. Am I am missing something? If not, it would be great to have this feature.

Also, I forked the component to create a respective pull request but npm install fails with errors:

` npm WARN ERESOLVE overriding peer dependency

npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm WARN ERESOLVE overriding peer dependency npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree npm ERR! npm ERR! While resolving: docs@2.3.2 npm ERR! Found: react@18.2.0 npm ERR! node_modules/react npm ERR! react@"^18.2.0" from docs@2.3.2 npm ERR! packages/docs npm ERR! docs@2.3.2 npm ERR! node_modules/docs npm ERR! workspace packages\docs from the root project npm ERR! npm ERR! Could not resolve dependency: npm ERR! peer react@"^16.8.4 || ^17.0.0" from @docusaurus/core@2.2.0 npm ERR! node_modules/@docusaurus/core npm ERR! @docusaurus/core@"2.2.0" from docs@2.3.2 npm ERR! packages/docs npm ERR! docs@2.3.2 npm ERR! node_modules/docs npm ERR! workspace packages\docs from the root project npm ERR! npm ERR! Fix the upstream dependency conflict, or retry npm ERR! this command with --force or --legacy-peer-deps npm ERR! to accept an incorrect (and potentially broken) dependency resolution.`

lukasbach commented 6 months ago

If you don't want clicks on the arrow to change the selection state, you should be able to just overwrite the click handler of the arrow renderer:

renderItemArrow={ ({item, context}) => (
    <div
      {...context.arrowProps}
      onClick={item.isFolder ? context.toggleExpandedState : undefined}
    >
// ...

If you are trying to check out RCT locally and get it running, maybe try running it with yarn instead of npm, there are some yarn workspace specific setup dependencies in there and it might not work with npm.