UNPKG

react-infinite

Version:

A browser-ready efficient scrolling container based on UITableView

1 lines 18.9 kB
!function(e){if("object"==typeof exports&&"undefined"!=typeof module)module.exports=e();else if("function"==typeof define&&define.amd)define([],e);else{var t;t="undefined"!=typeof window?window:"undefined"!=typeof global?global:"undefined"!=typeof self?self:this,t.Infinite=e()}}(function(){return function e(t,i,n){function o(s,l){if(!i[s]){if(!t[s]){var a="function"==typeof require&&require;if(!l&&a)return a(s,!0);if(r)return r(s,!0);var c=new Error("Cannot find module '"+s+"'");throw c.code="MODULE_NOT_FOUND",c}var u=i[s]={exports:{}};t[s][0].call(u.exports,function(e){var i=t[s][1][e];return o(i?i:e)},u,u.exports,e,t,i,n)}return i[s].exports}for(var r="function"==typeof require&&require,s=0;s<n.length;s++)o(n[s]);return o}({1:[function(e,t,i){(function(i){"use strict";function n(e,t){var i={};for(var n in e)t.indexOf(n)>=0||Object.prototype.hasOwnProperty.call(e,n)&&(i[n]=e[n]);return i}var o=i.React||e("react"),r=i.ReactDOM||e("react-dom");e("./utils/establish-polyfills");var s=e("./utils/scaleEnum"),l=e("./utils/infiniteHelpers"),a=e("lodash.isfinite"),c=e("./utils/types").preloadType,u=u=e("./utils/checkProps"),p=o.createClass({displayName:"Infinite",propTypes:{children:o.PropTypes.any,handleScroll:o.PropTypes.func,preloadBatchSize:c,preloadAdditionalHeight:c,elementHeight:o.PropTypes.oneOfType([o.PropTypes.number,o.PropTypes.arrayOf(o.PropTypes.number)]).isRequired,containerHeight:o.PropTypes.number,useWindowAsScrollContainer:o.PropTypes.bool,displayBottomUpwards:o.PropTypes.bool.isRequired,infiniteLoadBeginEdgeOffset:o.PropTypes.number,onInfiniteLoad:o.PropTypes.func,loadingSpinnerDelegate:o.PropTypes.node,isInfiniteLoading:o.PropTypes.bool,timeScrollStateLastsForAfterUserScrolls:o.PropTypes.number,className:o.PropTypes.string},statics:{containerHeightScaleFactor:function(e){if(!a(e))throw new Error("The scale factor must be a number.");return{type:s.CONTAINER_HEIGHT_SCALE_FACTOR,amount:e}}},computedProps:{},utils:{},shouldAttachToBottom:!1,preservedScrollState:0,loadingSpinnerHeight:0,deprecationWarned:!1,getDefaultProps:function(){return{handleScroll:function(){},useWindowAsScrollContainer:!1,onInfiniteLoad:function(){},loadingSpinnerDelegate:o.createElement("div",null),displayBottomUpwards:!1,isInfiniteLoading:!1,timeScrollStateLastsForAfterUserScrolls:150,className:""}},getInitialState:function(){var e=this.recomputeInternalStateFromProps(this.props);this.computedProps=e.computedProps,this.utils=e.utils,this.shouldAttachToBottom=this.props.displayBottomUpwards;var t=e.newState;return t.scrollTimeout=void 0,t.isScrolling=!1,t},generateComputedProps:function(e){var t=e.containerHeight,i=e.preloadBatchSize,o=e.preloadAdditionalHeight,r=n(e,["containerHeight","preloadBatchSize","preloadAdditionalHeight"]),l={};t="number"==typeof t?t:0,l.containerHeight=e.useWindowAsScrollContainer?window.innerHeight:t,void 0!==r.infiniteLoadBeginBottomOffset&&(l.infiniteLoadBeginEdgeOffset=r.infiniteLoadBeginBottomOffset,this.deprecationWarned||(console.error("Warning: React Infinite's infiniteLoadBeginBottomOffset prop\n has been deprecated as of 0.6.0. Please use infiniteLoadBeginEdgeOffset.\n Because this is a rather descriptive name, a simple find and replace\n should suffice."),this.deprecationWarned=!0));var a={type:s.CONTAINER_HEIGHT_SCALE_FACTOR,amount:.5},c=i&&i.type?i:a;"number"==typeof i?l.preloadBatchSize=i:c.type===s.CONTAINER_HEIGHT_SCALE_FACTOR?l.preloadBatchSize=l.containerHeight*c.amount:l.preloadBatchSize=0;var u={type:s.CONTAINER_HEIGHT_SCALE_FACTOR,amount:1},p=o&&o.type?o:u;return"number"==typeof o?l.preloadAdditionalHeight=o:p.type===s.CONTAINER_HEIGHT_SCALE_FACTOR?l.preloadAdditionalHeight=l.containerHeight*p.amount:l.preloadAdditionalHeight=0,Object.assign(r,l)},generateComputedUtilityFunctions:function(e){var t=this,i={};return i.getLoadingSpinnerHeight=function(){var e=0;if(t.refs&&t.refs.loadingSpinner){var i=r.findDOMNode(t.refs.loadingSpinner);e=i.offsetHeight||0}return e},e.useWindowAsScrollContainer?(i.subscribeToScrollListener=function(){window.addEventListener("scroll",t.infiniteHandleScroll)},i.unsubscribeFromScrollListener=function(){window.removeEventListener("scroll",t.infiniteHandleScroll)},i.nodeScrollListener=function(){},i.getScrollTop=function(){return window.scrollY},i.setScrollTop=function(e){window.scroll(window.scrollX,e)},i.scrollShouldBeIgnored=function(){return!1},i.buildScrollableStyle=function(){return{}}):(i.subscribeToScrollListener=function(){},i.unsubscribeFromScrollListener=function(){},i.nodeScrollListener=this.infiniteHandleScroll,i.getScrollTop=function(){var e;return t.refs&&t.refs.scrollable&&(e=r.findDOMNode(t.refs.scrollable)),e?e.scrollTop:0},i.setScrollTop=function(e){var i;t.refs&&t.refs.scrollable&&(i=r.findDOMNode(t.refs.scrollable)),i&&(i.scrollTop=e)},i.scrollShouldBeIgnored=function(e){return e.target!==r.findDOMNode(t.refs.scrollable)},i.buildScrollableStyle=function(){return{height:t.computedProps.containerHeight,overflowX:"hidden",overflowY:"scroll",WebkitOverflowScrolling:"touch"}}),i},recomputeInternalStateFromProps:function(e){u(e);var t=this.generateComputedProps(e),i=this.generateComputedUtilityFunctions(e),n={};return n.numberOfChildren=o.Children.count(t.children),n.infiniteComputer=l.createInfiniteComputer(t.elementHeight,t.children,t.displayBottomUpwards),void 0!==t.isInfiniteLoading&&(n.isInfiniteLoading=t.isInfiniteLoading),n.preloadBatchSize=t.preloadBatchSize,n.preloadAdditionalHeight=t.preloadAdditionalHeight,n=Object.assign(n,l.recomputeApertureStateFromOptionsAndScrollTop(n,i.getScrollTop())),{computedProps:t,utils:i,newState:n}},componentWillReceiveProps:function(e){var t=this.recomputeInternalStateFromProps(e);this.computedProps=t.computedProps,this.utils=t.utils,this.setState(t.newState)},componentWillUpdate:function(){this.props.displayBottomUpwards&&(this.preservedScrollState=this.utils.getScrollTop()-this.loadingSpinnerHeight)},componentDidUpdate:function(e,t){if(this.loadingSpinnerHeight=this.utils.getLoadingSpinnerHeight(),this.props.displayBottomUpwards){var i=this.getLowestPossibleScrollTop();this.shouldAttachToBottom&&this.utils.getScrollTop()<i?this.utils.setScrollTop(i):e.isInfiniteLoading&&!this.props.isInfiniteLoading&&this.utils.setScrollTop(this.state.infiniteComputer.getTotalScrollableHeight()-t.infiniteComputer.getTotalScrollableHeight()+this.preservedScrollState)}if(o.Children.count(this.props.children)!==o.Children.count(e.children)){var n=l.recomputeApertureStateFromOptionsAndScrollTop(this.state,this.utils.getScrollTop());this.setState(n)}},componentDidMount:function(){if(this.utils.subscribeToScrollListener(),a(this.computedProps.infiniteLoadBeginEdgeOffset)&&this.state.infiniteComputer.getTotalScrollableHeight()<this.computedProps.containerHeight&&(this.setState({isInfiniteLoading:!0}),this.computedProps.onInfiniteLoad()),this.props.displayBottomUpwards){var e=this.getLowestPossibleScrollTop();this.shouldAttachToBottom&&this.utils.getScrollTop()<e&&this.utils.setScrollTop(e)}},componentWillUnmount:function(){this.utils.unsubscribeFromScrollListener()},infiniteHandleScroll:function(e){this.utils.scrollShouldBeIgnored(e)||(this.computedProps.handleScroll(r.findDOMNode(this.refs.scrollable)),this.handleScroll(this.utils.getScrollTop()))},manageScrollTimeouts:function(){this.state.scrollTimeout&&clearTimeout(this.state.scrollTimeout);var e=this,t=setTimeout(function(){e.setState({isScrolling:!1,scrollTimeout:void 0})},this.computedProps.timeScrollStateLastsForAfterUserScrolls);this.setState({isScrolling:!0,scrollTimeout:t})},getLowestPossibleScrollTop:function(){return this.state.infiniteComputer.getTotalScrollableHeight()-this.computedProps.containerHeight},passedEdgeForInfiniteScroll:function(e){return this.computedProps.displayBottomUpwards?!this.shouldAttachToBottom&&e<this.computedProps.infiniteLoadBeginEdgeOffset:e>this.state.infiniteComputer.getTotalScrollableHeight()-this.computedProps.containerHeight-this.computedProps.infiniteLoadBeginEdgeOffset},handleScroll:function(e){this.shouldAttachToBottom=this.computedProps.displayBottomUpwards&&e>=this.getLowestPossibleScrollTop(),this.manageScrollTimeouts();var t=l.recomputeApertureStateFromOptionsAndScrollTop(this.state,e);this.passedEdgeForInfiniteScroll(e)&&!this.state.isInfiniteLoading?(this.setState(Object.assign({},t,{isInfiniteLoading:!0})),this.computedProps.onInfiniteLoad()):this.setState(t)},buildHeightStyle:function(e){return{width:"100%",height:Math.ceil(e)}},render:function(){var e;e=o.Children.count(this.computedProps.children)>1?this.computedProps.children.slice(this.state.displayIndexStart,this.state.displayIndexEnd+1):this.computedProps.children;var t={};this.state.isScrolling&&(t.pointerEvents="none");var i=this.state.infiniteComputer.getTopSpacerHeight(this.state.displayIndexStart),n=this.state.infiniteComputer.getBottomSpacerHeight(this.state.displayIndexEnd);if(this.computedProps.displayBottomUpwards){var r=this.computedProps.containerHeight-this.state.infiniteComputer.getTotalScrollableHeight();r>0&&(i=r-this.loadingSpinnerHeight)}var s=void 0===this.computedProps.infiniteLoadBeginEdgeOffset?null:o.createElement("div",{ref:"loadingSpinner"},this.state.isInfiniteLoading?this.computedProps.loadingSpinnerDelegate:null);return o.createElement("div",{className:this.computedProps.className,ref:"scrollable",style:this.utils.buildScrollableStyle(),onScroll:this.utils.nodeScrollListener},o.createElement("div",{ref:"smoothScrollingWrapper",style:t},o.createElement("div",{ref:"topSpacer",style:this.buildHeightStyle(i)}),this.computedProps.displayBottomUpwards&&s,e,!this.computedProps.displayBottomUpwards&&s,o.createElement("div",{ref:"bottomSpacer",style:this.buildHeightStyle(n)})))}});t.exports=p,i.Infinite=p}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"./utils/checkProps":9,"./utils/establish-polyfills":10,"./utils/infiniteHelpers":11,"./utils/scaleEnum":12,"./utils/types":13,"lodash.isfinite":3,react:void 0,"react-dom":void 0}],2:[function(e,t,i){function n(e){return!!e&&"object"==typeof e}function o(e,t){var i=null==e?void 0:e[t];return a(i)?i:void 0}function r(e){return"number"==typeof e&&e>-1&&e%1==0&&S>=e}function s(e){return l(e)&&g.call(e)==u}function l(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function a(e){return null==e?!1:s(e)?y.test(f.call(e)):n(e)&&p.test(e)}var c="[object Array]",u="[object Function]",p=/^\[object .+?Constructor\]$/,d=Object.prototype,f=Function.prototype.toString,h=d.hasOwnProperty,g=d.toString,y=RegExp("^"+f.call(h).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),m=o(Array,"isArray"),S=9007199254740991,b=m||function(e){return n(e)&&r(e.length)&&g.call(e)==c};t.exports=b},{}],3:[function(e,t,i){(function(e){function i(e){return"number"==typeof e&&n(e)}var n=e.isFinite;t.exports=i}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,i){"use strict";function n(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var o=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(e,t){for(var i,s,l=n(e),a=1;a<arguments.length;a++){i=Object(arguments[a]);for(var c in i)o.call(i,c)&&(l[c]=i[c]);if(Object.getOwnPropertySymbols){s=Object.getOwnPropertySymbols(i);for(var u=0;u<s.length;u++)r.call(i,s[u])&&(l[s[u]]=i[s[u]])}}return l}},{}],5:[function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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)}var r=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),s=function(e,t,i){for(var n=!0;n;){var o=e,r=t,s=i;n=!1,null===o&&(o=Function.prototype);var l=Object.getOwnPropertyDescriptor(o,r);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(s)}var c=Object.getPrototypeOf(o);if(null===c)return void 0;e=c,t=r,i=s,n=!0,l=c=void 0}},l=e("./infiniteComputer.js"),a=e("../utils/binaryIndexSearch.js"),c=function(e){function t(e,i){n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).call(this,e,i),this.prefixHeightData=this.heightData.reduce(function(e,t){return 0===e.length?[t]:(e.push(e[e.length-1]+t),e)},[])}return o(t,e),r(t,[{key:"maybeIndexToIndex",value:function(e){return"undefined"==typeof e||null===e?this.prefixHeightData.length-1:e}},{key:"getTotalScrollableHeight",value:function(){var e=this.prefixHeightData.length;return 0===e?0:this.prefixHeightData[e-1]}},{key:"getDisplayIndexStart",value:function(e){var t=a.binaryIndexSearch(this.prefixHeightData,e,a.opts.CLOSEST_HIGHER);return this.maybeIndexToIndex(t)}},{key:"getDisplayIndexEnd",value:function(e){var t=a.binaryIndexSearch(this.prefixHeightData,e,a.opts.CLOSEST_HIGHER);return this.maybeIndexToIndex(t)}},{key:"getTopSpacerHeight",value:function(e){var t=e-1;return 0>t?0:this.prefixHeightData[t]}},{key:"getBottomSpacerHeight",value:function(e){return-1===e?0:this.getTotalScrollableHeight()-this.prefixHeightData[e]}}]),t}(l);t.exports=c},{"../utils/binaryIndexSearch.js":8,"./infiniteComputer.js":7}],6:[function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function o(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)}var r=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),s=function(e,t,i){for(var n=!0;n;){var o=e,r=t,s=i;n=!1,null===o&&(o=Function.prototype);var l=Object.getOwnPropertyDescriptor(o,r);if(void 0!==l){if("value"in l)return l.value;var a=l.get;return void 0===a?void 0:a.call(s)}var c=Object.getPrototypeOf(o);if(null===c)return void 0;e=c,t=r,i=s,n=!0,l=c=void 0}},l=e("./infiniteComputer.js"),a=function(e){function t(){n(this,t),s(Object.getPrototypeOf(t.prototype),"constructor",this).apply(this,arguments)}return o(t,e),r(t,[{key:"getTotalScrollableHeight",value:function(){return this.heightData*this.numberOfChildren}},{key:"getDisplayIndexStart",value:function(e){return Math.floor(e/this.heightData)}},{key:"getDisplayIndexEnd",value:function(e){var t=Math.ceil(e/this.heightData);return t>0?t-1:t}},{key:"getTopSpacerHeight",value:function(e){return e*this.heightData}},{key:"getBottomSpacerHeight",value:function(e){var t=e+1;return Math.max(0,(this.numberOfChildren-t)*this.heightData)}}]),t}(l);t.exports=a},{"./infiniteComputer.js":7}],7:[function(e,t,i){"use strict";function n(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var o=function(){function e(e,t){for(var i=0;i<t.length;i++){var n=t[i];n.enumerable=n.enumerable||!1,n.configurable=!0,"value"in n&&(n.writable=!0),Object.defineProperty(e,n.key,n)}}return function(t,i,n){return i&&e(t.prototype,i),n&&e(t,n),t}}(),r=function(){function e(t,i){n(this,e),this.heightData=t,this.numberOfChildren=i}return o(e,[{key:"getTotalScrollableHeight",value:function(){}},{key:"getDisplayIndexStart",value:function(e){}},{key:"getDisplayIndexEnd",value:function(e){}},{key:"getTopSpacerHeight",value:function(e){}},{key:"getBottomSpacerHeight",value:function(e){}}]),e}();t.exports=r},{}],8:[function(e,t,i){"use strict";var n={CLOSEST_LOWER:1,CLOSEST_HIGHER:2},o=function(e,t,i){for(var o,r,s,l=e.length-1,a=0;l>=a;){if(r=a+Math.floor((l-a)/2),s=e[r],s===t)return r;t>s?a=r+1:s>t&&(l=r-1)}return i===n.CLOSEST_LOWER&&a>0?o=a-1:i===n.CLOSEST_HIGHER&&l<e.length-1&&(o=l+1),o};t.exports={binaryIndexSearch:o,opts:n}},{}],9:[function(e,t,i){(function(i){"use strict";var n=i.React||e("react"),o=e("lodash.isfinite");t.exports=function(e){var t="Invariant Violation: ";if(!e.containerHeight&&!e.useWindowAsScrollContainer)throw new Error(t+"Either containerHeight or useWindowAsScrollContainer must be provided.");if(!o(e.elementHeight)&&!Array.isArray(e.elementHeight))throw new Error(t+"You must provide either a number or an array of numbers as the elementHeight.");if(Array.isArray(e.elementHeight)&&n.Children.count(e.children)!==e.elementHeight.length)throw new Error(t+"There must be as many values provided in the elementHeight prop as there are children.")}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"lodash.isfinite":3,react:void 0}],10:[function(e,t,i){"use strict";Object.assign||(Object.assign=e("object-assign")),Array.isArray||(Array.isArray=e("lodash.isarray"))},{"lodash.isarray":2,"object-assign":4}],11:[function(e,t,i){(function(i){"use strict";function n(e,t){var i,n=l.Children.count(t);return i=Array.isArray(e)?new s(e,n):new r(e,n)}function o(e,t){var i=e.preloadBatchSize,n=e.preloadAdditionalHeight,o=e.infiniteComputer;return function(){var e=0===i?0:Math.floor(t/i),r=i*e,s=r+i,l=Math.max(0,r-n),a=Math.min(o.getTotalScrollableHeight(),s+n);return{displayIndexStart:o.getDisplayIndexStart(l),displayIndexEnd:o.getDisplayIndexEnd(a)}}()}var r=e("../computers/constantInfiniteComputer.js"),s=e("../computers/arrayInfiniteComputer.js"),l=i.React||e("react");t.exports={createInfiniteComputer:n,recomputeApertureStateFromOptionsAndScrollTop:o}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../computers/arrayInfiniteComputer.js":5,"../computers/constantInfiniteComputer.js":6,react:void 0}],12:[function(e,t,i){"use strict";t.exports={CONTAINER_HEIGHT_SCALE_FACTOR:"containerHeightScaleFactor"}},{}],13:[function(e,t,i){(function(i){"use strict";var n=i.React||e("react");t.exports={preloadType:n.PropTypes.oneOfType([n.PropTypes.number,n.PropTypes.shape({type:n.PropTypes.oneOf(["containerHeightScaleFactor"]).isRequired,amount:n.PropTypes.number.isRequired})])}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{react:void 0}]},{},[1])(1)});