redux-infinite-scroll
Version:
React infinite scroll component designed for a Redux data-flow.
1 lines • 5.21 kB
JavaScript
!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("React"),require("ReactDOM")):"function"==typeof define&&define.amd?define(["React","ReactDOM"],t):"object"==typeof exports?exports.ReduxInfiniteScroll=t(require("React"),require("ReactDOM")):e.ReduxInfiniteScroll=t(e.React,e.ReactDOM)}(this,function(e,t){return function(e){function t(r){if(o[r])return o[r].exports;var n=o[r]={exports:{},id:r,loaded:!1};return e[r].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var o={};return t.m=e,t.c=o,t.p="",t(0)}([function(e,t,o){e.exports=o(1)},function(e,t,o){"use strict";function r(e){return e&&e.__esModule?e:{"default":e}}function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function i(e,t){if(!e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!t||"object"!=typeof t&&"function"!=typeof t?e:t}function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Super expression must either be null or a function, not "+typeof t);e.prototype=Object.create(t&&t.prototype,{constructor:{value:e,enumerable:!1,writable:!0,configurable:!0}}),t&&(Object.setPrototypeOf?Object.setPrototypeOf(e,t):e.__proto__=t)}Object.defineProperty(t,"__esModule",{value:!0});var l=function(){function e(e,t){for(var o=0;o<t.length;o++){var r=t[o];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(e,r.key,r)}}return function(t,o,r){return o&&e(t.prototype,o),r&&e(t,r),t}}(),a=o(3),p=r(a),u=o(4),c=r(u),d=o(2),f=function(e){function t(e){n(this,t);var o=i(this,Object.getPrototypeOf(t).call(this,e));return o.scrollFunction=o.scrollListener.bind(o),o}return s(t,e),l(t,[{key:"componentDidMount",value:function(){this.attachScrollListener()}},{key:"componentDidUpdate",value:function(){this.attachScrollListener()}},{key:"_findElement",value:function(){return this.props.elementIsScrollable?c["default"].findDOMNode(this):window}},{key:"attachScrollListener",value:function(){if(this.props.hasMore&&!this.props.loadingMore){var e=this._findElement();e.addEventListener("scroll",this.scrollFunction,!0),e.addEventListener("resize",this.scrollFunction,!0),this.scrollListener()}}},{key:"_elScrollListener",value:function(){var e=c["default"].findDOMNode(this),t=e.scrollTop,o=e.scrollHeight,r=e.offsetHeight,n=t+r;return o-n}},{key:"_windowScrollListener",value:function(){var e=c["default"].findDOMNode(this),t=void 0!==window.pageYOffset?window.pageYOffset:(document.documentElement||document.body.parentNode||document.body).scrollTop,o=(0,d.topPosition)(e)+e.offsetHeight,r=o-t-window.innerHeight;return r}},{key:"scrollListener",value:function(){if(!(this._totalItemsSize()<=0)){var e=this.props.elementIsScrollable?this._elScrollListener():this._windowScrollListener();e<Number(this.props.threshold)&&(this.detachScrollListener(),this.props.loadMore())}}},{key:"detachScrollListener",value:function(){var e=this._findElement();e.removeEventListener("scroll",this.scrollFunction,!0),e.removeEventListener("resize",this.scrollFunction,!0)}},{key:"_renderOptions",value:function(){var e=this.props.children.concat(this.props.items);return e}},{key:"_totalItemsSize",value:function(){var e=void 0;return e+=this.props.children.size?this.props.children.size:this.props.children.length,e+=this.props.items.size?this.props.items.size:this.props.items.length}},{key:"componentWillUnmount",value:function(){this.detachScrollListener()}},{key:"renderLoader",value:function(){return this.props.loadingMore&&this.props.showLoader?this.props.loader:void 0}},{key:"_assignHolderClass",value:function(){var e=void 0;return e="function"==typeof this.props.className?this.props.className():this.props.className,"redux-infinite-scroll "+e}},{key:"render",value:function(){var e=this.props.holderType;return p["default"].createElement(e,{className:this._assignHolderClass(),style:{height:this.props.containerHeight}},this._renderOptions(),this.renderLoader())}}]),t}(p["default"].Component);t["default"]=f,f.propTypes={elementIsScrollable:p["default"].PropTypes.bool,containerHeight:p["default"].PropTypes.oneOfType([p["default"].PropTypes.number,p["default"].PropTypes.string]),threshold:p["default"].PropTypes.number,hasMore:p["default"].PropTypes.bool,loadingMore:p["default"].PropTypes.bool,loader:p["default"].PropTypes.any,showLoader:p["default"].PropTypes.bool,loadMore:p["default"].PropTypes.func.isRequired,items:p["default"].PropTypes.oneOfType([p["default"].PropTypes.array]),children:p["default"].PropTypes.oneOfType([p["default"].PropTypes.array]),holderType:p["default"].PropTypes.string,className:p["default"].PropTypes.oneOfType([p["default"].PropTypes.string,p["default"].PropTypes.func])},f.defaultProps={className:"",elementIsScrollable:!0,containerHeight:"100%",threshold:100,hasMore:!0,loadingMore:!1,loader:p["default"].createElement("div",{style:{textAlign:"center"}},"Loading..."),showLoader:!0,holderType:"div",children:[],items:[]}},function(e,t){"use strict";function o(e){return e?e.offsetTop+o(e.offsetParent):0}Object.defineProperty(t,"__esModule",{value:!0}),t.topPosition=o},function(t,o){t.exports=e},function(e,o){e.exports=t}])});