YYsuni / react18-json-view

JSON viewer for react18
https://jv.yysuni.com/
MIT License
273 stars 24 forks source link

Regression in v0.2.7 #31

Open shennan opened 9 months ago

shennan commented 9 months ago

There is a change in the way that auto-collapsing of objects works between version 0.2.6 and 0.2.7.

When handing it a large array, v0.2.7 auto-collapses the array into sections of 100; like so:

Screenshot 2024-02-01 at 06 47 36

Which is not great. This happens even if I set the collapseObjectsAfterLength prop to higher than 100 or remove it entirely.

Have a test yourself on this:

const obj = Array.from(new Array(250)).map((el, i) => ({ index: i, foo: 'bar', hello: false }))

<JsonView
  src={obj}
  collapseObjectsAfterLength={5000} /* This has no effect */
  enableClipboard={false}
  collapsed={false}
/>

It's worth noting that the version before (0.2.6) doesn't do this but it also doesn't respond to the collapseObjectsAfterLength property at all - so it could be that this is just an issue with displaying arrays at the root level?

If the intention is to have an absolute maximum before collapsing, then 100 is too low of a setting. In any case; some clarity in the docs would be preferable (if this is not a bug).

YYsuni commented 9 months ago

I did that for imitating chrome console behavior(below) and for helping someone trouble in large array. Well, for you issue, I'd consider adding some logic. image

shennan commented 9 months ago

Hmmm, your choice but I personally think 100 is too harsh a limit. Browser console is for debugging purposes, not for UI. Your library is for UI. I've had to go back to version 0.2.6 and if you don't plan on supporting 100+ rows without the user having to uncollapse then I'll need to move libraries.

YYsuni commented 9 months ago

Don't worry, I hope I'd give you a satisfactory reply. Thanks for your issue feedback.

YYsuni commented 9 months ago

@shennan new property ignoreLargeArray available in v0.2.8-canary.0, you can npm i react18-json-view@canary to use it. More information, please check https://jv.yysuni.com/ Collapsed section