bigbuffet/bigbuffet-rw
2
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

ScrollableList: preserve index rather than scrollTop

Browse source
This commit is contained in:
Alex Gleason 2022-05-19 20:03:52 -05:00
parent ba0b4851f6
commit 533c356d60
No known key found for this signature in database
GPG key ID: 7211D1F99744FBB7
1 changed files with 12 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

25
app/soapbox/components/scrollable_list.tsx
View file

@ -1,5 +1,5 @@
import React, { useEffect, useRef } from 'react';
import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle } from 'react-virtuoso';
import { Virtuoso, Components, VirtuosoProps, VirtuosoHandle, ListRange } from 'react-virtuoso';
import PullToRefresh from 'soapbox/components/pull-to-refresh';
import { useSettings } from 'soapbox/hooks';
@ -66,10 +66,10 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
const settings = useSettings();
const autoloadMore = settings.get('autoloadMore');
// Preserve scroll position
const scrollPositionKey = `soapbox:scrollPosition:${location.pathname}`;
const scrollPosition = Number(sessionStorage.getItem(scrollPositionKey));
const initialScrollTop = useRef(scrollPosition);
// Preserve scroll index
const scrollIndexKey = `soapbox:scrollIndex:${location.pathname}`;
const scrollIndex = Number(sessionStorage.getItem(scrollIndexKey));
const initialIndex = useRef(scrollIndex);
const scroller = useRef<Window | HTMLElement | null>(null);
/** Normalized children */
@ -91,12 +91,7 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
}
useEffect(() => {
sessionStorage.removeItem(scrollPositionKey);
// On unmount, save the scroll position.
return () => {
sessionStorage.setItem(scrollPositionKey, String(document.documentElement.scrollTop));
};
sessionStorage.removeItem(scrollIndexKey);
}, []);
/* Render an empty state instead of the scrollable list */
@ -139,19 +134,23 @@ const ScrollableList = React.forwardRef<VirtuosoHandle, IScrollableList>(({
}
};
const handleRangeChanged = (range: ListRange) => {
sessionStorage.setItem(scrollIndexKey, String(range.startIndex));
};
/** Render the actual Virtuoso list */
const renderFeed = (): JSX.Element => (
<Virtuoso
ref={ref}
useWindowScroll
initialScrollTop={initialScrollTop.current}
className={className}
data={data}
startReached={onScrollToTop}
endReached={handleEndReached}
isScrolling={isScrolling => isScrolling && onScroll && onScroll()}
itemContent={renderItem}
initialTopMostItemIndex={showLoading ? 0 : initialTopMostItemIndex}
initialTopMostItemIndex={showLoading ? 0 : initialTopMostItemIndex || initialIndex.current}
rangeChanged={handleRangeChanged}
context={{
listClassName: className,
itemClassName,