search

petyosi / react-virtuoso

The most powerful virtual list component for React
https://virtuoso.dev
MIT License
5.25k stars 301 forks source link

[Feature request] Add detection for grid-gap #363

Closed frabarz closed 2 years ago

frabarz commented 3 years ago

I'm currently using the VirtuosoGrid component to render a long list of items in a grid, using CSS grid, and it's working great. However, I noticed when reaching the end of the list, the calculation it does for the height of the wrapper and the padding at the top falls short. My grid had a grid-gap set, and the items some margin, so just to test I deactivated them, and the height calculations matched perfectly. For my use case just adding some extra padding-bottom to the parent component it's enough, but since this gap mismatch depends on the amount of items being rendered, getting closer to the end makes the mismatch vary and gets kinda hard to fix externally.

Near the end: image

At the end: image

Near the end without gap/margin: image

At the end without gap/margin: image

petyosi commented 3 years ago

I like the grid-gap CSS prop, and I think it closely matches the use case of the grid. Are you interested in opening a PR? It might require some additional tracking, because the gaps are number of items - 1, so it better be tracked separately. It will also be interesting how to measure it.

mihkeleidast commented 2 years ago

Hi @petyosi! We'd potentially like to contribute gap support to both Virtuoso and VirtuosoGrid. We have taken a look at the current source code and it's quite hard to comprehend. Could you give some pointers about where we should start looking to implement this? For example, is there anything that is being tracked similarly now that we could base our solution on?

petyosi commented 2 years ago

@mihkeleidast The grid would definitely be easier. You can trace how item dimensions are reported into the logic (around here - https://github.com/petyosi/react-virtuoso/blob/master/src/Grid.tsx#L103), and then how the stream is used for the internal logic calculation here - https://github.com/petyosi/react-virtuoso/blob/master/src/gridSystem.ts#L72.

Also - ensure that you get some basic understanding of https://urx.virtuoso.dev/ about how stream values are used.

github-actions[bot] commented 2 years ago

:tada: This issue has been resolved in version 2.14.0 :tada:

The release is available on:

Your semantic-release bot :package::rocket: