feat: collapse fields using an array of matcher functions

[roshaans]

I have a very large JSON object which I would like to allow my user's to inspect, but they do not need most of the information, so It would be great to programmatically be able to collapse and uncollapse fields.

We can take an additional props for expandedPaths: Path[] and modify the DataItemProps to include isExpanded.

We can set the isExpanded field for every data item initially by matching it against expandedPaths and when rendering, check to see if isExpanded is true to expand/collapse.

Additionally, it would be even better to instead of taking a list of path's for expandedPaths, we take in a list of functions that validate a path expandedPaths?: ((path: Path) => boolean)[]), so that programmatically, we can accurately target custom fields whose full structure we do not know about in the begining for example an array of objects with many fields, but you'd only like to expand certain fields inside each element of the array, except you are not sure how many elements would be in the array in the start.

[pionxzh]

Sounds valid to me. 👍

For now, you might need to use defaultInspectDepth={1} to limit the depth, or pick the object keys you want before passing it to the viewer.

This is what I think we can do to expand the functionality:

interface JsonViewerProps {
/**
   * Default inspect depth for nested objects.
   * _If the number is set too large, it could result in performance issues._
   *
   * @default 5
   */
  defaultInspectDepth?: number

  /**
   * ** >>> ADDED <<< **
   * Default inspect control for nested objects.
   *
   * Provide a function to customize which fields should be expanded by default.
   */
  defaultInspectControl?: (path: Path, value: unknown) => boolean
}

You can calculate the result based on the paths(field name, depth) and value.

To avoid the confusion, passing both defaultInspectDepth and defaultInspectControl at the same time will have a warning, and defaultInspectDepth will be ignored.

[pionxzh]

@roshaans let me know what you think~

[roshaans]

I agree with having the defaultInspectControl prop. For the meantime, I am most likely going to leverage another solution, but I appreciate your support.

[pionxzh]

There are some problems on the CI releasing. I will fix it and update a example for this.

[pionxzh]

You can check this demo.