Open igo opened 1 month ago
@igo It looks easy to implement. How about adding a collapsedPreviewLength
prop?
<JsonView
+ collapsedPreviewLength={12}
/>
To make this useful I need to select which fields to show. collapsedPreviewLength
would be useful to limit how many of those fields would fit on the screen.
@igo Would it be acceptable if the API is designed like this?
<JsonView
+ collapsedPreview={12}
/>
<JsonView
+ collapsedPreview="some text"
/>
<JsonView
+ collapsedPreview={(value, expandKey = '', level, keys = []) => {
+ return "some text"
+ }}
/>
I do not fully understand your suggested API. I was thinking about something like this:
{
"user": { "username": "tim" } // firstName intentionally omitted
"address": [{"city": "NY"}]
}
<JsonView
collapsedPreviewKeys=['user.username', 'user.firstName', 'user.address.[0].city']
collapsedPreviewKeyName={true/false} // would show "username -> tim, city -> NY" if true else "tim, NY"
/>
@igo I think callback functions would be more flexible.
var object = {
"user": { "username": "tim" }
"address": [{"city": "NY"}]
}
<JsonView
value={object}
collapsedPreview={(value, expandKey = '', level, keys = []) => {
if (expandKey == "user") {
return value.username
}
if (expandKey == "city") {
return value
}
if (keys.join(".") == "user.address.0.city") {
return value
}
}}
/>
Instead of showing three dots when collapsed
would be great to set which fields are important and try to show them in preview when collapsed: