lukasbach / react-complex-tree

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

Include context.arrowProps in the minimalistic render hooks example #260

Closed AlexMayleRdn closed 1 year ago

AlexMayleRdn commented 1 year ago

Describe the bug Just a documentation edit. If you are implementing your own render hooks, you can shoot yourself in the foot by following the minimalistic render hooks example 1 and then changing the defaultInteractionMode prop to ClickArrowToExpand. The example includes all of the other props which are to be spread (i.e., context.itemContainerWithChildrenProps) but not arrowProps. If you were to switch the interaction mode, you will find that the arrow does not expand since there is no handler capturing the click on the arrow or at an ancestor element.

To Reproduce

  1. Provide the renderItemArrow prop as in the example 1.
  2. Provide defaultInteractionMode={InteractionMode.ClickArrowToExpand}
  3. Change the key of the tree environment if you are doing this in the playground otherwise the interaction mode won't take effect.

Expected behavior I would expect the minimalistic example's renderItemArrow prop to look like the following.

                renderItemArrow={({ item, context }) =>
                    item.isFolder ?
                        <span {...context.arrowProps}>
                                {context.isExpanded ? 'v ' : '> '}
                        </span>
                        : null
                }

Desktop (please complete the following information):

Additional context Add any other context about the problem here.

lukasbach commented 1 year ago

Hey, thanks for your report, I updated the docs!