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>
Maybe try with unshift(). Here is the link: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/unshift
In the end I think I managed to solve doing something like this:
const form = useForm();
const getData = useCallback(() => {
const emptyArticle = {
URL: "",
title: "",
image: "",
eyelet: "",
topic: "",
};
const { articles } = form.getState().values;
if (!articles) return [emptyArticle];
articles.pop();
articles.unshift(emptyArticle);
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 that forces the use of "emptyArticle" instead of simply pushing "undefined".