Allow custom add and remove buttons in SimpleFormIterator

[manishsundriyal]

As mentioned in #4676

This is an enhancement that will allow us to pass our own custom add and remove buttons to the SimpleFormIterator component.

Changes

• feature: add addButton and removeButton as props in SimpleFormIterator
• refactor: moved the add and remove button logic to separate functions
• test cases: added test cases for addButton and removeButton props
• docs: added an example of the same in docs

Let me know if it requires any further updates.

[djhi]

Thanks for working on this 👍

[manishsundriyal]

@djhi I have done all the required changes, thanks for your suggestions.

[djhi]

Looks pretty good. Can you please add tests to ensure that the SimpleFormIterator still work correctly when using custom buttons (their onClick is bound correctly)?

[djhi]

Looks good. Can you add some tests to verify items are added/removed when using custom buttons with an onClick specified ?

[manishsundriyal]

Looks good. Can you add some tests to verify items are added/removed when using custom buttons with an onClick specified ?

I have added, two test cases to verify if add/remove buttons are not rendered if custom buttons are passed.
Just to confirm, you want me to add test cases to verify if custom add/remove buttons are rendered when passed as props.
or is this related to verify if action is performed onClick event? or both?

It would be really helpful if you can mention the cases you want.

[djhi]

Both :)

[manishsundriyal]

Both :)

Done, please review.

[manishsundriyal]

@djhi any updates?

[manishsundriyal]

@fzaninotto @djhi Any plans to merge this one?

[NikolMarg]

Any plans for this? It would help a lot.

[manishsundriyal]

@NikolMarg I have done all the required changes. It should get merged now.

[Luwangel]

Great job! 👍 I just posted a few improvements (typo, rewriting)

[manishsundriyal]

@Luwangel Done. Please let me know if anything else is required.

[Luwangel]

Just one more thing. Could you rebase your PR against next instead of master (change the base branch)? We'll publish your code in the next major version 3.8.0 because it introduces a new feature.

[manishsundriyal]

Sure, no issues. Done 👍

[fzaninotto]

there is a typo here, I read addButton twice

[Luwangel]

Oops, we missed it. I opened the PR #5095 to fix it.

[roshi112]

Hello I am new to git can someone please let me know where are the docs for the same ??

thanks in advance

[Luwangel]

Hello I am new to git can someone please let me know where are the docs for the same ??

thanks in advance

Hi,

You can find the complete documentation on react-admin's website: https://marmelab.com/react-admin/Inputs.html#arrayinput.

Regards,
Adrien

[Maybach91]

@Luwangel Is there any way to get an example how a <CustomAddButton/> or <CustomRemoveButton/> should look like to get it work? The only information about this is a button to create a new entry with pre-filled information (reference). Unfortunately the documentation for Record Buttons is empty. :(

Edit:

I guess its something like this for the <CustomAddButton/>:

// Imports required for CustomAddButton
import { Button } from "@material-ui/core";
import AddIcon from "@material-ui/icons/AddCircleOutline";

// Custom Buttom
const CustomAddButton = (props: any) => {
  return (
    <Button size="medium" variant="contained" color="secondary" {...props}>
      <AddIcon />
      Add new Question
    </Button>
  );
};
// Usage
<SimpleFormIterator addButton={<CustomAddButton {...props} />}>...</SimpleFormIterator>

Is there any way to pre fill some of the Input as well on click? Like i want to generate an custom ID field, which saves into the database. Currently it just generates the ID ones and all the defaultValues are the same, but i have a randomize function based on time on this value.

Edit2: Okay, its not possible to have these functions as Initial Values on the Input itself (reference)