How make React admin's <SimpleFormIterator> behave as a stack on item addition (add item-CodePudding

I have an item with a nested list of items. I can edit these nested items individually using a <SimpleFormIterator> mixed with a <FormDataConsumer>. The issue is that when i insert a new item in the list, it becomes the last item. I would like it to be the first, and shift every other item down a slot.

Maybe something like using a custom with an addOnTop callback could help? But I don't see a way to make it work without rewriting the whole component from scratch.

<SimpleFormIterator
     addButton={<ListAddButton onClick={addOnTop??} />}
     removeButton={<ListRemoveButton />}
>
...
</SimpleFormIterator>

CodePudding user response：

Maybe try with unshift(). Here is the link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift

CodePudding user response：

In the end I think I managed to solve doing something like this:

const form = useForm();
    const getData = useCallback(() => {
        const { articles } = form.getState().values;
        if (!articles) return [undefined];
        articles.pop();
        articles.unshift(undefined);
        return articles;
}, [form]);

<SimpleFormIterator
    addButton={
        <ListAddButton onClick={() => form.change("articles", getData())} />
  }
    removeButton={<ListRemoveButton />}
    TransitionProps={{
        enter: false,
        exit: false,
        addEndListener: () => {},
    }}
>
<SimpleFormIterator/>

I'm not sure it is the best approach, but it seems to work, although there is currently a bug with this component