mirror of https://github.com/msgbyte/tailchat
feat: add DynamicSizeList
moonrailgun
4 years ago
parent
ce0d2f08c5
commit
25c20b8f8d
@ -0,0 +1,948 @@
|
|||||||
|
import memoizeOne from 'memoize-one';
|
||||||
|
import { createElement, PureComponent } from 'react';
|
||||||
|
import { ItemMeasurer } from './ItemMeasurer';
|
||||||
|
|
||||||
|
type ScrollDirection = any;
|
||||||
|
|
||||||
|
const getItemMetadata = (props: any, index: any, listMetaData: any) => {
|
||||||
|
const { itemOffsetMap, itemSizeMap } = listMetaData;
|
||||||
|
const { itemData } = props;
|
||||||
|
// If the specified item has not yet been measured,
|
||||||
|
// Just return an estimated size for now.
|
||||||
|
if (!itemSizeMap[itemData[index]]) {
|
||||||
|
return {
|
||||||
|
offset: 0,
|
||||||
|
size: 0,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const offset = itemOffsetMap[itemData[index]] || 0;
|
||||||
|
const size = itemSizeMap[itemData[index]] || 0;
|
||||||
|
|
||||||
|
return { offset, size };
|
||||||
|
};
|
||||||
|
|
||||||
|
const getItemOffset = (props: any, index: any, listMetaData: any) =>
|
||||||
|
getItemMetadata(props, index, listMetaData).offset;
|
||||||
|
|
||||||
|
const getOffsetForIndexAndAlignment = (
|
||||||
|
props: any,
|
||||||
|
index: any,
|
||||||
|
align: any,
|
||||||
|
scrollOffset: any,
|
||||||
|
listMetaData: any
|
||||||
|
) => {
|
||||||
|
const { height } = props;
|
||||||
|
const itemMetadata = getItemMetadata(props, index, listMetaData);
|
||||||
|
|
||||||
|
// Get estimated total size after ItemMetadata is computed,
|
||||||
|
// To ensure it reflects actual measurements instead of just estimates.
|
||||||
|
const estimatedTotalSize = listMetaData.totalMeasuredSize;
|
||||||
|
|
||||||
|
const maxOffset = Math.max(
|
||||||
|
0,
|
||||||
|
itemMetadata.offset + itemMetadata.size - height
|
||||||
|
);
|
||||||
|
const minOffset = Math.max(0, itemMetadata.offset);
|
||||||
|
|
||||||
|
switch (align) {
|
||||||
|
case 'start':
|
||||||
|
return minOffset;
|
||||||
|
case 'end':
|
||||||
|
return maxOffset;
|
||||||
|
case 'center':
|
||||||
|
return Math.round(minOffset - height / 2 + itemMetadata.size / 2);
|
||||||
|
case 'auto':
|
||||||
|
default:
|
||||||
|
if (scrollOffset >= minOffset && scrollOffset <= maxOffset) {
|
||||||
|
return estimatedTotalSize - (scrollOffset + height);
|
||||||
|
} else if (scrollOffset - minOffset < maxOffset - scrollOffset) {
|
||||||
|
return minOffset;
|
||||||
|
} else {
|
||||||
|
return maxOffset;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const findNearestItem = (
|
||||||
|
props: any,
|
||||||
|
listMetaData: any,
|
||||||
|
high: any,
|
||||||
|
low: any,
|
||||||
|
scrollOffset: any
|
||||||
|
) => {
|
||||||
|
let index = low;
|
||||||
|
while (low <= high) {
|
||||||
|
const currentOffset = getItemMetadata(props, low, listMetaData).offset;
|
||||||
|
if (scrollOffset - currentOffset <= 0) {
|
||||||
|
index = low;
|
||||||
|
}
|
||||||
|
low++;
|
||||||
|
}
|
||||||
|
return index;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStartIndexForOffset = (props: any, offset: any, listMetaData: any) => {
|
||||||
|
const { totalMeasuredSize } = listMetaData;
|
||||||
|
const { itemData } = props;
|
||||||
|
|
||||||
|
// If we've already positioned and measured past this point,
|
||||||
|
// Use a binary search to find the closets cell.
|
||||||
|
if (offset <= totalMeasuredSize) {
|
||||||
|
return findNearestItem(props, listMetaData, itemData.length, 0, offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
// Otherwise render a new batch of items starting from where 0.
|
||||||
|
return 0;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getStopIndexForStartIndex = (
|
||||||
|
props: any,
|
||||||
|
startIndex: any,
|
||||||
|
scrollOffset: any,
|
||||||
|
listMetaData: any
|
||||||
|
) => {
|
||||||
|
const { itemData } = props;
|
||||||
|
|
||||||
|
let stopIndex = startIndex;
|
||||||
|
const maxOffset = scrollOffset + props.height;
|
||||||
|
const itemMetadata = getItemMetadata(props, stopIndex, listMetaData);
|
||||||
|
let offset = itemMetadata.offset + (itemMetadata.size || 0);
|
||||||
|
const closestOffsetIndex = 0;
|
||||||
|
while (stopIndex > 0 && offset <= maxOffset) {
|
||||||
|
const itemMetadata = getItemMetadata(props, stopIndex, listMetaData);
|
||||||
|
offset = itemMetadata.offset + itemMetadata.size;
|
||||||
|
stopIndex--;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (stopIndex >= itemData.length) {
|
||||||
|
return closestOffsetIndex;
|
||||||
|
}
|
||||||
|
|
||||||
|
return stopIndex;
|
||||||
|
};
|
||||||
|
|
||||||
|
const getItemSize = (props: any, index: any, listMetaData: any) => {
|
||||||
|
// Do not hard-code item dimensions.
|
||||||
|
// We don't know them initially.
|
||||||
|
// Even once we do, changes in item content or list size should reflow.
|
||||||
|
return getItemMetadata(props, index, listMetaData).size;
|
||||||
|
};
|
||||||
|
|
||||||
|
type OnScrollArgs = {
|
||||||
|
scrollDirection: 'backward' | 'forward';
|
||||||
|
scrollOffset: number;
|
||||||
|
scrollUpdateWasRequested: boolean;
|
||||||
|
clientHeight: number;
|
||||||
|
scrollHeight: number;
|
||||||
|
};
|
||||||
|
|
||||||
|
interface DynamicSizeListProps {
|
||||||
|
canLoadMorePosts: (id?: string) => void;
|
||||||
|
children: (info: { data: any; itemId: any; style?: any }) => JSX.Element;
|
||||||
|
height: number;
|
||||||
|
initRangeToRender: number[];
|
||||||
|
initScrollToIndex: () => any;
|
||||||
|
initialScrollOffset?: number;
|
||||||
|
innerRef: React.RefObject<any>;
|
||||||
|
innerTagName?: string;
|
||||||
|
outerTagName?: string;
|
||||||
|
itemData: string[];
|
||||||
|
onItemsRendered: (args: any) => void;
|
||||||
|
onScroll: (scrollArgs: OnScrollArgs) => void;
|
||||||
|
overscanCountBackward: number;
|
||||||
|
overscanCountForward: number;
|
||||||
|
style: React.CSSProperties;
|
||||||
|
width: number;
|
||||||
|
outerRef?: any;
|
||||||
|
className?: string;
|
||||||
|
correctScrollToBottom?: boolean;
|
||||||
|
innerListStyle?: React.CSSProperties;
|
||||||
|
loaderId?: string;
|
||||||
|
scrollToFailed?: (index: number) => void;
|
||||||
|
}
|
||||||
|
interface DynamicSizeListState {
|
||||||
|
scrollDirection: 'backward' | 'forward';
|
||||||
|
scrollOffset: number;
|
||||||
|
scrollUpdateWasRequested: boolean;
|
||||||
|
scrollDelta: number;
|
||||||
|
scrollHeight: number;
|
||||||
|
localOlderPostsToRender: any[];
|
||||||
|
scrolledToInitIndex?: boolean;
|
||||||
|
}
|
||||||
|
export default class DynamicSizeList extends PureComponent<
|
||||||
|
DynamicSizeListProps,
|
||||||
|
DynamicSizeListState
|
||||||
|
> {
|
||||||
|
_listMetaData = {
|
||||||
|
itemOffsetMap: {} as any,
|
||||||
|
itemSizeMap: {} as any,
|
||||||
|
totalMeasuredSize: 0,
|
||||||
|
atBottom: true,
|
||||||
|
};
|
||||||
|
|
||||||
|
_itemStyleCache: any = {};
|
||||||
|
_outerRef: any;
|
||||||
|
_scrollCorrectionInProgress = false;
|
||||||
|
_scrollByCorrection: number | null = null;
|
||||||
|
_keepScrollPosition = false;
|
||||||
|
_keepScrollToBottom = false;
|
||||||
|
_mountingCorrections = 0;
|
||||||
|
_correctedInstances = 0;
|
||||||
|
innerRefWidth = 0;
|
||||||
|
static defaultProps = {
|
||||||
|
innerTagName: 'div',
|
||||||
|
itemData: undefined,
|
||||||
|
outerTagName: 'div',
|
||||||
|
overscanCountForward: 30,
|
||||||
|
overscanCountBackward: 10,
|
||||||
|
};
|
||||||
|
|
||||||
|
state: DynamicSizeListState = {
|
||||||
|
scrollDirection: 'backward',
|
||||||
|
scrollOffset:
|
||||||
|
typeof this.props.initialScrollOffset === 'number'
|
||||||
|
? this.props.initialScrollOffset
|
||||||
|
: 0,
|
||||||
|
scrollUpdateWasRequested: false,
|
||||||
|
scrollDelta: 0,
|
||||||
|
scrollHeight: 0,
|
||||||
|
localOlderPostsToRender: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
// Always use explicit constructor for React components.
|
||||||
|
// It produces less code after transpilation. (#26)
|
||||||
|
// eslint-disable-next-line no-useless-constructor
|
||||||
|
constructor(props: any) {
|
||||||
|
super(props);
|
||||||
|
}
|
||||||
|
|
||||||
|
static getDerivedStateFromProps(props: any, state: any) {
|
||||||
|
validateProps(props);
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollBy = (scrollOffset: number, scrollBy?: number) => () => {
|
||||||
|
const element = this._outerRef;
|
||||||
|
if (typeof element.scrollBy === 'function' && scrollBy) {
|
||||||
|
element.scrollBy(0, scrollBy);
|
||||||
|
} else if (scrollOffset) {
|
||||||
|
element.scrollTop = scrollOffset;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._scrollCorrectionInProgress = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
scrollTo(
|
||||||
|
scrollOffset: any,
|
||||||
|
scrollByValue?: number,
|
||||||
|
useAnimationFrame = false
|
||||||
|
) {
|
||||||
|
this._scrollCorrectionInProgress = true;
|
||||||
|
|
||||||
|
this.setState((prevState) => ({
|
||||||
|
scrollOffset,
|
||||||
|
scrollUpdateWasRequested: true,
|
||||||
|
}));
|
||||||
|
|
||||||
|
this.setState(
|
||||||
|
(prevState) => ({
|
||||||
|
scrollDirection:
|
||||||
|
prevState.scrollOffset >= scrollOffset ? 'backward' : 'forward',
|
||||||
|
scrollOffset: scrollOffset,
|
||||||
|
scrollUpdateWasRequested: true,
|
||||||
|
}),
|
||||||
|
() => {
|
||||||
|
if (useAnimationFrame) {
|
||||||
|
this._scrollByCorrection = window.requestAnimationFrame(
|
||||||
|
this.scrollBy(this.state.scrollOffset, scrollByValue)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
this.scrollBy(this.state.scrollOffset, scrollByValue)();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
|
||||||
|
this.forceUpdate();
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollToItem(index: number, align = 'auto', offset = 0) {
|
||||||
|
const { scrollOffset } = this.state;
|
||||||
|
|
||||||
|
//Ideally the below scrollTo works fine but firefox has 6px issue and stays 6px from bottom when corrected
|
||||||
|
//so manually keeping scroll position bottom for now
|
||||||
|
const element = this._outerRef;
|
||||||
|
if (index === 0 && align === 'end') {
|
||||||
|
this.scrollTo(element.scrollHeight - this.props.height);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const offsetOfItem = getOffsetForIndexAndAlignment(
|
||||||
|
this.props,
|
||||||
|
index,
|
||||||
|
align,
|
||||||
|
scrollOffset,
|
||||||
|
this._listMetaData
|
||||||
|
);
|
||||||
|
if (!offsetOfItem) {
|
||||||
|
const itemSize = getItemSize(this.props, index, this._listMetaData);
|
||||||
|
if (!itemSize && this.props.scrollToFailed) {
|
||||||
|
if (this.state.scrolledToInitIndex) {
|
||||||
|
this.props.scrollToFailed(index);
|
||||||
|
} else {
|
||||||
|
console.warn(
|
||||||
|
'Failed to do initial scroll correction',
|
||||||
|
this.props.initRangeToRender,
|
||||||
|
index
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.scrollTo(offsetOfItem + offset);
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
const { initialScrollOffset } = this.props;
|
||||||
|
|
||||||
|
if (typeof initialScrollOffset === 'number' && this._outerRef !== null) {
|
||||||
|
const element = this._outerRef;
|
||||||
|
element.scrollTop = initialScrollOffset;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._commitHook();
|
||||||
|
}
|
||||||
|
|
||||||
|
getSnapshotBeforeUpdate(
|
||||||
|
prevProps: DynamicSizeListProps,
|
||||||
|
prevState: DynamicSizeListState
|
||||||
|
) {
|
||||||
|
if (
|
||||||
|
prevState.localOlderPostsToRender[0] !==
|
||||||
|
this.state.localOlderPostsToRender[0] ||
|
||||||
|
prevState.localOlderPostsToRender[1] !==
|
||||||
|
this.state.localOlderPostsToRender[1]
|
||||||
|
) {
|
||||||
|
const element = this._outerRef;
|
||||||
|
const previousScrollTop = element.scrollTop;
|
||||||
|
const previousScrollHeight = element.scrollHeight;
|
||||||
|
return {
|
||||||
|
previousScrollTop,
|
||||||
|
previousScrollHeight,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(
|
||||||
|
prevProps: DynamicSizeListProps,
|
||||||
|
prevState: DynamicSizeListState,
|
||||||
|
snapshot: any
|
||||||
|
) {
|
||||||
|
if (this.state.scrolledToInitIndex) {
|
||||||
|
const {
|
||||||
|
scrollDirection,
|
||||||
|
scrollOffset,
|
||||||
|
scrollUpdateWasRequested,
|
||||||
|
scrollHeight,
|
||||||
|
} = this.state;
|
||||||
|
|
||||||
|
const {
|
||||||
|
scrollDirection: prevScrollDirection,
|
||||||
|
scrollOffset: prevScrollOffset,
|
||||||
|
scrollUpdateWasRequested: prevScrollUpdateWasRequested,
|
||||||
|
scrollHeight: previousScrollHeight,
|
||||||
|
} = prevState;
|
||||||
|
|
||||||
|
if (
|
||||||
|
scrollDirection !== prevScrollDirection ||
|
||||||
|
scrollOffset !== prevScrollOffset ||
|
||||||
|
scrollUpdateWasRequested !== prevScrollUpdateWasRequested ||
|
||||||
|
scrollHeight !== previousScrollHeight
|
||||||
|
) {
|
||||||
|
this._callPropsCallbacks();
|
||||||
|
}
|
||||||
|
if (!prevState.scrolledToInitIndex) {
|
||||||
|
this._keepScrollPosition = false;
|
||||||
|
this._keepScrollToBottom = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this._commitHook();
|
||||||
|
if (prevProps.itemData !== this.props.itemData) {
|
||||||
|
this._dataChange();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevProps.height !== this.props.height) {
|
||||||
|
this._heightChange(prevProps.height, prevState.scrollOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevState.scrolledToInitIndex !== this.state.scrolledToInitIndex) {
|
||||||
|
this._dataChange(); // though this is not data change we are checking for first load change
|
||||||
|
}
|
||||||
|
|
||||||
|
if (prevProps.width !== this.props.width && !!this.props.innerRef) {
|
||||||
|
this.innerRefWidth = this.props.innerRef.current.clientWidth;
|
||||||
|
this._widthChange(prevProps.height, prevState.scrollOffset);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
prevState.localOlderPostsToRender[0] !==
|
||||||
|
this.state.localOlderPostsToRender[0] ||
|
||||||
|
prevState.localOlderPostsToRender[1] !==
|
||||||
|
this.state.localOlderPostsToRender[1]
|
||||||
|
) {
|
||||||
|
const postlistScrollHeight = this._outerRef.scrollHeight;
|
||||||
|
|
||||||
|
const scrollValue =
|
||||||
|
snapshot.previousScrollTop +
|
||||||
|
(postlistScrollHeight - snapshot.previousScrollHeight);
|
||||||
|
|
||||||
|
this.scrollTo(
|
||||||
|
scrollValue,
|
||||||
|
scrollValue - snapshot.previousScrollTop,
|
||||||
|
true
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this._scrollByCorrection) {
|
||||||
|
window.cancelAnimationFrame(this._scrollByCorrection);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
render() {
|
||||||
|
const {
|
||||||
|
className,
|
||||||
|
innerRef,
|
||||||
|
innerTagName,
|
||||||
|
outerTagName,
|
||||||
|
style,
|
||||||
|
innerListStyle,
|
||||||
|
} = this.props;
|
||||||
|
|
||||||
|
const onScroll = this._onScrollVertical;
|
||||||
|
|
||||||
|
const items = this._renderItems();
|
||||||
|
|
||||||
|
return createElement(
|
||||||
|
outerTagName!,
|
||||||
|
{
|
||||||
|
className,
|
||||||
|
onScroll,
|
||||||
|
ref: this._outerRefSetter,
|
||||||
|
style: {
|
||||||
|
WebkitOverflowScrolling: 'touch',
|
||||||
|
overflowY: 'auto',
|
||||||
|
overflowAnchor: 'none',
|
||||||
|
willChange: 'transform',
|
||||||
|
width: '100%',
|
||||||
|
...style,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
createElement(innerTagName!, {
|
||||||
|
children: items,
|
||||||
|
ref: innerRef,
|
||||||
|
style: innerListStyle,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
_callOnItemsRendered = memoizeOne(
|
||||||
|
(
|
||||||
|
overscanStartIndex: number,
|
||||||
|
overscanStopIndex: number,
|
||||||
|
visibleStartIndex: number,
|
||||||
|
visibleStopIndex: number
|
||||||
|
) =>
|
||||||
|
this.props.onItemsRendered({
|
||||||
|
overscanStartIndex,
|
||||||
|
overscanStopIndex,
|
||||||
|
visibleStartIndex,
|
||||||
|
visibleStopIndex,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
_callOnScroll = memoizeOne(
|
||||||
|
(
|
||||||
|
scrollDirection: ScrollDirection,
|
||||||
|
scrollOffset: number,
|
||||||
|
scrollUpdateWasRequested: boolean,
|
||||||
|
scrollHeight: number,
|
||||||
|
clientHeight: number
|
||||||
|
) =>
|
||||||
|
this.props.onScroll({
|
||||||
|
scrollDirection,
|
||||||
|
scrollOffset,
|
||||||
|
scrollUpdateWasRequested,
|
||||||
|
scrollHeight,
|
||||||
|
clientHeight,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
|
||||||
|
_callPropsCallbacks() {
|
||||||
|
const { itemData, height } = this.props;
|
||||||
|
const {
|
||||||
|
scrollDirection,
|
||||||
|
scrollOffset,
|
||||||
|
scrollUpdateWasRequested,
|
||||||
|
scrollHeight,
|
||||||
|
} = this.state;
|
||||||
|
const itemCount = itemData.length;
|
||||||
|
|
||||||
|
if (typeof this.props.onItemsRendered === 'function') {
|
||||||
|
if (itemCount > 0) {
|
||||||
|
const [
|
||||||
|
overscanStartIndex,
|
||||||
|
overscanStopIndex,
|
||||||
|
visibleStartIndex,
|
||||||
|
visibleStopIndex,
|
||||||
|
] = this._getRangeToRender();
|
||||||
|
|
||||||
|
this._callOnItemsRendered(
|
||||||
|
overscanStartIndex,
|
||||||
|
overscanStopIndex,
|
||||||
|
visibleStartIndex,
|
||||||
|
visibleStopIndex
|
||||||
|
);
|
||||||
|
|
||||||
|
if (
|
||||||
|
scrollDirection === 'backward' &&
|
||||||
|
scrollOffset < 1000 &&
|
||||||
|
overscanStopIndex !== itemCount - 1
|
||||||
|
) {
|
||||||
|
const sizeOfNextElement = getItemSize(
|
||||||
|
this.props,
|
||||||
|
overscanStopIndex + 1,
|
||||||
|
this._listMetaData
|
||||||
|
).size;
|
||||||
|
if (!sizeOfNextElement && this.state.scrolledToInitIndex) {
|
||||||
|
this.setState((prevState) => {
|
||||||
|
if (
|
||||||
|
prevState.localOlderPostsToRender[0] !==
|
||||||
|
overscanStopIndex + 1
|
||||||
|
) {
|
||||||
|
return {
|
||||||
|
localOlderPostsToRender: [
|
||||||
|
overscanStopIndex + 1,
|
||||||
|
overscanStopIndex + 50,
|
||||||
|
],
|
||||||
|
};
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof this.props.onScroll === 'function') {
|
||||||
|
this._callOnScroll(
|
||||||
|
scrollDirection,
|
||||||
|
scrollOffset,
|
||||||
|
scrollUpdateWasRequested,
|
||||||
|
scrollHeight,
|
||||||
|
height
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// This method is called after mount and update.
|
||||||
|
// List implementations can override this method to be notified.
|
||||||
|
_commitHook = () => {
|
||||||
|
if (
|
||||||
|
!this.state.scrolledToInitIndex &&
|
||||||
|
Object.keys(this._listMetaData.itemOffsetMap).length
|
||||||
|
) {
|
||||||
|
const { index, position, offset } = this.props.initScrollToIndex();
|
||||||
|
this.scrollToItem(index, position, offset);
|
||||||
|
this.setState({
|
||||||
|
scrolledToInitIndex: true,
|
||||||
|
});
|
||||||
|
|
||||||
|
if (index === 0) {
|
||||||
|
this._keepScrollToBottom = true;
|
||||||
|
} else {
|
||||||
|
this._keepScrollPosition = true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// This method is called when data changes
|
||||||
|
// List implementations can override this method to be notified.
|
||||||
|
_dataChange = () => {
|
||||||
|
if (this._listMetaData.totalMeasuredSize < this.props.height) {
|
||||||
|
this.props.canLoadMorePosts();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_heightChange = (prevHeight: number, prevOffset: number) => {
|
||||||
|
if (prevOffset + prevHeight >= this._listMetaData.totalMeasuredSize - 10) {
|
||||||
|
this.scrollToItem(0, 'end');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_widthChange = (prevHeight: number, prevOffset: number) => {
|
||||||
|
if (prevOffset + prevHeight >= this._listMetaData.totalMeasuredSize - 10) {
|
||||||
|
this.scrollToItem(0, 'end');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
// Lazily create and cache item styles while scrolling,
|
||||||
|
// So that pure component sCU will prevent re-renders.
|
||||||
|
// We maintain this cache, and pass a style prop rather than index,
|
||||||
|
// So that List can clear cached styles and force item re-render if necessary.
|
||||||
|
_getItemStyle = (index: number) => {
|
||||||
|
const { itemData } = this.props;
|
||||||
|
|
||||||
|
const itemStyleCache = this._itemStyleCache;
|
||||||
|
|
||||||
|
let style;
|
||||||
|
if (itemStyleCache.hasOwnProperty(itemData[index])) {
|
||||||
|
style = itemStyleCache[itemData[index]];
|
||||||
|
} else {
|
||||||
|
itemStyleCache[itemData[index]] = style = {
|
||||||
|
left: 0,
|
||||||
|
top: getItemOffset(this.props, index, this._listMetaData),
|
||||||
|
height: getItemSize(this.props, index, this._listMetaData),
|
||||||
|
width: '100%',
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
return style;
|
||||||
|
};
|
||||||
|
|
||||||
|
_getRangeToRender(scrollTop = 0): number[] {
|
||||||
|
const { itemData, overscanCountForward, overscanCountBackward } =
|
||||||
|
this.props;
|
||||||
|
const { scrollDirection, scrollOffset } = this.state;
|
||||||
|
const itemCount = itemData.length;
|
||||||
|
|
||||||
|
if (itemCount === 0) {
|
||||||
|
return [0, 0, 0, 0];
|
||||||
|
}
|
||||||
|
const scrollOffsetValue = scrollTop >= 0 ? scrollTop : scrollOffset;
|
||||||
|
const startIndex = getStartIndexForOffset(
|
||||||
|
this.props,
|
||||||
|
scrollOffsetValue,
|
||||||
|
this._listMetaData
|
||||||
|
);
|
||||||
|
const stopIndex = getStopIndexForStartIndex(
|
||||||
|
this.props,
|
||||||
|
startIndex,
|
||||||
|
scrollOffsetValue,
|
||||||
|
this._listMetaData
|
||||||
|
);
|
||||||
|
|
||||||
|
// Overscan by one item in each direction so that tab/focus works.
|
||||||
|
// If there isn't at least one extra item, tab loops back around.
|
||||||
|
const overscanBackward =
|
||||||
|
scrollDirection === 'backward'
|
||||||
|
? overscanCountBackward
|
||||||
|
: Math.max(1, overscanCountForward);
|
||||||
|
|
||||||
|
const overscanForward =
|
||||||
|
scrollDirection === 'forward'
|
||||||
|
? overscanCountBackward
|
||||||
|
: Math.max(1, overscanCountForward);
|
||||||
|
|
||||||
|
const minValue = Math.max(0, stopIndex - overscanBackward);
|
||||||
|
let maxValue = Math.max(
|
||||||
|
0,
|
||||||
|
Math.min(itemCount - 1, startIndex + overscanForward)
|
||||||
|
);
|
||||||
|
|
||||||
|
while (
|
||||||
|
!getItemSize(this.props, maxValue, this._listMetaData) &&
|
||||||
|
maxValue > 0 &&
|
||||||
|
this._listMetaData.totalMeasuredSize > this.props.height
|
||||||
|
) {
|
||||||
|
maxValue--;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
!this.state.scrolledToInitIndex &&
|
||||||
|
this.props.initRangeToRender.length
|
||||||
|
) {
|
||||||
|
return this.props.initRangeToRender;
|
||||||
|
}
|
||||||
|
|
||||||
|
return [minValue, maxValue, startIndex, stopIndex];
|
||||||
|
}
|
||||||
|
|
||||||
|
_correctScroll = () => {
|
||||||
|
const { scrollOffset } = this.state;
|
||||||
|
const element = this._outerRef;
|
||||||
|
if (element) {
|
||||||
|
element.scrollTop = scrollOffset;
|
||||||
|
this._scrollCorrectionInProgress = false;
|
||||||
|
this._correctedInstances = 0;
|
||||||
|
this._mountingCorrections = 0;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_generateOffsetMeasurements = () => {
|
||||||
|
const { itemOffsetMap, itemSizeMap } = this._listMetaData;
|
||||||
|
const { itemData } = this.props;
|
||||||
|
this._listMetaData.totalMeasuredSize = 0;
|
||||||
|
|
||||||
|
for (let i = itemData.length - 1; i >= 0; i--) {
|
||||||
|
const prevOffset = itemOffsetMap[itemData[i + 1]] || 0;
|
||||||
|
|
||||||
|
// In some browsers (e.g. Firefox) fast scrolling may skip rows.
|
||||||
|
// In this case, our assumptions about last measured indices may be incorrect.
|
||||||
|
// Handle this edge case to prevent NaN values from breaking styles.
|
||||||
|
// Slow scrolling back over these skipped rows will adjust their sizes.
|
||||||
|
const prevSize = itemSizeMap[itemData[i + 1]] || 0;
|
||||||
|
|
||||||
|
itemOffsetMap[itemData[i]] = prevOffset + prevSize;
|
||||||
|
this._listMetaData.totalMeasuredSize += itemSizeMap[itemData[i]] || 0;
|
||||||
|
// Reset cached style to clear stale position.
|
||||||
|
delete this._itemStyleCache[itemData[i]];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_handleNewMeasurements = (
|
||||||
|
key: any,
|
||||||
|
newSize: any,
|
||||||
|
forceScrollCorrection: any
|
||||||
|
) => {
|
||||||
|
const { itemSizeMap } = this._listMetaData;
|
||||||
|
const { itemData } = this.props;
|
||||||
|
const index = itemData.findIndex((item) => item === key);
|
||||||
|
// In some browsers (e.g. Firefox) fast scrolling may skip rows.
|
||||||
|
// In this case, our assumptions about last measured indices may be incorrect.
|
||||||
|
// Handle this edge case to prevent NaN values from breaking styles.
|
||||||
|
// Slow scrolling back over these skipped rows will adjust their sizes.
|
||||||
|
const oldSize = itemSizeMap[key] || 0;
|
||||||
|
if (oldSize === newSize) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
itemSizeMap[key] = newSize;
|
||||||
|
|
||||||
|
if (!this.state.scrolledToInitIndex) {
|
||||||
|
this._generateOffsetMeasurements();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const element = this._outerRef;
|
||||||
|
const wasAtBottom =
|
||||||
|
this.props.height + element.scrollTop >=
|
||||||
|
this._listMetaData.totalMeasuredSize - 10;
|
||||||
|
|
||||||
|
if (
|
||||||
|
(wasAtBottom || this._keepScrollToBottom) &&
|
||||||
|
this.props.correctScrollToBottom
|
||||||
|
) {
|
||||||
|
this._generateOffsetMeasurements();
|
||||||
|
this.scrollToItem(0, 'end');
|
||||||
|
this.forceUpdate();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (forceScrollCorrection || this._keepScrollPosition) {
|
||||||
|
const delta = newSize - oldSize;
|
||||||
|
const [, , visibleStartIndex] = this._getRangeToRender(
|
||||||
|
this.state.scrollOffset
|
||||||
|
);
|
||||||
|
this._generateOffsetMeasurements();
|
||||||
|
if (index < visibleStartIndex + 1) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._scrollCorrectionInProgress = true;
|
||||||
|
|
||||||
|
this.setState(
|
||||||
|
(prevState) => {
|
||||||
|
let deltaValue;
|
||||||
|
if (this._mountingCorrections === 0) {
|
||||||
|
deltaValue = delta;
|
||||||
|
} else {
|
||||||
|
deltaValue = prevState.scrollDelta + delta;
|
||||||
|
}
|
||||||
|
this._mountingCorrections++;
|
||||||
|
const newOffset = prevState.scrollOffset + delta;
|
||||||
|
return {
|
||||||
|
scrollOffset: newOffset,
|
||||||
|
scrollDelta: deltaValue,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
() => {
|
||||||
|
// $FlowFixMe Property scrollBy is missing in HTMLDivElement
|
||||||
|
this._correctedInstances++;
|
||||||
|
if (this._mountingCorrections === this._correctedInstances) {
|
||||||
|
this._correctScroll();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this._generateOffsetMeasurements();
|
||||||
|
};
|
||||||
|
|
||||||
|
_onItemRowUnmount = (itemId: string, index: number) => {
|
||||||
|
const { props } = this;
|
||||||
|
if (props.itemData[index] === itemId) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const doesItemExist = props.itemData.includes(itemId);
|
||||||
|
if (!doesItemExist) {
|
||||||
|
delete this._listMetaData.itemSizeMap[itemId];
|
||||||
|
delete this._listMetaData.itemOffsetMap[itemId];
|
||||||
|
const element = this._outerRef;
|
||||||
|
|
||||||
|
const atBottom =
|
||||||
|
element.offsetHeight + element.scrollTop >=
|
||||||
|
this._listMetaData.totalMeasuredSize - 10;
|
||||||
|
this._generateOffsetMeasurements();
|
||||||
|
if (atBottom) {
|
||||||
|
this.scrollToItem(0, 'end');
|
||||||
|
}
|
||||||
|
this.forceUpdate();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
_renderItems = () => {
|
||||||
|
const { children, itemData, loaderId } = this.props;
|
||||||
|
const width = this.innerRefWidth;
|
||||||
|
const [startIndex, stopIndex] = this._getRangeToRender();
|
||||||
|
const itemCount = itemData.length;
|
||||||
|
const items = [];
|
||||||
|
if (itemCount > 0) {
|
||||||
|
for (let index = itemCount - 1; index >= 0; index--) {
|
||||||
|
const { size } = getItemMetadata(this.props, index, this._listMetaData);
|
||||||
|
|
||||||
|
const [
|
||||||
|
localOlderPostsToRenderStartIndex,
|
||||||
|
localOlderPostsToRenderStopIndex,
|
||||||
|
] = this.state.localOlderPostsToRender;
|
||||||
|
|
||||||
|
const isItemInLocalPosts =
|
||||||
|
index >= localOlderPostsToRenderStartIndex &&
|
||||||
|
index < localOlderPostsToRenderStopIndex + 1 &&
|
||||||
|
localOlderPostsToRenderStartIndex === stopIndex + 1;
|
||||||
|
|
||||||
|
const isLoader = itemData[index] === loaderId;
|
||||||
|
const itemId = itemData[index];
|
||||||
|
|
||||||
|
// It's important to read style after fetching item metadata.
|
||||||
|
// getItemMetadata() will clear stale styles.
|
||||||
|
const style = this._getItemStyle(index);
|
||||||
|
if (
|
||||||
|
(index >= startIndex && index < stopIndex + 1) ||
|
||||||
|
isItemInLocalPosts ||
|
||||||
|
isLoader
|
||||||
|
) {
|
||||||
|
const item = createElement(children, {
|
||||||
|
data: itemData,
|
||||||
|
itemId,
|
||||||
|
});
|
||||||
|
|
||||||
|
// Always wrap children in a ItemMeasurer to detect changes in size.
|
||||||
|
items.push(
|
||||||
|
createElement(ItemMeasurer, {
|
||||||
|
handleNewMeasurements: this._handleNewMeasurements,
|
||||||
|
index,
|
||||||
|
item,
|
||||||
|
key: itemId,
|
||||||
|
size,
|
||||||
|
itemId,
|
||||||
|
width,
|
||||||
|
onUnmount: this._onItemRowUnmount,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
items.push(
|
||||||
|
createElement('div', {
|
||||||
|
key: itemId,
|
||||||
|
style,
|
||||||
|
})
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return items;
|
||||||
|
};
|
||||||
|
|
||||||
|
_onScrollVertical = (event: any) => {
|
||||||
|
if (!this.state.scrolledToInitIndex) {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
const { scrollTop, scrollHeight } = event.currentTarget;
|
||||||
|
if (this._scrollCorrectionInProgress) {
|
||||||
|
if (this.state.scrollUpdateWasRequested) {
|
||||||
|
this.setState(() => ({
|
||||||
|
scrollUpdateWasRequested: false,
|
||||||
|
}));
|
||||||
|
}
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (scrollHeight !== this.state.scrollHeight) {
|
||||||
|
this.setState({
|
||||||
|
scrollHeight,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.setState((prevState: DynamicSizeListState) => {
|
||||||
|
if (prevState.scrollOffset === scrollTop) {
|
||||||
|
// Scroll position may have been updated by cDM/cDU,
|
||||||
|
// In which case we don't need to trigger another render,
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
...prevState,
|
||||||
|
scrollDirection:
|
||||||
|
prevState.scrollOffset < scrollTop ? 'forward' : 'backward',
|
||||||
|
scrollOffset: scrollTop,
|
||||||
|
scrollUpdateWasRequested: false,
|
||||||
|
scrollHeight,
|
||||||
|
scrollTop,
|
||||||
|
scrollDelta: 0,
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
_outerRefSetter = (ref: any) => {
|
||||||
|
const { outerRef } = this.props;
|
||||||
|
this.innerRefWidth = this.props.innerRef.current.clientWidth;
|
||||||
|
this._outerRef = ref;
|
||||||
|
|
||||||
|
if (typeof outerRef === 'function') {
|
||||||
|
outerRef(ref);
|
||||||
|
} else if (
|
||||||
|
outerRef != null &&
|
||||||
|
typeof outerRef === 'object' &&
|
||||||
|
outerRef.hasOwnProperty('current')
|
||||||
|
) {
|
||||||
|
outerRef.current = ref;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
// NOTE: I considered further wrapping individual items with a pure ListItem component.
|
||||||
|
// This would avoid ever calling the render function for the same index more than once,
|
||||||
|
// But it would also add the overhead of a lot of components/fibers.
|
||||||
|
// I assume people already do this (render function returning a class component),
|
||||||
|
// So my doing it would just unnecessarily double the wrappers.
|
||||||
|
|
||||||
|
const validateProps = ({ children, itemSize }: any) => {
|
||||||
|
if (process.env.NODE_ENV !== 'production') {
|
||||||
|
if (children == null) {
|
||||||
|
throw Error(
|
||||||
|
'An invalid "children" prop has been specified. ' +
|
||||||
|
'Value should be a React component. ' +
|
||||||
|
`"${children === null ? 'null' : typeof children}" was specified.`
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (itemSize !== undefined) {
|
||||||
|
throw Error('An unexpected "itemSize" prop has been provided.');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
@ -0,0 +1,216 @@
|
|||||||
|
import React, { Component } from 'react';
|
||||||
|
import { findDOMNode } from 'react-dom';
|
||||||
|
|
||||||
|
function isBrowserSafari() {
|
||||||
|
const userAgent = window.navigator.userAgent;
|
||||||
|
return (
|
||||||
|
userAgent.indexOf('Safari') !== -1 && userAgent.indexOf('Chrome') === -1
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
const isSafari = isBrowserSafari();
|
||||||
|
|
||||||
|
const scrollBarWidth = 8;
|
||||||
|
const scrollableContainerStyles: React.CSSProperties = {
|
||||||
|
display: 'inline',
|
||||||
|
width: '0px',
|
||||||
|
height: '0px',
|
||||||
|
zIndex: -1,
|
||||||
|
overflow: 'hidden',
|
||||||
|
margin: '0px',
|
||||||
|
padding: '0px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const scrollableWrapperStyle: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
flex: '0 0 auto',
|
||||||
|
overflow: 'hidden',
|
||||||
|
visibility: 'hidden',
|
||||||
|
zIndex: -1,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
left: '0px',
|
||||||
|
top: '0px',
|
||||||
|
};
|
||||||
|
|
||||||
|
const expandShrinkContainerStyles: React.CSSProperties = {
|
||||||
|
flex: '0 0 auto',
|
||||||
|
overflow: 'hidden',
|
||||||
|
zIndex: -1,
|
||||||
|
visibility: 'hidden',
|
||||||
|
left: `-${scrollBarWidth + 1}px`, //8px(scrollbar width) + 1px
|
||||||
|
bottom: `-${scrollBarWidth}px`, //8px because of scrollbar width
|
||||||
|
right: `-${scrollBarWidth}px`, //8px because of scrollbar width
|
||||||
|
top: `-${scrollBarWidth + 1}px`, //8px(scrollbar width) + 1px
|
||||||
|
};
|
||||||
|
|
||||||
|
const expandShrinkStyles: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
flex: '0 0 auto',
|
||||||
|
visibility: 'hidden',
|
||||||
|
overflow: 'scroll',
|
||||||
|
zIndex: -1,
|
||||||
|
width: '100%',
|
||||||
|
height: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
const shrinkChildStyle: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
height: '200%',
|
||||||
|
width: '200%',
|
||||||
|
};
|
||||||
|
|
||||||
|
//values below need to be changed when scrollbar width changes
|
||||||
|
//TODO: change these to be dynamic
|
||||||
|
|
||||||
|
const shrinkScrollDelta = 2 * scrollBarWidth + 1; // 17 = 2* scrollbar width(8px) + 1px as buffer
|
||||||
|
|
||||||
|
// 27 = 2* scrollbar width(8px) + 1px as buffer + 10px(this value is based of off lib(Link below). Probably not needed but doesnt hurt to leave)
|
||||||
|
//https://github.com/wnr/element-resize-detector/blob/27983e59dce9d8f1296d8f555dc2340840fb0804/src/detection-strategy/scroll.js#L246
|
||||||
|
const expandScrollDelta = shrinkScrollDelta + 10;
|
||||||
|
|
||||||
|
interface ItemMeasurerProps {
|
||||||
|
size: number;
|
||||||
|
handleNewMeasurements: any;
|
||||||
|
itemId: any;
|
||||||
|
item: any;
|
||||||
|
width: number;
|
||||||
|
onUnmount: any;
|
||||||
|
index: any;
|
||||||
|
}
|
||||||
|
|
||||||
|
export class ItemMeasurer extends Component<ItemMeasurerProps> {
|
||||||
|
_node: Element | Text | null = null;
|
||||||
|
_resizeSensorExpand = React.createRef<any>();
|
||||||
|
_resizeSensorShrink = React.createRef<any>();
|
||||||
|
_positionScrollbarsRef: number | null = null;
|
||||||
|
_measureItemAnimFrame: number | null = null;
|
||||||
|
|
||||||
|
componentDidMount() {
|
||||||
|
// eslint-disable-next-line react/no-find-dom-node
|
||||||
|
this._node = findDOMNode(this);
|
||||||
|
// Force sync measure for the initial mount.
|
||||||
|
// This is necessary to support the DynamicSizeList layout logic.
|
||||||
|
if (isSafari && this.props.size) {
|
||||||
|
this._measureItemAnimFrame = window.requestAnimationFrame(() => {
|
||||||
|
this._measureItem(false);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this._measureItem(false);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.props.size) {
|
||||||
|
// Don't wait for positioning scrollbars when we have size
|
||||||
|
// This is needed triggering an event for remounting a post
|
||||||
|
this.positionScrollBars();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
componentDidUpdate(prevProps: ItemMeasurerProps) {
|
||||||
|
if (
|
||||||
|
(prevProps.size === 0 && this.props.size !== 0) ||
|
||||||
|
prevProps.size !== this.props.size
|
||||||
|
) {
|
||||||
|
this.positionScrollBars();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
positionScrollBars = (height = this.props.size, width = this.props.width) => {
|
||||||
|
//we are position these hiiden div scroll bars to the end so they can emit
|
||||||
|
//scroll event when height in the div changes
|
||||||
|
//Heavily inspired from https://github.com/marcj/css-element-queries/blob/master/src/ResizeSensor.js
|
||||||
|
//and https://github.com/wnr/element-resize-detector/blob/master/src/detection-strategy/scroll.js
|
||||||
|
//For more info http://www.backalleycoder.com/2013/03/18/cross-browser-event-based-element-resize-detection/#comment-244
|
||||||
|
if (this._positionScrollbarsRef) {
|
||||||
|
window.cancelAnimationFrame(this._positionScrollbarsRef);
|
||||||
|
}
|
||||||
|
this._positionScrollbarsRef = window.requestAnimationFrame(() => {
|
||||||
|
this._resizeSensorExpand.current.scrollTop = height + expandScrollDelta;
|
||||||
|
this._resizeSensorShrink.current.scrollTop =
|
||||||
|
2 * height + shrinkScrollDelta;
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
componentWillUnmount() {
|
||||||
|
if (this._positionScrollbarsRef) {
|
||||||
|
window.cancelAnimationFrame(this._positionScrollbarsRef);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this._measureItemAnimFrame) {
|
||||||
|
window.cancelAnimationFrame(this._measureItemAnimFrame);
|
||||||
|
}
|
||||||
|
|
||||||
|
const { onUnmount, itemId, index } = this.props;
|
||||||
|
if (onUnmount) {
|
||||||
|
onUnmount(itemId, index);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
scrollingDiv = (event: any) => {
|
||||||
|
if (event.target.offsetHeight !== this.props.size) {
|
||||||
|
this._measureItem(event.target.offsetWidth !== this.props.width);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
renderItems = () => {
|
||||||
|
const item = this.props.item;
|
||||||
|
|
||||||
|
const expandChildStyle: React.CSSProperties = {
|
||||||
|
position: 'absolute',
|
||||||
|
left: '0',
|
||||||
|
top: '0',
|
||||||
|
height: `${this.props.size + expandScrollDelta}px`,
|
||||||
|
width: '100%',
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderItem = (
|
||||||
|
<div style={{ position: 'relative' }}>
|
||||||
|
{item}
|
||||||
|
<div style={scrollableContainerStyles}>
|
||||||
|
<div dir="ltr" style={scrollableWrapperStyle}>
|
||||||
|
<div style={expandShrinkContainerStyles}>
|
||||||
|
<div
|
||||||
|
style={expandShrinkStyles}
|
||||||
|
ref={this._resizeSensorExpand}
|
||||||
|
onScroll={this.scrollingDiv}
|
||||||
|
>
|
||||||
|
<div style={expandChildStyle} />
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style={expandShrinkStyles}
|
||||||
|
ref={this._resizeSensorShrink}
|
||||||
|
onScroll={this.scrollingDiv}
|
||||||
|
>
|
||||||
|
<div style={shrinkChildStyle} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
return renderItem;
|
||||||
|
};
|
||||||
|
|
||||||
|
render() {
|
||||||
|
return this.renderItems();
|
||||||
|
}
|
||||||
|
|
||||||
|
_measureItem = (forceScrollCorrection: any) => {
|
||||||
|
const { handleNewMeasurements, size: oldSize, itemId } = this.props;
|
||||||
|
|
||||||
|
const node = this._node;
|
||||||
|
|
||||||
|
if (
|
||||||
|
node &&
|
||||||
|
node.ownerDocument &&
|
||||||
|
node.ownerDocument.defaultView &&
|
||||||
|
node instanceof node.ownerDocument.defaultView.HTMLElement
|
||||||
|
) {
|
||||||
|
const newSize = Math.ceil(node.offsetHeight);
|
||||||
|
|
||||||
|
if (oldSize !== newSize) {
|
||||||
|
handleNewMeasurements(itemId, newSize, forceScrollCorrection);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1 @@
|
|||||||
|
Fork from https://github.com/mattermost/dynamic-virtualized-list
|
||||||
Loading…
Reference in New Issue