suggestion: expandable labels should be clickable

[gregsadetsky]

me again :-)

a small thing that I noticed is that expanding nodes can be done by clicking the arrow, or the collapsed { ... } block, but it's not possible to expand a node by clicking the key name. see video below.

I made a small change locally to this line so that instead of

{field && <span className={style.label} >{field}:</span>}

it reads

{field && <span className={style.label} onClick={toggleExpanded}>{field}:</span>}

and that does exactly what I'm looking for:

there are some small styling issues with this though:

• the <span> doesn't have cursor: pointer, which would be useful to make it clear that the node can be clicked
• a much smaller issue is that when clicking fast-ish on the node to expand/collapse it, you may end up selecting some of the text by mistake. that can be fixed by setting user-select: none -- this is probably optional (and would also introduce a weird inconsistency in that some nodes' text would not be selectable, while others would be)

---

I'd be happy to contribute a fix -- would you prefer a new style to be created, something like expandableLabel, and that (based on label) would have the cursor:pointer declaration..?

thank you!

[AnyRoad]

Hi! Thank you for the fix and suggestion!

I think some users may stil want to just select the field name with double click (for instance to copy it). So it would be good to support both use cases with expandableLabel style and fallback to the label when first is not set. And make expanding by click on the field name optional as well.

[gregsadetsky]

hey, I just took a stab at implementing this in #27 -- feel free to leave comments here or in the PR. I took liberty with the naming (clickToExpandNode for the optional prop and clickableLabel for the style class) -- but obviously let me know what makes sense

I also added tests and was glad to keep the test coverage at 100% :-) cheers!

[AnyRoad]

Thanks! just merged and released version 1.4.0 👍

[gregsadetsky]

thank you!!