react-simple-infinite-scroll-patched/es6/index.js

A (patched) brutally simple React infinite scroll component

import * as tslib_1 from "tslib";
import * as React from 'react';
var throttle = require('lodash.throttle');
var InfiniteScroll = /** @class */ (function (_super) {
    tslib_1.__extends(InfiniteScroll, _super);
    function InfiniteScroll() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.checkWindowScroll = function () {
            if (_this.props.isLoading) {
                return;
            }
            if (_this.props.hasMore &&
                _this.sentinel.getBoundingClientRect().top - window.innerHeight <
                    _this.props.threshold) {
                _this.props.onLoadMore();
            }
        };
        return _this;
    }
    InfiniteScroll.prototype.componentDidMount = function () {
        this.scrollHandler = throttle(this.checkWindowScroll, this.props.throttle);
        this.resizeHandler = throttle(this.checkWindowScroll, this.props.throttle);
        window.addEventListener('scroll', this.scrollHandler);
        window.addEventListener('resize', this.resizeHandler);
    };
    InfiniteScroll.prototype.componentWillUnmount = function () {
        window.removeEventListener('scroll', this.scrollHandler);
        window.removeEventListener('resize', this.resizeHandler);
    };
    InfiniteScroll.prototype.componentDidUpdate = function () {
        // This fixes edge case where initial content is not enough to enable scrolling on a large screen.
        this.checkWindowScroll();
    };
    InfiniteScroll.prototype.render = function () {
        var _this = this;
        var sentinel = React.createElement("div", { ref: function (i) { return _this.sentinel = i; } });
        if (this.props.render) {
            return this.props.render({
                sentinel: sentinel,
                children: this.props.children
            });
        }
        if (this.props.component) {
            var Container = this.props.component;
            return (React.createElement(Container, { sentinel: sentinel }, this.props.children));
        }
        return (React.createElement("div", null,
            this.props.children,
            sentinel));
    };
    InfiniteScroll.defaultProps = {
        threshold: 100,
        throttle: 64,
    };
    return InfiniteScroll;
}(React.Component));
export { InfiniteScroll };
export default React.createFactory(InfiniteScroll);