Allow custom add/remove button in SimpleFormIterator

[samelm]

Is your feature request related to a problem? Please describe.
Now buttons text taken from translate(), but in my case have to output different button text in different ArrayInput

I want to be able pass custom add/remove button component

Describe the solution you'd like
Maybe can pass props to SimpleFormIterator like

<SimpleFormIterator addButton={<AddButton/>} removeButton={<RemoveButton/>}

What do you think about it?

[manishsundriyal]

@fzaninotto @samelm @djhi I am trying to implement this.
What are your views on the onClick method? How should we handle that?

[fzaninotto]

@manishsundriyal Can you please explain your problem with more context?

[manishsundriyal]

@fzaninotto
I just need your view on this.

So far, I have implemented the following.

const getAddButton = () => {
        if (!addButton) {
            return (
                <Button
                    className={classNames('button-add', `button-add-${source}`)}
                    size="small"
                    onClick={addField}
                >
                    <AddIcon className={classes.leftIcon} />
                    {translate('ra.action.add')}
                </Button>
            );
        }
        return addButton;
    };
....
{!disableAdd && (
        <li className={classes.line}>
          <span className={classes.action}>{getAddButton()}</span>
        </li>
)}

My concern is how we'll handle the onClick={addField}? If the user will pass their own add/remove buttons through props then we cannot track the onClick event normally.
So, I think we can only allow the users to pass the inner content (like icons) for the add/remove buttons.
If that is the case then the implementation will be

const getAddButton = () => {
            return (
                <Button
                    className={classNames('button-add', `button-add-${source}`)}
                    size="small"
                    onClick={addField}
                >
                    {
                      addButton || (
                        <AddIcon className={classes.leftIcon} /> {translate('ra.action.add')}
                      )
                   }
                </Button>
            );
        return addButton;
    };

[manishsundriyal]

@fzaninotto @djhi
Any updates on this? I can implement this real quick. If anyone of you can put your thoughts on the above comment.

[djhi]

The addButton and removeButton props should have default values in the SimpleFormIterator.

Then SimpleFormIterator should clone them, overriding their onClick prop by passing a function which takes their original onClick prop and return another function.

This function would then do its normal job for SimpleFormIterator (adding, removing item) then call the original onClick.

Make sense ?

[manishsundriyal]

@djhi Thanks for the quick response, I will do that.

[manishsundriyal]

@fzaninotto @djhi
In #4818
I have implemented this. I have also added its docs and test cases. Please review and let me know if any changes are required.

[fzaninotto]

Fixed by #4818