react-json-view icon indicating copy to clipboard operation
react-json-view copied to clipboard

Callback for expand / collapse actions

Open dyennam opened this issue 7 years ago • 4 comments

Hello, I am trying to find a way to have a callback every time the user tries to expand / collapse the view. The problem I am trying to fix is that I have RJV show up on Material-UI Dialog view. So when user expands the nested objects manually the view goes below the page. But If user clicks an expandAll button the view reRenders to center of page. So is there a way i can have a call back every time the user click on expand/collapse so that i can call window.dispatchEvent(new Event('resize')) which will cause the view to rePosition itself.

Expected View being: (When user performs expand all actions) image

Manually Expanded it looks like: The contents at the bottom end are going below the screen. image

Thank You

dyennam avatar Apr 24 '18 17:04 dyennam

@dyennam thanks for the feedback. this seems like a pretty reasonable request - but I'd like to avoid throwing events at the global scope (window). can you think of an alternative solution that would solve this issue for you?

mac-s-g avatar Apr 25 '18 21:04 mac-s-g

@mac-s-g Hello, I tried adding a onClick event handler at the root element, but as you know these events did not trickle down to RJV. I am not sure about an alternative solution. In my opinion, all i would need to fix the issue would be to find a way to figure out every time user clicks anywhere on the RJV component, so that i can reposition the root view accordingly. I am open to suggestions / ideas if you have any. Thank You

dyennam avatar Apr 25 '18 22:04 dyennam

@mac-s-g I have a slightly different use case that also needs a collapse/expand callback. I'm trying to put RJV in a table cell in react-virtualized Table, which needs row height explicitly calculated and set. So I basically need a callback any time RJV's height might change so I can recalculate parent's height accordingly. Perhaps onToggleCollapsed, and have toggleCollapsed (/src/js/components/DataTypes/Object.js#L82) trigger that.

alexanderabramov avatar Dec 03 '18 21:12 alexanderabramov

@mac-s-g I have a slightly different use case that also needs a collapse/expand callback. I'm trying to put RJV in a table cell in react-virtualized Table, which needs row height explicitly calculated and set. So I basically need a callback any time RJV's height might change so I can recalculate parent's height accordingly. Perhaps onToggleCollapsed, and have toggleCollapsed (/src/js/components/DataTypes/Object.js#L82) trigger that.

@alexanderabramov have you already used react-json-view with react-virtualized?

killjoy2013 avatar Mar 28 '22 04:03 killjoy2013