search

Icon-Shelf / icon-shelf

SVG icon manager for developers.
https://icon-shelf.github.io
MIT License
284 stars 28 forks source link

feat: use tanstack virtual #150

Closed nobkd closed 1 year ago

nobkd commented 1 year ago

This PR installs @tanstack/react-virtual@beta and removes @mierak/react-virtualized-grid package. (The package manager sorted the rest of the packages automatically)

Replacing <VirtualizedGrid>

The virtualized items use the useVirtualizer function, trying to replace the VirtualizedGrid> component. useVirtualizer must be called before any return statements because of React hooks needing to be always called in the same order. As the <VirtualizedGrid> component isn't used anymore, a new <div> wrapper is needed to ensure the same behavior.

Styling

For keeping the styles the same, the class grid grid-cols-[repeat(auto-fill,minmax(128px,1fr))] has the most influence. It is a customized tailwind value for grid-template-columns.

The minmax function defines, that grid children are 128px wide minimum and max 1 fraction of the grid.

The repeat ensures that as many items as possible fit into one row. The auto-fill makes that when items are missing to fill the row, that not the full space is used by one item, by 'faking the presence' of more children and keeping the width of items around 128px.

The height of items is handled by the <IconCard> component and does not have to be set.

Pre-rendering

The overscan value = pre-rendered items is set to 5*24 any tries to prepare around 5 screens top and bottom from the view. This is a rough approximation and probably isn't correct for most screens.

Feel free to replace this value.

Before / After This is how it looked on my system, so I don't know if the resizing problems were just for me. Before: @mierak/react-virtualized-grid [before](https://user-images.githubusercontent.com/44443899/229636918-c7adae7a-1e0e-46d4-a22a-cdd13d8dd84c.webm) --- After: @tanstack/react-virtual@beta [after](https://user-images.githubusercontent.com/44443899/229636922-172046e0-b068-433c-85e4-87d7b2c9dfe2.webm)

Linked issue

99

nobkd commented 1 year ago

Closed this because I can't get it to work properly with absolute positioned icons. Also I have problems getting it responsive to screen width changes. I find the api and expected styling for tanstack virtual rather unintuitive, but it's possible that I try to make a pr again in the future.