Controltype repeater field

[danielgroen]

Hi,

It would be nice if the controls would enhance a controll called: "repeater field"

This would be nice for reactive add or remove items in a array (or even object).
This would be handy for showing a menu list:

    { name: 'item1, url: 'item1' },
    { name: 'item2, url: 'item2' },

would look something like this:

This gives you a nice UI to add or remove a array or string, very UI friendly.

[shilman]

Have you checked out the new JSON editor in 6.2: #12824 (comment)

There's also this existing feature request that is related: #14266

[Smolations]

I think a repeater is more viable given the new feature in 6.2. The table feature won't fit nicely in the existing UI on smaller screens and detaches the object structure (i.e. array of objects) from the documentation, where devs need it the most. I think the existing UI supports both devs and non-devs with its flexibility and simplicity.

However, this issue is a fairly significant one for more complex components that take arrays of objects. The current editor requires adding an empty object first before adding any properties. Most components will require each object in the array to already conform to any schema laid out by the proptype declarations, which is exactly what ReactDOM does when checking those inputs in development, subsequently throwing any errors on malformed input. Granted, not everyone uses PropTypes.shapeOf() when defining their collections, so it shouldn't be assumed.

Being able to duplicate an existing item might take some doing, especially if the items themselves have nested arrays of objects. Though, an exact copy should be possible simply by JSON.parseing the result of a JSON.stringify call on an existing item.

At the very least, a user should be able to click the "add item to array" button and be able to pass an object with keys/values, which it cannot do now. If it can, I have yet to figure out how to do it as the result is always just a string with my object specification. A simple try/catch block could be used to try and JSON.parse the input value (assuming it matches a pattern of, say, /^\{.*\}$/) to determine if an object is being passed. If so, do the work necessary to get it to render correctly in the tree editor. Currently, it's quite tedious to constantly create shims for these kinds of args before they make it to the component in my stories.

In any case, neither the current implementation of the tree editor, nor #14266 really address the OP's feature request in this issue, imho. 😋

[ObieMunoz]

At the very least, a user should be able to click the "add item to array" button and be able to pass an object with keys/values, which it cannot do now

I would really make a lot of use out of such a feature.