Add support for preview when collapsed

[igo]

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:

[jaywcjlove]

@igo It looks easy to implement. How about adding a collapsedPreviewLength prop?

<JsonView
+  collapsedPreviewLength={12}
/>

[igo]

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.

[jaywcjlove]

@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"
+  }}
/>

[igo]

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"
/>

[jaywcjlove]

@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
    }
  }}
/>