Skip to content
Closed
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,7 @@ render(
| estimatedItemSize | Number | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
| onItemsRendered | Function | | Callback invoked with information about the slice of rows/columns that were just rendered. It has the following signature: `({startIndex: number, stopIndex: number})`. |
| onScroll | Function | | Callback invoked whenever the scroll offset changes within the inner scrollable region. It has the following signature: `(scrollTop: number, event: React.UIEvent<HTMLDivElement>)`. |
| renderWrapper | Function | | Responsible for rendering the wrapper given `outerProps: any, ref: (node: HTMLElement) => void, innerStyle: React.CSSProperties , items: React.ReactNode[]`.|

*\* Width may only be a string when `scrollDirection` is `'vertical'`. Similarly, Height may only be a string if `scrollDirection` is `'horizontal'`*

Expand Down
35 changes: 24 additions & 11 deletions src/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -50,8 +50,8 @@ interface StyleCache {
}

export interface ItemInfo {
index: number,
style: ItemStyle,
index: number,
style: ItemStyle,
}

export interface RenderedRows {
Expand All @@ -73,18 +73,30 @@ export interface Props {
style?: any,
width?: number | string,
onItemsRendered?({startIndex, stopIndex}: RenderedRows): void,
onScroll?(offset: number, event: React.UIEvent<HTMLDivElement>): void,
onScroll?(offset: number, event: React.UIEvent<HTMLElement>): void,
renderItem(itemInfo: ItemInfo): React.ReactNode,
renderWrapper?(outerProps: any, ref: any, innerStyle: any, items: React.ReactNode[]): React.ReactElement<any>,
}

export interface State {
offset: number,
scrollChangeReason: SCROLL_CHANGE_REASON,
}

function defaultRenderWrapper(outerProps: any, ref: (node: HTMLElement) => void, innerStyle: React.CSSProperties , items: React.ReactNode[]) {
return (
<div ref={ref} {...outerProps}>
<div style={innerStyle}>
{items}
</div>
</div>);
}


export default class VirtualList extends React.PureComponent<Props, State> {
static defaultProps = {
overscanCount: 3,
renderWrapper: defaultRenderWrapper,
scrollDirection: DIRECTION_VERTICAL,
width: '100%',
};
Expand All @@ -97,6 +109,7 @@ export default class VirtualList extends React.PureComponent<Props, State> {
onItemsRendered: PropTypes.func,
overscanCount: PropTypes.number,
renderItem: PropTypes.func.isRequired,
renderWrapper: PropTypes.func,
scrollOffset: PropTypes.number,
scrollToIndex: PropTypes.number,
scrollToAlignment: PropTypes.oneOf([ALIGN_AUTO, ALIGN_START, ALIGN_CENTER, ALIGN_END]),
Expand Down Expand Up @@ -191,7 +204,7 @@ export default class VirtualList extends React.PureComponent<Props, State> {
}
}

handleScroll = (e: React.UIEvent<HTMLDivElement>) => {
handleScroll = (e: React.UIEvent<HTMLElement>) => {
const {onScroll} = this.props;
const offset = this.getNodeOffset();

Expand Down Expand Up @@ -273,6 +286,7 @@ export default class VirtualList extends React.PureComponent<Props, State> {
height,
overscanCount = 3,
renderItem,
renderWrapper = defaultRenderWrapper,
itemCount,
itemSize,
onItemsRendered,
Expand Down Expand Up @@ -309,16 +323,15 @@ export default class VirtualList extends React.PureComponent<Props, State> {
}
}

return (
<div ref={this.getRef} {...props} onScroll={this.handleScroll} style={{...STYLE_WRAPPER, ...style, height, width}}>
<div style={{...STYLE_INNER, [sizeProp[scrollDirection]]: this.sizeAndPositionManager.getTotalSize()}}>
{items}
</div>
</div>
return renderWrapper(
{ ...props, onScroll: this.handleScroll, style: { ...STYLE_WRAPPER, ...style, height, width } },
this.getRef,
{ ...STYLE_INNER, [sizeProp[scrollDirection]]: this.sizeAndPositionManager.getTotalSize() },
items,
);
}

private getRef = (node: HTMLDivElement): void => {
private getRef = (node: HTMLElement): void => {
this.rootNode = node;
}
}