From 5c73743dba6a9e4ff136c28e58291ebc4bd327d2 Mon Sep 17 00:00:00 2001 From: jackleberry Date: Wed, 25 Oct 2017 11:38:37 +0100 Subject: [PATCH] Added accessibility tags into control and removed nested containing div --- .../bottom_upwards_infinite_test.js.snap | 412 ++- .../infinite_styles_test.js.snap | 45 +- __tests__/__snapshots__/infinite_test.js.snap | 2451 ++++++++--------- __tests__/infinite_test.js | 3 +- dist/react-infinite.js | 2 +- dist/react-infinite.min.js | 2 +- src/react-infinite.jsx | 41 +- 7 files changed, 1460 insertions(+), 1496 deletions(-) diff --git a/__tests__/__snapshots__/bottom_upwards_infinite_test.js.snap b/__tests__/__snapshots__/bottom_upwards_infinite_test.js.snap index d3bd56e..dc2268c 100644 --- a/__tests__/__snapshots__/bottom_upwards_infinite_test.js.snap +++ b/__tests__/__snapshots__/bottom_upwards_infinite_test.js.snap @@ -2,8 +2,11 @@ exports[`The Basic Behavior of the Bottom Upwards Display does not render a space-filling top spacer div when the total element height begins to exceed the container height 1`] = `
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+ } + />
`; exports[`The Basic Behavior of the Bottom Upwards Display does not render a space-filling top spacer div when the total element height begins to exceed the container height when using the window as the container 1`] = `
-
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+
-
+ } + />
`; exports[`The Basic Behavior of the Bottom Upwards Display renders a space-filling top spacer div when the total element height is less than the container height 1`] = `
-
-
+
-
+
-
+ } + />
`; exports[`The Basic Behavior of the Bottom Upwards Display renders a space-filling top spacer div when the total element height is less than the container height when using the window as the container 1`] = `
-
-
+
-
+
-
+ } + />
`; diff --git a/__tests__/__snapshots__/infinite_styles_test.js.snap b/__tests__/__snapshots__/infinite_styles_test.js.snap index a1e3e59..aac567c 100644 --- a/__tests__/__snapshots__/infinite_styles_test.js.snap +++ b/__tests__/__snapshots__/infinite_styles_test.js.snap @@ -2,8 +2,11 @@ exports[`Infinite Styles Override: can override styles on the scrollable container will be able to override styles on the scrollable container 1`] = `
-
-
-
-
+
+
+
-
+ } + />
`; diff --git a/__tests__/__snapshots__/infinite_test.js.snap b/__tests__/__snapshots__/infinite_test.js.snap index 31a717f..6673684 100644 --- a/__tests__/__snapshots__/infinite_test.js.snap +++ b/__tests__/__snapshots__/infinite_test.js.snap @@ -14,215 +14,11 @@ exports[`React Infinite when the window is used as the Container alters the elem useWindowAsScrollContainer={true} >
-
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`React Infinite when the window is used as the Container alters the elements displayed when a scroll has occurred 2`] = ` -} - onInfiniteLoad={[Function]} - styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={10000} - useWindowAsScrollContainer={true} -> -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`React Infinite when the window is used as the Container does not attach a scrollable style 1`] = ` -
-
-
-`; - -exports[`React Infinite when the window is used as the Container hides DOM elements that are below the visible range of the window 1`] = ` -} - onInfiniteLoad={[Function]} - styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={10000} - useWindowAsScrollContainer={true} -> -
-
-
-
-
-
-
-
-
-
-
-
`; -exports[`React Infinite when the window is used as the Container reacts to window scroll events when useWindowAsScrollContainer is enabled after the initial render 1`] = ` +exports[`React Infinite when the window is used as the Container alters the elements displayed when a scroll has occurred 2`] = `
-
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`React Infinite when the window is used as the Container reacts to window scroll events when useWindowAsScrollContainer is enabled after the initial render 2`] = ` -} - onInfiniteLoad={[Function]} - styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={10000} - useWindowAsScrollContainer={true} -> -
-
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`Rendering the React Infinite Component Wrapper applies the provided class name to the root node 1`] = ` -
-
-
-
-
-
-`; - -exports[`Rendering the React Infinite Component Wrapper renders itself into the DOM with the correct container styles 1`] = ` -
-
-
-
-
-
-`; - -exports[`The Behavior of the Variable Height React Infinite Component functions correctly at the end of its range 1`] = ` -} - onInfiniteLoad={[Function]} - styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={150} - useWindowAsScrollContainer={false} -> -
-
-
-
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`The Behavior of the Variable Height React Infinite Component hides elements when the user has not yet scrolled 1`] = ` -
-
-
+ +`; + +exports[`React Infinite when the window is used as the Container does not attach a scrollable style 1`] = ` +
+
+
+
+
+
+
+
+
+
+`; + +exports[`React Infinite when the window is used as the Container hides DOM elements that are below the visible range of the window 1`] = ` +} + onInfiniteLoad={[Function]} + styles={Object {}} + timeScrollStateLastsForAfterUserScrolls={10000} + useWindowAsScrollContainer={true} +> +
+
+
+
+
-
+ `; -exports[`The Behavior of the Variable Height React Infinite Component hides visible elements when the user scrolls sufficiently 1`] = ` +exports[`React Infinite when the window is used as the Container reacts to window scroll events when useWindowAsScrollContainer is enabled after the initial render 1`] = ` } onInfiniteLoad={[Function]} styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={150} + timeScrollStateLastsForAfterUserScrolls={10000} useWindowAsScrollContainer={false} >
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ "height": 0, + "width": "100%", + } + } + /> +
+
+
+
+
+
+
`; -exports[`The Children of the React Infinite Component renders its children when no hiding behavior is required 1`] = ` -
} + onInfiniteLoad={[Function]} + styles={Object {}} + timeScrollStateLastsForAfterUserScrolls={10000} + useWindowAsScrollContainer={true} >
-
-
-
+
+
+
+
+
+
+
+
+ +`; + +exports[`Rendering the React Infinite Component Wrapper applies the provided class name to the root node 1`] = ` +
+
+
+
+
+
+`; + +exports[`Rendering the React Infinite Component Wrapper renders itself into the DOM with the correct container styles 1`] = ` +
+
+
+
+
+
+`; + +exports[`The Behavior of the Variable Height React Infinite Component functions correctly at the end of its range 1`] = ` +} + onInfiniteLoad={[Function]} + styles={Object {}} + timeScrollStateLastsForAfterUserScrolls={150} + useWindowAsScrollContainer={false} +> +
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`The Behavior of the Variable Height React Infinite Component hides elements when the user has not yet scrolled 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`The Behavior of the Variable Height React Infinite Component hides visible elements when the user scrolls sufficiently 1`] = ` +} + onInfiniteLoad={[Function]} + styles={Object {}} + timeScrollStateLastsForAfterUserScrolls={150} + useWindowAsScrollContainer={false} +> +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +`; + +exports[`The Children of the React Infinite Component renders its children when no hiding behavior is required 1`] = ` +
+
+
+
+
+
+`; + +exports[`The Children of the React Infinite Component renders its children when some DOM nodes are hidden 1`] = ` +
+
+
+
+
+
+
+
+
+
+`; + +exports[`The Children of the React Infinite Component renders more children when preloadAdditionalHeight is increased beyond its default 1`] = ` +
+
+
+
+
+
+
+
+
+
+
+`; + +exports[`The Children of the React Infinite Component renders more children when preloadBatchSize is increased beyond its default 1`] = ` +
+
+
+
+
+
+
+
+
+
+
-
+ } + />
`; -exports[`The Children of the React Infinite Component renders its children when some DOM nodes are hidden 1`] = ` -
} + onInfiniteLoad={[Function]} + styles={Object {}} + timeScrollStateLastsForAfterUserScrolls={150} + useWindowAsScrollContainer={false} >
-
+ `; -exports[`The Children of the React Infinite Component renders more children when preloadAdditionalHeight is increased beyond its default 1`] = ` -
} + onInfiniteLoad={[Function]} + styles={Object {}} + timeScrollStateLastsForAfterUserScrolls={150} + useWindowAsScrollContainer={false} >
-
-
-
-
-`; - -exports[`The Children of the React Infinite Component renders more children when preloadBatchSize is increased beyond its default 1`] = ` -
-
-
-
-
-
-
-
-`; - -exports[`The Scrolling Behavior of the Constant Height React Infinite Component functions correctly at the end of its range 1`] = ` -} - onInfiniteLoad={[Function]} - styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={150} - useWindowAsScrollContainer={false} -> -
-
-
-
-
-
-
-
-
-
-
-
- -`; - -exports[`The Scrolling Behavior of the Constant Height React Infinite Component hides visible elements when the user scrolls sufficiently 1`] = ` -} - onInfiniteLoad={[Function]} - styles={Object {}} - timeScrollStateLastsForAfterUserScrolls={150} - useWindowAsScrollContainer={false} -> -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
`; diff --git a/__tests__/infinite_test.js b/__tests__/infinite_test.js index 9cd1882..8ea1356 100644 --- a/__tests__/infinite_test.js +++ b/__tests__/infinite_test.js @@ -506,8 +506,7 @@ describe("Maintaining React Infinite's internal scroll state", function() { }); expect( - rootNode.find('.correct-class-name').childAt(0).props().style - .pointerEvents + rootNode.find('.correct-class-name').props().style.pointerEvents ).toEqual('none'); }); }); diff --git a/dist/react-infinite.js b/dist/react-infinite.js index 61c38f1..de20d87 100644 --- a/dist/react-infinite.js +++ b/dist/react-infinite.js @@ -1,6 +1,6 @@ (function(f){if(typeof exports==="object"&&typeof module!=="undefined"){module.exports=f()}else if(typeof define==="function"&&define.amd){define([],f)}else{var g;if(typeof window!=="undefined"){g=window}else if(typeof global!=="undefined"){g=global}else if(typeof self!=="undefined"){g=self}else{g=this}g.Infinite = f()}})(function(){var define,module,exports;return (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o1?this.computedProps.children.slice(this.state.displayIndexStart,this.state.displayIndexEnd+1):this.computedProps.children;var i={};this.state.isScrolling&&(i.pointerEvents="none");var o=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&&(o=r-this.loadingSpinnerHeight)}var s=void 0===this.computedProps.infiniteLoadBeginEdgeOffset?null:React.createElement("div",{ref:function(e){t.loadingSpinner=e}},this.state.isInfiniteLoading?this.computedProps.loadingSpinnerDelegate:null);return React.createElement("div",{className:this.computedProps.className,ref:function(e){t.scrollable=e},style:this.utils.buildScrollableStyle(),onScroll:this.utils.nodeScrollListener},React.createElement("div",{ref:function(e){t.smoothScrollingWrapper=e},style:i},React.createElement("div",{ref:function(e){t.topSpacer=e},style:infiniteHelpers.buildHeightStyle(o)}),this.computedProps.displayBottomUpwards&&s,e,!this.computedProps.displayBottomUpwards&&s,React.createElement("div",{ref:function(e){t.bottomSpacer=e},style:infiniteHelpers.buildHeightStyle(n)})))}}]),t}(React.Component);Infinite.propTypes={children:PropTypes.any,handleScroll:PropTypes.func,preloadBatchSize:PropTypes.oneOfType([PropTypes.number,PropTypes.shape({type:PropTypes.oneOf(["containerHeightScaleFactor"]).isRequired,amount:PropTypes.number.isRequired})]),preloadAdditionalHeight:PropTypes.oneOfType([PropTypes.number,PropTypes.shape({type:PropTypes.oneOf(["containerHeightScaleFactor"]).isRequired,amount:PropTypes.number.isRequired})]),elementHeight:PropTypes.oneOfType([PropTypes.number,PropTypes.arrayOf(PropTypes.number)]).isRequired,containerHeight:PropTypes.number,useWindowAsScrollContainer:PropTypes.bool,displayBottomUpwards:PropTypes.bool.isRequired,infiniteLoadBeginEdgeOffset:PropTypes.number,onInfiniteLoad:PropTypes.func,loadingSpinnerDelegate:PropTypes.node,isInfiniteLoading:PropTypes.bool,timeScrollStateLastsForAfterUserScrolls:PropTypes.number,className:PropTypes.string,styles:PropTypes.shape({scrollableStyle:PropTypes.object}).isRequired},Infinite.defaultProps={handleScroll:function(){},useWindowAsScrollContainer:!1,onInfiniteLoad:function(){},loadingSpinnerDelegate:React.createElement("div",null),displayBottomUpwards:!1,isInfiniteLoading:!1,timeScrollStateLastsForAfterUserScrolls:150,className:"",styles:{}};var _initialiseProps=function(){var e=this;this.shouldAttachToBottom=!1,this.preservedScrollState=0,this.loadingSpinnerHeight=0,this.generateComputedUtilityFunctions=function(t){var i={};return i.getLoadingSpinnerHeight=function(){var t=0;return e.loadingSpinner&&(t=e.loadingSpinner.offsetHeight||0),t},t.useWindowAsScrollContainer?(i.subscribeToScrollListener=function(){window.addEventListener("scroll",e.infiniteHandleScroll)},i.unsubscribeFromScrollListener=function(){window.removeEventListener("scroll",e.infiniteHandleScroll)},i.nodeScrollListener=function(){},i.getScrollTop=function(){return window.pageYOffset},i.setScrollTop=function(e){window.scroll(window.pageXOffset,e)},i.scrollShouldBeIgnored=function(){return!1},i.buildScrollableStyle=function(){return{}}):(i.subscribeToScrollListener=function(){},i.unsubscribeFromScrollListener=function(){},i.nodeScrollListener=e.infiniteHandleScroll,i.getScrollTop=function(){return e.scrollable?e.scrollable.scrollTop:0},i.setScrollTop=function(t){e.scrollable&&(e.scrollable.scrollTop=t)},i.scrollShouldBeIgnored=function(t){return t.target!==e.scrollable},i.buildScrollableStyle=function(){return Object.assign({},{height:e.computedProps.containerHeight,overflowX:"hidden",overflowY:"scroll",WebkitOverflowScrolling:"touch"},e.computedProps.styles.scrollableStyle||{})}),i},this.recomputeInternalStateFromProps=function(t){checkProps(t);var i=infiniteHelpers.generateComputedProps(t),o=e.generateComputedUtilityFunctions(t),n={};return n.numberOfChildren=React.Children.count(i.children),n.infiniteComputer=infiniteHelpers.createInfiniteComputer(i.elementHeight,i.children),void 0!==i.isInfiniteLoading&&(n.isInfiniteLoading=i.isInfiniteLoading),n.preloadBatchSize=i.preloadBatchSize,n.preloadAdditionalHeight=i.preloadAdditionalHeight,n=Object.assign(n,infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(n,o.getScrollTop())),{computedProps:i,utils:o,newState:n}},this.infiniteHandleScroll=function(t){e.utils.scrollShouldBeIgnored(t)||(e.computedProps.handleScroll(e.scrollable),e.handleScroll(e.utils.getScrollTop()))},this.manageScrollTimeouts=function(){e.state.scrollTimeout&&clearTimeout(e.state.scrollTimeout);var t=e,i=setTimeout(function(){t.setState({isScrolling:!1,scrollTimeout:void 0})},e.computedProps.timeScrollStateLastsForAfterUserScrolls);e.setState({isScrolling:!0,scrollTimeout:i})},this.getLowestPossibleScrollTop=function(){return e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight},this.hasAllVisibleItems=function(){return!(_isFinite(e.computedProps.infiniteLoadBeginEdgeOffset)&&e.state.infiniteComputer.getTotalScrollableHeight()e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight-i)},this.onInfiniteLoad=function(){e.setState({isInfiniteLoading:!0}),e.computedProps.onInfiniteLoad()},this.handleScroll=function(t){e.shouldAttachToBottom=e.computedProps.displayBottomUpwards&&t>=e.getLowestPossibleScrollTop(),e.manageScrollTimeouts();var i=infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(e.state,t);e.passedEdgeForInfiniteScroll(t)&&!e.state.isInfiniteLoading?(e.setState(Object.assign({},i)),e.onInfiniteLoad()):e.setState(i)}};module.exports=Infinite,global.Infinite=Infinite; +"use strict";function _classCallCheck(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function _possibleConstructorReturn(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 _inherits(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 _createClass=function(){function e(e,t){for(var i=0;i1?this.computedProps.children.slice(this.state.displayIndexStart,this.state.displayIndexEnd+1):this.computedProps.children;var i={};this.state.isScrolling&&(i.pointerEvents="none");var o=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&&(o=r-this.loadingSpinnerHeight)}var s=void 0===this.computedProps.infiniteLoadBeginEdgeOffset?null:React.createElement("div",{ref:function(e){t.loadingSpinner=e}},this.state.isInfiniteLoading?this.computedProps.loadingSpinnerDelegate:null);return React.createElement("div",{className:this.computedProps.className,ref:function(e){t.scrollable=e},style:Object.assign({},this.utils.buildScrollableStyle(),i),onScroll:this.utils.nodeScrollListener,role:"feed","aria-setsize":"-1","aria-busy":this.state.isInfiniteLoading},React.createElement("div",{ref:function(e){t.topSpacer=e},style:infiniteHelpers.buildHeightStyle(o)}),this.computedProps.displayBottomUpwards&&s,e,!this.computedProps.displayBottomUpwards&&s,React.createElement("div",{ref:function(e){t.bottomSpacer=e},style:infiniteHelpers.buildHeightStyle(n)}))}}]),t}(React.Component);Infinite.propTypes={children:PropTypes.any,handleScroll:PropTypes.func,preloadBatchSize:PropTypes.oneOfType([PropTypes.number,PropTypes.shape({type:PropTypes.oneOf(["containerHeightScaleFactor"]).isRequired,amount:PropTypes.number.isRequired})]),preloadAdditionalHeight:PropTypes.oneOfType([PropTypes.number,PropTypes.shape({type:PropTypes.oneOf(["containerHeightScaleFactor"]).isRequired,amount:PropTypes.number.isRequired})]),elementHeight:PropTypes.oneOfType([PropTypes.number,PropTypes.arrayOf(PropTypes.number)]).isRequired,containerHeight:PropTypes.number,useWindowAsScrollContainer:PropTypes.bool,displayBottomUpwards:PropTypes.bool.isRequired,infiniteLoadBeginEdgeOffset:PropTypes.number,onInfiniteLoad:PropTypes.func,loadingSpinnerDelegate:PropTypes.node,isInfiniteLoading:PropTypes.bool,timeScrollStateLastsForAfterUserScrolls:PropTypes.number,className:PropTypes.string,styles:PropTypes.shape({scrollableStyle:PropTypes.object}).isRequired},Infinite.defaultProps={handleScroll:function(){},useWindowAsScrollContainer:!1,onInfiniteLoad:function(){},loadingSpinnerDelegate:React.createElement("div",null),displayBottomUpwards:!1,isInfiniteLoading:!1,timeScrollStateLastsForAfterUserScrolls:150,className:"",styles:{}};var _initialiseProps=function(){var e=this;this.shouldAttachToBottom=!1,this.preservedScrollState=0,this.loadingSpinnerHeight=0,this.generateComputedUtilityFunctions=function(t){var i={};return i.getLoadingSpinnerHeight=function(){var t=0;return e.loadingSpinner&&(t=e.loadingSpinner.offsetHeight||0),t},t.useWindowAsScrollContainer?(i.subscribeToScrollListener=function(){window.addEventListener("scroll",e.infiniteHandleScroll)},i.unsubscribeFromScrollListener=function(){window.removeEventListener("scroll",e.infiniteHandleScroll)},i.nodeScrollListener=function(){},i.getScrollTop=function(){return window.pageYOffset},i.setScrollTop=function(e){window.scroll(window.pageXOffset,e)},i.scrollShouldBeIgnored=function(){return!1},i.buildScrollableStyle=function(){return{}}):(i.subscribeToScrollListener=function(){},i.unsubscribeFromScrollListener=function(){},i.nodeScrollListener=e.infiniteHandleScroll,i.getScrollTop=function(){return e.scrollable?e.scrollable.scrollTop:0},i.setScrollTop=function(t){e.scrollable&&(e.scrollable.scrollTop=t)},i.scrollShouldBeIgnored=function(t){return t.target!==e.scrollable},i.buildScrollableStyle=function(){return Object.assign({},{height:e.computedProps.containerHeight,overflowX:"hidden",overflowY:"scroll",WebkitOverflowScrolling:"touch"},e.computedProps.styles.scrollableStyle||{})}),i},this.recomputeInternalStateFromProps=function(t){checkProps(t);var i=infiniteHelpers.generateComputedProps(t),o=e.generateComputedUtilityFunctions(t),n={};return n.numberOfChildren=React.Children.count(i.children),n.infiniteComputer=infiniteHelpers.createInfiniteComputer(i.elementHeight,i.children),void 0!==i.isInfiniteLoading&&(n.isInfiniteLoading=i.isInfiniteLoading),n.preloadBatchSize=i.preloadBatchSize,n.preloadAdditionalHeight=i.preloadAdditionalHeight,n=Object.assign(n,infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(n,o.getScrollTop())),{computedProps:i,utils:o,newState:n}},this.infiniteHandleScroll=function(t){e.utils.scrollShouldBeIgnored(t)||(e.computedProps.handleScroll(e.scrollable),e.handleScroll(e.utils.getScrollTop()))},this.manageScrollTimeouts=function(){e.state.scrollTimeout&&clearTimeout(e.state.scrollTimeout);var t=e,i=setTimeout(function(){t.setState({isScrolling:!1,scrollTimeout:void 0})},e.computedProps.timeScrollStateLastsForAfterUserScrolls);e.setState({isScrolling:!0,scrollTimeout:i})},this.getLowestPossibleScrollTop=function(){return e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight},this.hasAllVisibleItems=function(){return!(_isFinite(e.computedProps.infiniteLoadBeginEdgeOffset)&&e.state.infiniteComputer.getTotalScrollableHeight()e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight-i)},this.onInfiniteLoad=function(){e.setState({isInfiniteLoading:!0}),e.computedProps.onInfiniteLoad()},this.handleScroll=function(t){e.shouldAttachToBottom=e.computedProps.displayBottomUpwards&&t>=e.getLowestPossibleScrollTop(),e.manageScrollTimeouts();var i=infiniteHelpers.recomputeApertureStateFromOptionsAndScrollTop(e.state,t);e.passedEdgeForInfiniteScroll(t)&&!e.state.isInfiniteLoading?(e.setState(Object.assign({},i)),e.onInfiniteLoad()):e.setState(i)}};module.exports=Infinite,global.Infinite=Infinite; }).call(this,typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : typeof window !== "undefined" ? window : {}) },{"./utils/checkProps":9,"./utils/establish-polyfills":10,"./utils/infiniteHelpers":11,"./utils/scaleEnum":12,"./utils/window":13,"lodash.isfinite":3,"prop-types":undefined,"react":undefined}],2:[function(require,module,exports){ /** diff --git a/dist/react-infinite.min.js b/dist/react-infinite.min.js index 22c7e30..2b30d03 100644 --- a/dist/react-infinite.min.js +++ b/dist/react-infinite.min.js @@ -1 +1 @@ -!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,n,o){function i(l,a){if(!n[l]){if(!t[l]){var s="function"==typeof require&&require;if(!a&&s)return s(l,!0);if(r)return r(l,!0);var u=new Error("Cannot find module '"+l+"'");throw u.code="MODULE_NOT_FOUND",u}var c=n[l]={exports:{}};t[l][0].call(c.exports,function(e){var n=t[l][1][e];return i(n?n:e)},c,c.exports,e,t,n,o)}return n[l].exports}for(var r="function"==typeof require&&require,l=0;l1?this.computedProps.children.slice(this.state.displayIndexStart,this.state.displayIndexEnd+1):this.computedProps.children;var n={};this.state.isScrolling&&(n.pointerEvents="none");var o=this.state.infiniteComputer.getTopSpacerHeight(this.state.displayIndexStart),i=this.state.infiniteComputer.getBottomSpacerHeight(this.state.displayIndexEnd);if(this.computedProps.displayBottomUpwards){var r=this.computedProps.containerHeight-this.state.infiniteComputer.getTotalScrollableHeight();r>0&&(o=r-this.loadingSpinnerHeight)}var l=void 0===this.computedProps.infiniteLoadBeginEdgeOffset?null:a.createElement("div",{ref:function(e){t.loadingSpinner=e}},this.state.isInfiniteLoading?this.computedProps.loadingSpinnerDelegate:null);return a.createElement("div",{className:this.computedProps.className,ref:function(e){t.scrollable=e},style:this.utils.buildScrollableStyle(),onScroll:this.utils.nodeScrollListener},a.createElement("div",{ref:function(e){t.smoothScrollingWrapper=e},style:n},a.createElement("div",{ref:function(e){t.topSpacer=e},style:p.buildHeightStyle(o)}),this.computedProps.displayBottomUpwards&&l,e,!this.computedProps.displayBottomUpwards&&l,a.createElement("div",{ref:function(e){t.bottomSpacer=e},style:p.buildHeightStyle(i)})))}}]),t}(a.Component);h.propTypes={children:s.any,handleScroll:s.func,preloadBatchSize:s.oneOfType([s.number,s.shape({type:s.oneOf(["containerHeightScaleFactor"]).isRequired,amount:s.number.isRequired})]),preloadAdditionalHeight:s.oneOfType([s.number,s.shape({type:s.oneOf(["containerHeightScaleFactor"]).isRequired,amount:s.number.isRequired})]),elementHeight:s.oneOfType([s.number,s.arrayOf(s.number)]).isRequired,containerHeight:s.number,useWindowAsScrollContainer:s.bool,displayBottomUpwards:s.bool.isRequired,infiniteLoadBeginEdgeOffset:s.number,onInfiniteLoad:s.func,loadingSpinnerDelegate:s.node,isInfiniteLoading:s.bool,timeScrollStateLastsForAfterUserScrolls:s.number,className:s.string,styles:s.shape({scrollableStyle:s.object}).isRequired},h.defaultProps={handleScroll:function(){},useWindowAsScrollContainer:!1,onInfiniteLoad:function(){},loadingSpinnerDelegate:a.createElement("div",null),displayBottomUpwards:!1,isInfiniteLoading:!1,timeScrollStateLastsForAfterUserScrolls:150,className:"",styles:{}};var g=function(){var e=this;this.shouldAttachToBottom=!1,this.preservedScrollState=0,this.loadingSpinnerHeight=0,this.generateComputedUtilityFunctions=function(t){var n={};return n.getLoadingSpinnerHeight=function(){var t=0;return e.loadingSpinner&&(t=e.loadingSpinner.offsetHeight||0),t},t.useWindowAsScrollContainer?(n.subscribeToScrollListener=function(){u.addEventListener("scroll",e.infiniteHandleScroll)},n.unsubscribeFromScrollListener=function(){u.removeEventListener("scroll",e.infiniteHandleScroll)},n.nodeScrollListener=function(){},n.getScrollTop=function(){return u.pageYOffset},n.setScrollTop=function(e){u.scroll(u.pageXOffset,e)},n.scrollShouldBeIgnored=function(){return!1},n.buildScrollableStyle=function(){return{}}):(n.subscribeToScrollListener=function(){},n.unsubscribeFromScrollListener=function(){},n.nodeScrollListener=e.infiniteHandleScroll,n.getScrollTop=function(){return e.scrollable?e.scrollable.scrollTop:0},n.setScrollTop=function(t){e.scrollable&&(e.scrollable.scrollTop=t)},n.scrollShouldBeIgnored=function(t){return t.target!==e.scrollable},n.buildScrollableStyle=function(){return Object.assign({},{height:e.computedProps.containerHeight,overflowX:"hidden",overflowY:"scroll",WebkitOverflowScrolling:"touch"},e.computedProps.styles.scrollableStyle||{})}),n},this.recomputeInternalStateFromProps=function(t){d(t);var n=p.generateComputedProps(t),o=e.generateComputedUtilityFunctions(t),i={};return i.numberOfChildren=a.Children.count(n.children),i.infiniteComputer=p.createInfiniteComputer(n.elementHeight,n.children),void 0!==n.isInfiniteLoading&&(i.isInfiniteLoading=n.isInfiniteLoading),i.preloadBatchSize=n.preloadBatchSize,i.preloadAdditionalHeight=n.preloadAdditionalHeight,i=Object.assign(i,p.recomputeApertureStateFromOptionsAndScrollTop(i,o.getScrollTop())),{computedProps:n,utils:o,newState:i}},this.infiniteHandleScroll=function(t){e.utils.scrollShouldBeIgnored(t)||(e.computedProps.handleScroll(e.scrollable),e.handleScroll(e.utils.getScrollTop()))},this.manageScrollTimeouts=function(){e.state.scrollTimeout&&clearTimeout(e.state.scrollTimeout);var t=e,n=setTimeout(function(){t.setState({isScrolling:!1,scrollTimeout:void 0})},e.computedProps.timeScrollStateLastsForAfterUserScrolls);e.setState({isScrolling:!0,scrollTimeout:n})},this.getLowestPossibleScrollTop=function(){return e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight},this.hasAllVisibleItems=function(){return!(f(e.computedProps.infiniteLoadBeginEdgeOffset)&&e.state.infiniteComputer.getTotalScrollableHeight()e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight-n)},this.onInfiniteLoad=function(){e.setState({isInfiniteLoading:!0}),e.computedProps.onInfiniteLoad()},this.handleScroll=function(t){e.shouldAttachToBottom=e.computedProps.displayBottomUpwards&&t>=e.getLowestPossibleScrollTop(),e.manageScrollTimeouts();var n=p.recomputeApertureStateFromOptionsAndScrollTop(e.state,t);e.passedEdgeForInfiniteScroll(t)&&!e.state.isInfiniteLoading?(e.setState(Object.assign({},n)),e.onInfiniteLoad()):e.setState(n)}};t.exports=h,n.Infinite=h}).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/window":13,"lodash.isfinite":3,"prop-types":void 0,react:void 0}],2:[function(e,t,n){function o(e){return!!e&&"object"==typeof e}function i(e,t){var n=null==e?void 0:e[t];return s(n)?n:void 0}function r(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=b}function l(e){return a(e)&&g.call(e)==c}function a(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function s(e){return null!=e&&(l(e)?y.test(d.call(e)):o(e)&&p.test(e))}var u="[object Array]",c="[object Function]",p=/^\[object .+?Constructor\]$/,f=Object.prototype,d=Function.prototype.toString,h=f.hasOwnProperty,g=f.toString,y=RegExp("^"+d.call(h).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),m=i(Array,"isArray"),b=9007199254740991,S=m||function(e){return o(e)&&r(e.length)&&g.call(e)==u};t.exports=S},{}],3:[function(e,t,n){(function(e){function n(e){return"number"==typeof e&&o(e)}var o=e.isFinite;t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,n){"use strict";function o(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var i=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(e,t){for(var n,l,a=o(e),s=1;s0?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}(a);t.exports=s},{"./infiniteComputer.js":7}],7:[function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;nt&&(a=r-1)}return n===o.CLOSEST_LOWER&&s>0?i=s-1:n===o.CLOSEST_HIGHER&&a=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function i(e,t){var n=f.Children.count(t);return Array.isArray(e)?new c(e,n):new u(e,n)}function r(e,t){var n=e.preloadBatchSize,o=e.preloadAdditionalHeight,i=e.infiniteComputer,r=0===n?0:Math.floor(t/n),l=n*r,a=l+n,s=Math.max(0,l-o),u=Math.min(i.getTotalScrollableHeight(),a+o);return{displayIndexStart:i.getDisplayIndexStart(s),displayIndexEnd:i.getDisplayIndexEnd(u)}}function l(e){var t=e.containerHeight,n=e.preloadBatchSize,i=e.preloadAdditionalHeight,r=e.handleScroll,l=e.onInfiniteLoad,a=o(e,["containerHeight","preloadBatchSize","preloadAdditionalHeight","handleScroll","onInfiniteLoad"]),u={};t="number"==typeof t?t:0,u.containerHeight=e.useWindowAsScrollContainer?d.innerHeight:t,u.handleScroll=r||function(){},u.onInfiniteLoad=l||function(){};var c={type:p.CONTAINER_HEIGHT_SCALE_FACTOR,amount:.5},f=n&&n.type?n:c;"number"==typeof n?u.preloadBatchSize=n:"object"===(void 0===f?"undefined":s(f))&&f.type===p.CONTAINER_HEIGHT_SCALE_FACTOR?u.preloadBatchSize=u.containerHeight*f.amount:u.preloadBatchSize=0;var h={type:p.CONTAINER_HEIGHT_SCALE_FACTOR,amount:1},g=i&&i.type?i:h;return"number"==typeof i?u.preloadAdditionalHeight=i:"object"===(void 0===g?"undefined":s(g))&&g.type===p.CONTAINER_HEIGHT_SCALE_FACTOR?u.preloadAdditionalHeight=u.containerHeight*g.amount:u.preloadAdditionalHeight=0,Object.assign(a,u)}function a(e){return{width:"100%",height:Math.ceil(e)}}var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=e("../computers/constantInfiniteComputer.js"),c=e("../computers/arrayInfiniteComputer.js"),p=e("./scaleEnum"),f=n.React||e("react"),d=e("./window");t.exports={createInfiniteComputer:i,recomputeApertureStateFromOptionsAndScrollTop:r,generateComputedProps:l,buildHeightStyle:a}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../computers/arrayInfiniteComputer.js":5,"../computers/constantInfiniteComputer.js":6,"./scaleEnum":12,"./window":13,react:void 0}],12:[function(e,t,n){"use strict";t.exports={CONTAINER_HEIGHT_SCALE_FACTOR:"containerHeightScaleFactor"}},{}],13:[function(e,t,n){(function(e){"use strict";var n;n="undefined"!=typeof window?window:"undefined"!=typeof e?e:"undefined"!=typeof self?self:{},t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)}); \ No newline at end of file +!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,n,o){function i(l,a){if(!n[l]){if(!t[l]){var s="function"==typeof require&&require;if(!a&&s)return s(l,!0);if(r)return r(l,!0);var u=new Error("Cannot find module '"+l+"'");throw u.code="MODULE_NOT_FOUND",u}var c=n[l]={exports:{}};t[l][0].call(c.exports,function(e){var n=t[l][1][e];return i(n?n:e)},c,c.exports,e,t,n,o)}return n[l].exports}for(var r="function"==typeof require&&require,l=0;l1?this.computedProps.children.slice(this.state.displayIndexStart,this.state.displayIndexEnd+1):this.computedProps.children;var n={};this.state.isScrolling&&(n.pointerEvents="none");var o=this.state.infiniteComputer.getTopSpacerHeight(this.state.displayIndexStart),i=this.state.infiniteComputer.getBottomSpacerHeight(this.state.displayIndexEnd);if(this.computedProps.displayBottomUpwards){var r=this.computedProps.containerHeight-this.state.infiniteComputer.getTotalScrollableHeight();r>0&&(o=r-this.loadingSpinnerHeight)}var l=void 0===this.computedProps.infiniteLoadBeginEdgeOffset?null:a.createElement("div",{ref:function(e){t.loadingSpinner=e}},this.state.isInfiniteLoading?this.computedProps.loadingSpinnerDelegate:null);return a.createElement("div",{className:this.computedProps.className,ref:function(e){t.scrollable=e},style:Object.assign({},this.utils.buildScrollableStyle(),n),onScroll:this.utils.nodeScrollListener,role:"feed","aria-setsize":"-1","aria-busy":this.state.isInfiniteLoading},a.createElement("div",{ref:function(e){t.topSpacer=e},style:p.buildHeightStyle(o)}),this.computedProps.displayBottomUpwards&&l,e,!this.computedProps.displayBottomUpwards&&l,a.createElement("div",{ref:function(e){t.bottomSpacer=e},style:p.buildHeightStyle(i)}))}}]),t}(a.Component);h.propTypes={children:s.any,handleScroll:s.func,preloadBatchSize:s.oneOfType([s.number,s.shape({type:s.oneOf(["containerHeightScaleFactor"]).isRequired,amount:s.number.isRequired})]),preloadAdditionalHeight:s.oneOfType([s.number,s.shape({type:s.oneOf(["containerHeightScaleFactor"]).isRequired,amount:s.number.isRequired})]),elementHeight:s.oneOfType([s.number,s.arrayOf(s.number)]).isRequired,containerHeight:s.number,useWindowAsScrollContainer:s.bool,displayBottomUpwards:s.bool.isRequired,infiniteLoadBeginEdgeOffset:s.number,onInfiniteLoad:s.func,loadingSpinnerDelegate:s.node,isInfiniteLoading:s.bool,timeScrollStateLastsForAfterUserScrolls:s.number,className:s.string,styles:s.shape({scrollableStyle:s.object}).isRequired},h.defaultProps={handleScroll:function(){},useWindowAsScrollContainer:!1,onInfiniteLoad:function(){},loadingSpinnerDelegate:a.createElement("div",null),displayBottomUpwards:!1,isInfiniteLoading:!1,timeScrollStateLastsForAfterUserScrolls:150,className:"",styles:{}};var g=function(){var e=this;this.shouldAttachToBottom=!1,this.preservedScrollState=0,this.loadingSpinnerHeight=0,this.generateComputedUtilityFunctions=function(t){var n={};return n.getLoadingSpinnerHeight=function(){var t=0;return e.loadingSpinner&&(t=e.loadingSpinner.offsetHeight||0),t},t.useWindowAsScrollContainer?(n.subscribeToScrollListener=function(){u.addEventListener("scroll",e.infiniteHandleScroll)},n.unsubscribeFromScrollListener=function(){u.removeEventListener("scroll",e.infiniteHandleScroll)},n.nodeScrollListener=function(){},n.getScrollTop=function(){return u.pageYOffset},n.setScrollTop=function(e){u.scroll(u.pageXOffset,e)},n.scrollShouldBeIgnored=function(){return!1},n.buildScrollableStyle=function(){return{}}):(n.subscribeToScrollListener=function(){},n.unsubscribeFromScrollListener=function(){},n.nodeScrollListener=e.infiniteHandleScroll,n.getScrollTop=function(){return e.scrollable?e.scrollable.scrollTop:0},n.setScrollTop=function(t){e.scrollable&&(e.scrollable.scrollTop=t)},n.scrollShouldBeIgnored=function(t){return t.target!==e.scrollable},n.buildScrollableStyle=function(){return Object.assign({},{height:e.computedProps.containerHeight,overflowX:"hidden",overflowY:"scroll",WebkitOverflowScrolling:"touch"},e.computedProps.styles.scrollableStyle||{})}),n},this.recomputeInternalStateFromProps=function(t){d(t);var n=p.generateComputedProps(t),o=e.generateComputedUtilityFunctions(t),i={};return i.numberOfChildren=a.Children.count(n.children),i.infiniteComputer=p.createInfiniteComputer(n.elementHeight,n.children),void 0!==n.isInfiniteLoading&&(i.isInfiniteLoading=n.isInfiniteLoading),i.preloadBatchSize=n.preloadBatchSize,i.preloadAdditionalHeight=n.preloadAdditionalHeight,i=Object.assign(i,p.recomputeApertureStateFromOptionsAndScrollTop(i,o.getScrollTop())),{computedProps:n,utils:o,newState:i}},this.infiniteHandleScroll=function(t){e.utils.scrollShouldBeIgnored(t)||(e.computedProps.handleScroll(e.scrollable),e.handleScroll(e.utils.getScrollTop()))},this.manageScrollTimeouts=function(){e.state.scrollTimeout&&clearTimeout(e.state.scrollTimeout);var t=e,n=setTimeout(function(){t.setState({isScrolling:!1,scrollTimeout:void 0})},e.computedProps.timeScrollStateLastsForAfterUserScrolls);e.setState({isScrolling:!0,scrollTimeout:n})},this.getLowestPossibleScrollTop=function(){return e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight},this.hasAllVisibleItems=function(){return!(f(e.computedProps.infiniteLoadBeginEdgeOffset)&&e.state.infiniteComputer.getTotalScrollableHeight()e.state.infiniteComputer.getTotalScrollableHeight()-e.computedProps.containerHeight-n)},this.onInfiniteLoad=function(){e.setState({isInfiniteLoading:!0}),e.computedProps.onInfiniteLoad()},this.handleScroll=function(t){e.shouldAttachToBottom=e.computedProps.displayBottomUpwards&&t>=e.getLowestPossibleScrollTop(),e.manageScrollTimeouts();var n=p.recomputeApertureStateFromOptionsAndScrollTop(e.state,t);e.passedEdgeForInfiniteScroll(t)&&!e.state.isInfiniteLoading?(e.setState(Object.assign({},n)),e.onInfiniteLoad()):e.setState(n)}};t.exports=h,n.Infinite=h}).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/window":13,"lodash.isfinite":3,"prop-types":void 0,react:void 0}],2:[function(e,t,n){function o(e){return!!e&&"object"==typeof e}function i(e,t){var n=null==e?void 0:e[t];return s(n)?n:void 0}function r(e){return"number"==typeof e&&e>-1&&e%1==0&&e<=b}function l(e){return a(e)&&g.call(e)==c}function a(e){var t=typeof e;return!!e&&("object"==t||"function"==t)}function s(e){return null!=e&&(l(e)?y.test(d.call(e)):o(e)&&p.test(e))}var u="[object Array]",c="[object Function]",p=/^\[object .+?Constructor\]$/,f=Object.prototype,d=Function.prototype.toString,h=f.hasOwnProperty,g=f.toString,y=RegExp("^"+d.call(h).replace(/[\\^$.*+?()[\]{}|]/g,"\\$&").replace(/hasOwnProperty|(function).*?(?=\\\()| for .+?(?=\\\])/g,"$1.*?")+"$"),m=i(Array,"isArray"),b=9007199254740991,S=m||function(e){return o(e)&&r(e.length)&&g.call(e)==u};t.exports=S},{}],3:[function(e,t,n){(function(e){function n(e){return"number"==typeof e&&o(e)}var o=e.isFinite;t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}],4:[function(e,t,n){"use strict";function o(e){if(null===e||void 0===e)throw new TypeError("Object.assign cannot be called with null or undefined");return Object(e)}var i=Object.prototype.hasOwnProperty,r=Object.prototype.propertyIsEnumerable;t.exports=Object.assign||function(e,t){for(var n,l,a=o(e),s=1;s0?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}(a);t.exports=s},{"./infiniteComputer.js":7}],7:[function(e,t,n){"use strict";function o(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}var i=function(){function e(e,t){for(var n=0;nt&&(a=r-1)}return n===o.CLOSEST_LOWER&&s>0?i=s-1:n===o.CLOSEST_HIGHER&&a=0||Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n}function i(e,t){var n=f.Children.count(t);return Array.isArray(e)?new c(e,n):new u(e,n)}function r(e,t){var n=e.preloadBatchSize,o=e.preloadAdditionalHeight,i=e.infiniteComputer,r=0===n?0:Math.floor(t/n),l=n*r,a=l+n,s=Math.max(0,l-o),u=Math.min(i.getTotalScrollableHeight(),a+o);return{displayIndexStart:i.getDisplayIndexStart(s),displayIndexEnd:i.getDisplayIndexEnd(u)}}function l(e){var t=e.containerHeight,n=e.preloadBatchSize,i=e.preloadAdditionalHeight,r=e.handleScroll,l=e.onInfiniteLoad,a=o(e,["containerHeight","preloadBatchSize","preloadAdditionalHeight","handleScroll","onInfiniteLoad"]),u={};t="number"==typeof t?t:0,u.containerHeight=e.useWindowAsScrollContainer?d.innerHeight:t,u.handleScroll=r||function(){},u.onInfiniteLoad=l||function(){};var c={type:p.CONTAINER_HEIGHT_SCALE_FACTOR,amount:.5},f=n&&n.type?n:c;"number"==typeof n?u.preloadBatchSize=n:"object"===(void 0===f?"undefined":s(f))&&f.type===p.CONTAINER_HEIGHT_SCALE_FACTOR?u.preloadBatchSize=u.containerHeight*f.amount:u.preloadBatchSize=0;var h={type:p.CONTAINER_HEIGHT_SCALE_FACTOR,amount:1},g=i&&i.type?i:h;return"number"==typeof i?u.preloadAdditionalHeight=i:"object"===(void 0===g?"undefined":s(g))&&g.type===p.CONTAINER_HEIGHT_SCALE_FACTOR?u.preloadAdditionalHeight=u.containerHeight*g.amount:u.preloadAdditionalHeight=0,Object.assign(a,u)}function a(e){return{width:"100%",height:Math.ceil(e)}}var s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},u=e("../computers/constantInfiniteComputer.js"),c=e("../computers/arrayInfiniteComputer.js"),p=e("./scaleEnum"),f=n.React||e("react"),d=e("./window");t.exports={createInfiniteComputer:i,recomputeApertureStateFromOptionsAndScrollTop:r,generateComputedProps:l,buildHeightStyle:a}}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{"../computers/arrayInfiniteComputer.js":5,"../computers/constantInfiniteComputer.js":6,"./scaleEnum":12,"./window":13,react:void 0}],12:[function(e,t,n){"use strict";t.exports={CONTAINER_HEIGHT_SCALE_FACTOR:"containerHeightScaleFactor"}},{}],13:[function(e,t,n){(function(e){"use strict";var n;n="undefined"!=typeof window?window:"undefined"!=typeof e?e:"undefined"!=typeof self?self:{},t.exports=n}).call(this,"undefined"!=typeof global?global:"undefined"!=typeof self?self:"undefined"!=typeof window?window:{})},{}]},{},[1])(1)}); \ No newline at end of file diff --git a/src/react-infinite.jsx b/src/react-infinite.jsx index 2f0ec04..f2c421d 100644 --- a/src/react-infinite.jsx +++ b/src/react-infinite.jsx @@ -132,7 +132,6 @@ class Infinite extends React.Component< scrollable: HTMLDivElement; topSpacer: HTMLDivElement; bottomSpacer: HTMLDivElement; - smoothScrollingWrapper: HTMLDivElement; loadingSpinner: HTMLDivElement; generateComputedUtilityFunctions = ( @@ -467,31 +466,31 @@ class Infinite extends React.Component< ref={c => { this.scrollable = c; }} - style={this.utils.buildScrollableStyle()} + style={Object.assign( + {}, + this.utils.buildScrollableStyle(), + infiniteScrollStyles + )} onScroll={this.utils.nodeScrollListener} + role="feed" + aria-setsize="-1" + aria-busy={this.state.isInfiniteLoading} >
{ - this.smoothScrollingWrapper = c; + this.topSpacer = c; }} - style={infiniteScrollStyles} - > -
{ - this.topSpacer = c; - }} - style={infiniteHelpers.buildHeightStyle(topSpacerHeight)} - /> - {this.computedProps.displayBottomUpwards && loadingSpinner} - {displayables} - {!this.computedProps.displayBottomUpwards && loadingSpinner} -
{ - this.bottomSpacer = c; - }} - style={infiniteHelpers.buildHeightStyle(bottomSpacerHeight)} - /> -
+ style={infiniteHelpers.buildHeightStyle(topSpacerHeight)} + /> + {this.computedProps.displayBottomUpwards && loadingSpinner} + {displayables} + {!this.computedProps.displayBottomUpwards && loadingSpinner} +
{ + this.bottomSpacer = c; + }} + style={infiniteHelpers.buildHeightStyle(bottomSpacerHeight)} + />
); }