Masonry support similar to flashlist

[rennard]

Hey, first off awesome project, really slick!

I'm doing some work at the moment using Shopify's flashlist, with masonry mode enabled, and I need a good way of allowing the user to sort the items, respecting the masonry layout. Your library works really well for this, other than the gaps between items if items in the same row are different heights.

So I added a quick update to enable masonry mode here. I'd love to discuss with you how we could get it merged in, if you're open to it.

Thanks!

[MatiPl01]

Hey @rennard!

Thanks for asking about this. If you don't need virtualization (I currently don't support virtualized lists), you can open a PR that adds this feature and I will review it and merge as this feature seems to be pretty nice to have.

One thing I'd suggest is that you could implement it as a separate component - Sortable.Masonry - similar to how I implemented Grid and Flex components, which reuse most of the same logic and just use a custom layout calculation logic.

If you want to open a PR and want some help, don't hesitate to ask.

Thank you in advance!

[rennard]

Awesome, thanks.

Good suggestion with the separate component, I don't have time to refactor it to that right now but I'll try next week and then raise the PR. Is there anything specific you'd want me to test before I open the PR?

[MatiPl01]

Perfect, thanks!

Is there anything specific you'd want me to test before I open the PR?

I don't think so. You can open the PR I'll review it and see what can be improved, or take care of refining the implementation myself.

[rennard]

I just added a PR here #518

Apologies but I'm not going to have time to do much of a refactor anytime soon. The core functionality works well enough for my purposes at the moment. Some of the reordering seems slightly janky, and it's difficult to know if that's an implementation detail on my part or if it's an inherent issue with trying to sort a list of items with different heights split across 2 columns.

If you don't have time to clean it up and there are specific things you want changing let me know and I will get around to it eventually

[MatiPl01]

Thanks @rennard a lot for opening a PR.

You don't have to apologise me for anything 😄, I totally understand you and I also often struggle to find time to work on my own projects.

I think that the reordering issues may stem from the implementation of the grid reordering function (here) - it is quite complex, but in general, it assumes that items in each row star at the same position, which is not true for the masonry layout and I think that a different logic should be implemented for this layout type.

I will try to look at your implementation on Friday or on the weekend if I find time and see what can be improved here.

Thanks for the PR again!

[rennard]

Thanks for understanding!

Yeah I did take a look at that and then decided it was 'good enough' 😂

The example in the PR I just updated showcases the jankiness more clearly, it's not balancing the columns as well as it could be when some items are much taller