Skip to content
Merged
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
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "react-virtual-list",
"version": "2.0.0",
"version": "2.1.0",
"description": "Super simple virtualized list React higher-order component",
"main": "dist/VirtualList.js",
"directories": {
Expand Down
23 changes: 6 additions & 17 deletions src/VirtualList.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import React, { PureComponent, PropTypes } from 'react';
import ReactDOM from 'react-dom';

import getVisibleItemBounds from './utils/getVisibleItemBounds';
import throttleWithRAF from './utils/throttleWithRAF';

const VirtualList = (options) => (InnerComponent) => {
return class vlist extends PureComponent {
Expand Down Expand Up @@ -40,19 +41,7 @@ const VirtualList = (options) => (InnerComponent) => {

// if requestAnimationFrame is available, use it to throttle refreshState
if (window && 'requestAnimationFrame' in window) {
const refreshState = this.refreshState;

this.refreshState = () => {
if (this.isRefreshingState) return;

this.isRefreshingState = true;

window.requestAnimationFrame(() => {
refreshState();

this.isRefreshingState = false;
});
};
this.refreshState = throttleWithRAF(this.refreshState);
}
};

Expand All @@ -64,13 +53,13 @@ const VirtualList = (options) => (InnerComponent) => {
this.setState(state);
}
}

refreshState() {
const { itemHeight, items, itemBuffer } = this.props;

this.setStateIfNeeded(this.domNode, this.options.container, items, itemHeight, itemBuffer);
};

componentDidMount() {
// cache the DOM node
this.domNode = ReactDOM.findDOMNode(this);
Expand All @@ -82,7 +71,7 @@ const VirtualList = (options) => (InnerComponent) => {
this.options.container.addEventListener('scroll', this.refreshState);
this.options.container.addEventListener('resize', this.refreshState);
};

componentWillUnmount() {
// remove events
this.options.container.removeEventListener('scroll', this.refreshState);
Expand All @@ -95,7 +84,7 @@ const VirtualList = (options) => (InnerComponent) => {

this.setStateIfNeeded(this.domNode, this.options.container, items, itemHeight, itemBuffer);
};

render() {
const { firstItemIndex, lastItemIndex } = this.state;
const { items, itemHeight } = this.props;
Expand Down
15 changes: 15 additions & 0 deletions src/utils/throttleWithRAF.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
export default (fn) => {
let running = false;

return () => {
if (running) return;

running = true;

window.requestAnimationFrame(() => {
fn.apply(this, arguments);

running = false;
});
};
};