add multidimensional reorder

[cjoecker]

As asked in #1400 , here is a PR to allow multidimensional reorder

For now, the user just needs to give the number of items per row.
In another PR, we can calculate it using the children's refs.

For the docs, do I need to create another PR to adapt it?

[mattgperry]

Hey @cjoecker, thanks for your submission! However I think there's a problem here with the itemsPerAxis prop. This doesn't mesh well with dynamic/responsive layouts. Rather than adding a prop the next step for this API would ideally be to remove the axis prop. We know the positions of all the children and the order in which they're rendered. So from that we should be able to work out how the list should be sortable.

[cjoecker]

Hey @mattgperry you are right, I will work on that, so that we can remove both of the props.

[cjoecker]

Hey @mattgperry , I removed the axis and itemsPerAxis prop 👏🏻 We should write in the documentation that the multidimensional reordering is only working for items of the same size.
This can be improved in the future but I keep it simple for now since the logic got pretty complex already.

Now it is fully responsive. Can you also tell me how to fix the pipeline? It is asking for a config but I couldn't see anything in the documentation about it.

[nelsongollop]

Any updates on this? Are you still actively working on this PR @cjoecker ? It would be a shame to let this awesome work go to waste. It's a must feature requested from many people.
Can you maybe provide some guidance @mattgperry ? 🙏

[cjoecker]

The PR is ready. I'm just waiting for the maintainers to review it :)

[TheTimeWalker]

I'm currently testing this PR out and I have noticed that there seems to be an issue when there's only one item then an uncaught error is being thrown: At least two children components are necessary. This also goes further that when you try to have something like this e.g.

        <Reorder.Group
          values={sort}
          onReorder={(newOrder: string[]) => {
            console.log(newOrder);
          }}
        >
          <Reorder.Item key={'value'} value={'value'}>
            <span>test</span>
          </Reorder.Item>
        </Reorder.Group>

Then Typescript complains that only a single child has been provided.

Additionally, it seems you can't add any additional components like

in Reorder.Group directly or use a map + a different Regroup.Item right inside as children. If done thenTypescript fails with Type 'Element[]' is not assignable to type 'ReactElement<any, string | JSXElementConstructor<any>> | (ReactElement<any, string | JSXElementConstructor<any>> & string)'.

[cjoecker]

@TheTimeWalker I made that on purpose here.
My idea was to throw an error when Reorder.Group has only one child. Like that, the developers will know what is wrong.

[TheTimeWalker]

Ah, I see. But wouldn't that break anything when the list only has one item or when <AnimatePresence> is used? This would essentially break examples like this one: https://www.framer.com/docs/reorder/##layout-animations

[cjoecker]

@TheTimeWalker good point! I just fixed it.

[mattgperry]

Hey @cjoecker thanks for your work on this. I'm going to merge it into a branch now and have a play, check tests etc. Hopefully we'll finally have this out soon!

[joi-lightyears]

Hi, have you guys merged this?
Because in newer framermotion version I still not use reorder on both axis