Repository navigation
2.6.0 release - #928
Open
bvaughn wants to merge 3 commits into
Open
2.6.0 release#928bvaughn wants to merge 3 commits into
bvaughn wants to merge 3 commits into
Conversation
Lists with dynamic row heights now adjust the scroll position when rows above the viewport change height (e.g. as rows are measured while scrolling up through a chat log, or when a row's content resizes), so the rows in view don't move. Corrections are made in the same commit that moves the rows, so no frame shows them out of place. Lists scrolled to the end, or being scrolled by scrollToRow, are left alone. While the user is touch scrolling (which iOS doesn't allow the scroll position to be changed during), rows are shifted instead and the shift is replaced by a scroll position change once scrolling stops. Also adds List anchorRow (and useVirtualizer anchorItem) for keeping a specific row in place while its height changes, e.g. when expanding it.
With dynamic row heights and a rowKey (or useVirtualizer's new getItemKey option), measured heights are stored by key, so they follow their rows when rows are inserted, removed, or reordered. The rows on screen stay in place when rows are inserted or removed above them (e.g. when older messages are loaded at the top of a chat), including at the top or end of the list, and when the data is filtered or re-sorted (as long as a row in view is still in the list). The keys of the rendered rows are recorded after each commit, so the anchor row can be found again by key after the data changes; a bounded search near its previous index is tried first, falling back to a key map for rows that moved farther. anchorRow requests follow their row (or are cancelled if it's removed). Corrections the content wasn't large enough for (e.g. right after an insert) are finished after re-rendering, before the browser paints. Without a key, heights are stored by index as before.
useDynamicRowHeight stores all of the rows measured by one ResizeObserver
callback in a single update, copying its cache once rather than once
per row.
Heights stored by key are removed once the cache holds more than twice
as many rows as the list has had (and at least 1,000), so the cache
doesn't grow without bound as rows come and go, while rows hidden for
a while (e.g. by a filter) keep their heights. observeRowElements now
takes the list's rows ({ count, getKey }); the RowKeys type is exported
for custom DynamicRowHeight implementations.
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
This branch was successfully deployed
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
useDynamicRowHeightstores all of the rows measured at once (e.g. a newly visible page of rows) in a single update, rather than copying its cache for each row.scrollToRowis scrolling. While the user is touch scrolling, the rows are shifted instead (iOS ignores changes to the scroll position during touch scrolling), and the scroll position is adjusted once scrolling stops.rowKey(oruseVirtualizer's newgetItemKeyoption), measured heights are stored by key, so they follow their rows when rows are inserted, removed, or reordered; and the rows on screen stay in place when rows are inserted or removed above them, e.g. when older messages are loaded at the top of a chat (including while scrolled to the top or end of the list), or when the data is filtered or re-sorted (as long as a row in view is still in the list). Apps that adjusted the scroll position themselves after inserting rows should stop doing so when they pass a key. Without a key, heights are stored by index as before.DynamicRowHeight'sgetRowHeightandsetRowHeightmethods accept an optional key, andobserveRowElementsthe list's rows ({ count, getKey }); custom implementations that ignore them keep working (by index). Heights of rows that are no longer in the list are removed once the cache holds more than twice as many rows as the list has had (and at least 1,000), so rows hidden for a while (e.g. by a filter) keep their heights. TheRowKeystype is exported for customDynamicRowHeightimplementations. Keys must be stable (not the index or a random value), and the function should be cheap, since it's called for many rows.anchorRowmethod to theListimperative API (andanchorItemtouseVirtualizer) for keeping a specific row where it is on screen while its height changes, e.g. when the user expands or collapses it. Call it before making the change; the row is kept in place for the specifiedduration(1 second by default). (By default, the list keeps the first visible row that didn't change height in place, so a row at the top of the viewport that grows would extend upward.)