react-easy-infinite-scroll-hook - npm Package Compare versions

Comparing version 1.9.6 to 1.9.7

dist/cjs/index.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,o=require("react");function l(t,e,o,l){return new(o||(o=Promise))((function(i,n){function r(t){try{c(l.next(t))}catch(t){n(t)}}function s(t){try{c(l.throw(t))}catch(t){n(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,s)}c((l=l.apply(t,e||[])).next())}))}exports.ScrollAxisName=void 0,(t=exports.ScrollAxisName||(exports.ScrollAxisName={})).VERTICAL="vertical",t.HORIZONTAL="horizontal",exports.ScrollDirection=void 0,(e=exports.ScrollDirection||(exports.ScrollDirection={})).UP="up",e.DOWN="down",e.LEFT="left",e.RIGHT="right";class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const l=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*l:t},this._scroll=function({scrollTop:t,scrollLeft:e}){var o;if(!(null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.scrollingElement))return;const{scrollHeight:l,scrollWidth:i}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,l)),void 0!==e&&(this._scrollingContainerRef.scrollingElement.scrollLeft=this._validateScrollValue(e,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:l}=this;if(!(null==l?void 0:l.scrollingElement)||t===l.scrollingElement.clientWidth&&e===l.scrollingElement.clientHeight)return;const{clientWidth:i,clientHeight:n,scrollHeight:r,scrollWidth:s}=l.scrollingElement;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,r,n),horizontal:this._validateScrollValue(t,s,i)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*n,horizontal:t*i}}this.state.computedScrollThreshold=c,this.state.clientWidth=i,this.state.clientHeight=n},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:l}},props:{reverse:i={}},_scrollingContainerRef:n}=this,{scrollHeight:r,scrollWidth:s,scrollLeft:c,scrollTop:h}=n.scrollingElement,{column:a,row:u}=i,d=(t,e)=>Math.abs(t)<=e,p=(t,e,o,l)=>Math.abs(t)>=Math.abs(e-o-l);return{[a?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:d(h,o),[a?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:p(h,r,t,o),[u?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:d(c,l),[u?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:p(c,s,e,l)}},this._loadByDirection=function(t,e,o){return l(this,void 0,void 0,(function*(){const{state:{isLoading:l,thresholdReached:i},props:{next:n,hasMore:r}}=this,s=t===exports.ScrollDirection.UP?exports.ScrollAxisName.VERTICAL:exports.ScrollAxisName.HORIZONTAL;if(!l){const l=r[t]&&!i[t]&&o[t],c=!l&&r[e]&&!i[e]&&o[e];if(l||c)try{const o=l?t:e;this.state.thresholdReached[o]=!0,this.state.isLoading=!0,yield n(o)}finally{setTimeout((()=>this._onLoadComplete(s)),0)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const e=this._getPossibleDirections(),o=t=>{!e[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(exports.ScrollDirection).forEach((t=>o(t))),this._loadByDirection(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN,e),this._loadByDirection(exports.ScrollDirection.LEFT,exports.ScrollDirection.RIGHT,e)},this._setRef=function(t){var e,o,l;const i={scrollingElement:null,registerEventListener:null};if(this.props.windowScroll)i.scrollingElement=document.scrollingElement,i.registerEventListener=document;else{const n=null!==(l=null!==(e=null==t?void 0:t._scrollingContainer)&&void 0!==e?e:null===(o=null==t?void 0:t.Grid)||void 0===o?void 0:o._scrollingContainer)&&void 0!==l?l:t;i.scrollingElement=n,i.registerEventListener=n}const{scrollingElement:n,registerEventListener:r}=i;if(n&&r&&("number"!=typeof n.scrollHeight||"number"!=typeof n.scrollWidth||"number"!=typeof n.scrollLeft||"number"!=typeof n.scrollTop||"number"!=typeof n.clientHeight||"number"!=typeof n.clientWidth||"function"!=typeof r.addEventListener||"function"!=typeof r.removeEventListener)||!n||!r)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=i;const s=()=>{var t;if(!(null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.scrollingElement))return;const{_scrollingContainerRef:{scrollingElement:e},props:{onScroll:o}}=this,{scrollHeight:l,scrollWidth:i,scrollLeft:n,scrollTop:r,clientHeight:s,clientWidth:c}=e;o&&o({clientHeight:s,clientWidth:c,scrollHeight:l,scrollWidth:i,scrollLeft:n,scrollTop:r}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollingElement.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollingElement.scrollWidth;const{initialScroll:c}=this.props;c&&this._scroll({scrollTop:c.top,scrollLeft:c.left}),this._onCleanup(),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",s),this.state.cleanup.push((()=>{var t,e;return null===(e=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===e?void 0:e.removeEventListener("scroll",s)})),this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement))return;const o=t===exports.ScrollAxisName.VERTICAL,{state:{rowCount:l=0,columnCount:i=0,scrollHeight:n,scrollWidth:r},props:{rowCount:s=0,columnCount:c=0,reverse:h={}},_scrollingContainerRef:a}=this,{scrollTop:u,scrollLeft:d,scrollHeight:p,scrollWidth:f,clientHeight:g,clientWidth:v}=a.scrollingElement,m=o?s:c,C=o?u:d,_=o?p:f,E=o?n:r,L=o?g:v;if((o?l:i)!==m&&Math.abs(C)<L){const t=h[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:C+(_-E)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=_,this.state[o?"rowCount":"columnCount"]=m,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:e},props:{rowCount:o,columnCount:l,hasMore:i},_scrollingContainerRef:n}=this;n&&(void 0===o&&(i.down||i.up)&&console.warn(`You provided props with "hasMore: { up: ${!!i.up}, down: ${!!i.down} }" but "rowCount" is "undefined"`),void 0===l&&(i.left||i.right)&&console.warn(`You provided props with "hasMore: { left: ${!!i.left}, right: ${!!i.right} }" but "columnCount" is "undefined"`),e||this._checkOffsetAndLoadMore())},this._onCleanup=function(){const{state:{cleanup:t}}=this;t.length&&(t.forEach((t=>t())),this.state.cleanup=[])},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.onCleanup=this._onCleanup.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{},cleanup:[]}}}const n=t=>{const e=o.useRef(null),{rowCount:l,columnCount:n,hasMore:{up:r,down:s,left:c,right:h},next:a,windowScroll:u}=t,{current:{setRef:d,onPropsChange:p,onCleanup:f}}=o.useRef(new i(t));return o.useEffect((()=>(d(u?null:e.current),f)),[e.current]),o.useEffect((()=>p(t)),[l,n,r,s,c,h,a]),e};exports.InfiniteScroll=i,exports.default=n,exports.useInfiniteScroll=n;
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t,e,o=require("react");function l(t,e,o,l){return new(o||(o=Promise))((function(i,n){function r(t){try{c(l.next(t))}catch(t){n(t)}}function s(t){try{c(l.throw(t))}catch(t){n(t)}}function c(t){var e;t.done?i(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(r,s)}c((l=l.apply(t,e||[])).next())}))}exports.ScrollAxisName=void 0,(t=exports.ScrollAxisName||(exports.ScrollAxisName={})).VERTICAL="vertical",t.HORIZONTAL="horizontal",exports.ScrollDirection=void 0,(e=exports.ScrollDirection||(exports.ScrollDirection={})).UP="up",e.DOWN="down",e.LEFT="left",e.RIGHT="right";class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const l=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*l:t},this._scroll=function({scrollTop:t,scrollLeft:e}){var o;if(!(null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.scrollingElement))return;const{scrollHeight:l,scrollWidth:i}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,l)),void 0!==e&&(this._scrollingContainerRef.scrollingElement.scrollLeft=this._validateScrollValue(e,i))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:l}=this;if(!(null==l?void 0:l.scrollingElement)||t===l.scrollingElement.clientWidth&&e===l.scrollingElement.clientHeight)return;const{clientWidth:i,clientHeight:n,scrollHeight:r,scrollWidth:s}=l.scrollingElement;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,r,n),horizontal:this._validateScrollValue(t,s,i)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*n,horizontal:t*i}}this.state.computedScrollThreshold=c,this.state.clientWidth=i,this.state.clientHeight=n},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:l}},props:{reverse:i={}},_scrollingContainerRef:n}=this,{scrollHeight:r,scrollWidth:s,scrollLeft:c,scrollTop:h}=n.scrollingElement,{column:a,row:u}=i,d=(t,e)=>Math.abs(t)<=e,p=(t,e,o,l)=>Math.abs(t)>=Math.abs(e-o-l);return{[a?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:d(h,o),[a?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:p(h,r,t,o),[u?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:d(c,l),[u?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:p(c,s,e,l)}},this._loadByDirection=function(t,e,o){return l(this,void 0,void 0,(function*(){const{state:{isLoading:l,thresholdReached:i},props:{next:n,hasMore:r}}=this,s=t===exports.ScrollDirection.UP?exports.ScrollAxisName.VERTICAL:exports.ScrollAxisName.HORIZONTAL;if(!l){const l=r[t]&&!i[t]&&o[t],c=!l&&r[e]&&!i[e]&&o[e];if(l||c)try{const o=l?t:e;this.state.thresholdReached[o]=!0,this.state.isLoading=!0,yield n(o)}finally{setTimeout((()=>this._onLoadComplete(s)),1e3)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const e=this._getPossibleDirections(),o=t=>{!e[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(exports.ScrollDirection).forEach((t=>o(t))),this._loadByDirection(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN,e),this._loadByDirection(exports.ScrollDirection.LEFT,exports.ScrollDirection.RIGHT,e)},this._setRef=function(t){var e,o,l;const i={scrollingElement:null,registerEventListener:null};if(this.props.windowScroll)i.scrollingElement=document.scrollingElement,i.registerEventListener=document;else{const n=null!==(l=null!==(e=null==t?void 0:t._scrollingContainer)&&void 0!==e?e:null===(o=null==t?void 0:t.Grid)||void 0===o?void 0:o._scrollingContainer)&&void 0!==l?l:t;i.scrollingElement=n,i.registerEventListener=n}const{scrollingElement:n,registerEventListener:r}=i;if(n&&r&&("number"!=typeof n.scrollHeight||"number"!=typeof n.scrollWidth||"number"!=typeof n.scrollLeft||"number"!=typeof n.scrollTop||"number"!=typeof n.clientHeight||"number"!=typeof n.clientWidth||"function"!=typeof r.addEventListener||"function"!=typeof r.removeEventListener)||!n||!r)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=i;const s=()=>{var t;if(!(null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.scrollingElement))return;const{_scrollingContainerRef:{scrollingElement:e},props:{onScroll:o}}=this,{scrollHeight:l,scrollWidth:i,scrollLeft:n,scrollTop:r,clientHeight:s,clientWidth:c}=e;o&&o({clientHeight:s,clientWidth:c,scrollHeight:l,scrollWidth:i,scrollLeft:n,scrollTop:r}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollingElement.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollingElement.scrollWidth;const{initialScroll:c}=this.props;c&&this._scroll({scrollTop:c.top,scrollLeft:c.left}),this._onCleanup(),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",s),this.state.cleanup.push((()=>{var t,e;return null===(e=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===e?void 0:e.removeEventListener("scroll",s)})),this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement))return;const o=t===exports.ScrollAxisName.VERTICAL,{state:{rowCount:l=0,columnCount:i=0,scrollHeight:n,scrollWidth:r},props:{rowCount:s=0,columnCount:c=0,reverse:h={}},_scrollingContainerRef:a}=this,{scrollTop:u,scrollLeft:d,scrollHeight:p,scrollWidth:f,clientHeight:g,clientWidth:m}=a.scrollingElement,v=o?s:c,C=o?u:d,_=o?p:f,L=o?n:r,E=o?g:m;if((o?l:i)!==v&&Math.abs(C)<E){const t=h[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:C+(_-L)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=_,this.state[o?"rowCount":"columnCount"]=v,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:e},props:{rowCount:o,columnCount:l,hasMore:i},_scrollingContainerRef:n}=this;n&&(void 0===o&&(i.down||i.up)&&console.warn(`You provided props with "hasMore: { up: ${!!i.up}, down: ${!!i.down} }" but "rowCount" is "undefined"`),void 0===l&&(i.left||i.right)&&console.warn(`You provided props with "hasMore: { left: ${!!i.left}, right: ${!!i.right} }" but "columnCount" is "undefined"`),e&&(t.rowCount||0)>(this.state.rowCount||0)?this._onLoadComplete(exports.ScrollAxisName.VERTICAL):e&&(t.columnCount||0)>(this.state.columnCount||0)&&this._onLoadComplete(exports.ScrollAxisName.HORIZONTAL),e||this._checkOffsetAndLoadMore())},this._onCleanup=function(){const{state:{cleanup:t}}=this;t.length&&(t.forEach((t=>t())),this.state.cleanup=[])},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.onCleanup=this._onCleanup.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{},cleanup:[]}}}const n=t=>{const e=o.useRef(null),{rowCount:l,columnCount:n,hasMore:{up:r,down:s,left:c,right:h},next:a,windowScroll:u}=t,{current:{setRef:d,onPropsChange:p,onCleanup:f}}=o.useRef(new i(t));return o.useEffect((()=>(d(u?null:e.current),f)),[e.current]),o.useEffect((()=>p(t)),[l,n,r,s,c,h,a]),e};exports.InfiniteScroll=i,exports.default=n,exports.useInfiniteScroll=n;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -1,2 +0,2 @@
-import{useRef as t,useEffect as e}from"react";function o(t,e,o,n){return new(o||(o=Promise))((function(l,i){function s(t){try{c(n.next(t))}catch(t){i(t)}}function r(t){try{c(n.throw(t))}catch(t){i(t)}}function c(t){var e;t.done?l(t.value):(e=t.value,e instanceof o?e:new o((function(t){t(e)}))).then(s,r)}c((n=n.apply(t,e||[])).next())}))}var n,l;!function(t){t.VERTICAL="vertical",t.HORIZONTAL="horizontal"}(n||(n={})),function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(l||(l={}));class i{constructor(t){this._validateScrollValue=(t,e,o)=>{const n=t<0?-1:1;return Math.abs(t)>e?null!=o?o:e*n:t},this._scroll=function({scrollTop:t,scrollLeft:e}){var o;if(!(null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.scrollingElement))return;const{scrollHeight:n,scrollWidth:l}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,n)),void 0!==e&&(this._scrollingContainerRef.scrollingElement.scrollLeft=this._validateScrollValue(e,l))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:e},props:{scrollThreshold:o=1},_scrollingContainerRef:n}=this;if(!(null==n?void 0:n.scrollingElement)||t===n.scrollingElement.clientWidth&&e===n.scrollingElement.clientHeight)return;const{clientWidth:l,clientHeight:i,scrollHeight:s,scrollWidth:r}=n.scrollingElement;let c={vertical:0,horizontal:0};if("string"==typeof o){const t=Math.abs(parseInt(o));c={vertical:this._validateScrollValue(t,s,i),horizontal:this._validateScrollValue(t,r,l)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*i,horizontal:t*l}}this.state.computedScrollThreshold=c,this.state.clientWidth=l,this.state.clientHeight=i},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:e,computedScrollThreshold:{vertical:o,horizontal:n}},props:{reverse:i={}},_scrollingContainerRef:s}=this,{scrollHeight:r,scrollWidth:c,scrollLeft:h,scrollTop:a}=s.scrollingElement,{column:u,row:d}=i,f=(t,e)=>Math.abs(t)<=e,g=(t,e,o,n)=>Math.abs(t)>=Math.abs(e-o-n);return{[u?l.DOWN:l.UP]:f(a,o),[u?l.UP:l.DOWN]:g(a,r,t,o),[d?l.RIGHT:l.LEFT]:f(h,n),[d?l.LEFT:l.RIGHT]:g(h,c,e,n)}},this._loadByDirection=function(t,e,i){return o(this,void 0,void 0,(function*(){const{state:{isLoading:o,thresholdReached:s},props:{next:r,hasMore:c}}=this,h=t===l.UP?n.VERTICAL:n.HORIZONTAL;if(!o){const o=c[t]&&!s[t]&&i[t],n=!o&&c[e]&&!s[e]&&i[e];if(o||n)try{const n=o?t:e;this.state.thresholdReached[n]=!0,this.state.isLoading=!0,yield r(n)}finally{setTimeout((()=>this._onLoadComplete(h)),0)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const e=this._getPossibleDirections(),o=t=>{!e[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(l).forEach((t=>o(t))),this._loadByDirection(l.UP,l.DOWN,e),this._loadByDirection(l.LEFT,l.RIGHT,e)},this._setRef=function(t){var e,o,n;const l={scrollingElement:null,registerEventListener:null};if(this.props.windowScroll)l.scrollingElement=document.scrollingElement,l.registerEventListener=document;else{const i=null!==(n=null!==(e=null==t?void 0:t._scrollingContainer)&&void 0!==e?e:null===(o=null==t?void 0:t.Grid)||void 0===o?void 0:o._scrollingContainer)&&void 0!==n?n:t;l.scrollingElement=i,l.registerEventListener=i}const{scrollingElement:i,registerEventListener:s}=l;if(i&&s&&("number"!=typeof i.scrollHeight||"number"!=typeof i.scrollWidth||"number"!=typeof i.scrollLeft||"number"!=typeof i.scrollTop||"number"!=typeof i.clientHeight||"number"!=typeof i.clientWidth||"function"!=typeof s.addEventListener||"function"!=typeof s.removeEventListener)||!i||!s)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=l;const r=()=>{var t;if(!(null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.scrollingElement))return;const{_scrollingContainerRef:{scrollingElement:e},props:{onScroll:o}}=this,{scrollHeight:n,scrollWidth:l,scrollLeft:i,scrollTop:s,clientHeight:r,clientWidth:c}=e;o&&o({clientHeight:r,clientWidth:c,scrollHeight:n,scrollWidth:l,scrollLeft:i,scrollTop:s}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollingElement.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollingElement.scrollWidth;const{initialScroll:c}=this.props;c&&this._scroll({scrollTop:c.top,scrollLeft:c.left}),this._onCleanup(),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",r),this.state.cleanup.push((()=>{var t,e;return null===(e=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===e?void 0:e.removeEventListener("scroll",r)})),this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement))return;const o=t===n.VERTICAL,{state:{rowCount:l=0,columnCount:i=0,scrollHeight:s,scrollWidth:r},props:{rowCount:c=0,columnCount:h=0,reverse:a={}},_scrollingContainerRef:u}=this,{scrollTop:d,scrollLeft:f,scrollHeight:g,scrollWidth:p,clientHeight:v,clientWidth:m}=u.scrollingElement,C=o?c:h,_=o?d:f,L=o?g:p,E=o?s:r,R=o?v:m;if((o?l:i)!==C&&Math.abs(_)<R){const t=a[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:_+(L-E)*t})}this.state.isLoading=!1,this.state[o?"scrollHeight":"scrollWidth"]=L,this.state[o?"rowCount":"columnCount"]=C,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:e},props:{rowCount:o,columnCount:n,hasMore:l},_scrollingContainerRef:i}=this;i&&(void 0===o&&(l.down||l.up)&&console.warn(`You provided props with "hasMore: { up: ${!!l.up}, down: ${!!l.down} }" but "rowCount" is "undefined"`),void 0===n&&(l.left||l.right)&&console.warn(`You provided props with "hasMore: { left: ${!!l.left}, right: ${!!l.right} }" but "columnCount" is "undefined"`),e||this._checkOffsetAndLoadMore())},this._onCleanup=function(){const{state:{cleanup:t}}=this;t.length&&(t.forEach((t=>t())),this.state.cleanup=[])},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.onCleanup=this._onCleanup.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{},cleanup:[]}}}const s=o=>{const n=t(null),{rowCount:l,columnCount:s,hasMore:{up:r,down:c,left:h,right:a},next:u,windowScroll:d}=o,{current:{setRef:f,onPropsChange:g,onCleanup:p}}=t(new i(o));return e((()=>(f(d?null:n.current),p)),[n.current]),e((()=>g(o)),[l,s,r,c,h,a,u]),n};export{i as InfiniteScroll,n as ScrollAxisName,l as ScrollDirection,s as default,s as useInfiniteScroll};
+import{useRef as t,useEffect as o}from"react";function e(t,o,e,n){return new(e||(e=Promise))((function(l,i){function s(t){try{c(n.next(t))}catch(t){i(t)}}function r(t){try{c(n.throw(t))}catch(t){i(t)}}function c(t){var o;t.done?l(t.value):(o=t.value,o instanceof e?o:new e((function(t){t(o)}))).then(s,r)}c((n=n.apply(t,o||[])).next())}))}var n,l;!function(t){t.VERTICAL="vertical",t.HORIZONTAL="horizontal"}(n||(n={})),function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(l||(l={}));class i{constructor(t){this._validateScrollValue=(t,o,e)=>{const n=t<0?-1:1;return Math.abs(t)>o?null!=e?e:o*n:t},this._scroll=function({scrollTop:t,scrollLeft:o}){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement))return;const{scrollHeight:n,scrollWidth:l}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,n)),void 0!==o&&(this._scrollingContainerRef.scrollingElement.scrollLeft=this._validateScrollValue(o,l))},this._computeThreshold=function(){const{state:{clientWidth:t,clientHeight:o},props:{scrollThreshold:e=1},_scrollingContainerRef:n}=this;if(!(null==n?void 0:n.scrollingElement)||t===n.scrollingElement.clientWidth&&o===n.scrollingElement.clientHeight)return;const{clientWidth:l,clientHeight:i,scrollHeight:s,scrollWidth:r}=n.scrollingElement;let c={vertical:0,horizontal:0};if("string"==typeof e){const t=Math.abs(parseInt(e));c={vertical:this._validateScrollValue(t,s,i),horizontal:this._validateScrollValue(t,r,l)}}else{const t=e>1?1:e<=0?.1:e;c={vertical:t*i,horizontal:t*l}}this.state.computedScrollThreshold=c,this.state.clientWidth=l,this.state.clientHeight=i},this._getPossibleDirections=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:o,computedScrollThreshold:{vertical:e,horizontal:n}},props:{reverse:i={}},_scrollingContainerRef:s}=this,{scrollHeight:r,scrollWidth:c,scrollLeft:h,scrollTop:a}=s.scrollingElement,{column:u,row:d}=i,f=(t,o)=>Math.abs(t)<=o,g=(t,o,e,n)=>Math.abs(t)>=Math.abs(o-e-n);return{[u?l.DOWN:l.UP]:f(a,e),[u?l.UP:l.DOWN]:g(a,r,t,e),[d?l.RIGHT:l.LEFT]:f(h,n),[d?l.LEFT:l.RIGHT]:g(h,c,o,n)}},this._loadByDirection=function(t,o,i){return e(this,void 0,void 0,(function*(){const{state:{isLoading:e,thresholdReached:s},props:{next:r,hasMore:c}}=this,h=t===l.UP?n.VERTICAL:n.HORIZONTAL;if(!e){const e=c[t]&&!s[t]&&i[t],n=!e&&c[o]&&!s[o]&&i[o];if(e||n)try{const n=e?t:o;this.state.thresholdReached[n]=!0,this.state.isLoading=!0,yield r(n)}finally{setTimeout((()=>this._onLoadComplete(h)),1e3)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const o=this._getPossibleDirections(),e=t=>{!o[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1)};Object.values(l).forEach((t=>e(t))),this._loadByDirection(l.UP,l.DOWN,o),this._loadByDirection(l.LEFT,l.RIGHT,o)},this._setRef=function(t){var o,e,n;const l={scrollingElement:null,registerEventListener:null};if(this.props.windowScroll)l.scrollingElement=document.scrollingElement,l.registerEventListener=document;else{const i=null!==(n=null!==(o=null==t?void 0:t._scrollingContainer)&&void 0!==o?o:null===(e=null==t?void 0:t.Grid)||void 0===e?void 0:e._scrollingContainer)&&void 0!==n?n:t;l.scrollingElement=i,l.registerEventListener=i}const{scrollingElement:i,registerEventListener:s}=l;if(i&&s&&("number"!=typeof i.scrollHeight||"number"!=typeof i.scrollWidth||"number"!=typeof i.scrollLeft||"number"!=typeof i.scrollTop||"number"!=typeof i.clientHeight||"number"!=typeof i.clientWidth||"function"!=typeof s.addEventListener||"function"!=typeof s.removeEventListener)||!i||!s)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=l;const r=()=>{var t;if(!(null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.scrollingElement))return;const{_scrollingContainerRef:{scrollingElement:o},props:{onScroll:e}}=this,{scrollHeight:n,scrollWidth:l,scrollLeft:i,scrollTop:s,clientHeight:r,clientWidth:c}=o;e&&e({clientHeight:r,clientWidth:c,scrollHeight:n,scrollWidth:l,scrollLeft:i,scrollTop:s}),this._checkOffsetAndLoadMore()};this.state.rowCount=this.props.rowCount,this.state.columnCount=this.props.columnCount,this.state.scrollHeight=this._scrollingContainerRef.scrollingElement.scrollHeight,this.state.scrollWidth=this._scrollingContainerRef.scrollingElement.scrollWidth;const{initialScroll:c}=this.props;c&&this._scroll({scrollTop:c.top,scrollLeft:c.left}),this._onCleanup(),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",r),this.state.cleanup.push((()=>{var t,o;return null===(o=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===o?void 0:o.removeEventListener("scroll",r)})),this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var o;if(!(null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.scrollingElement))return;const e=t===n.VERTICAL,{state:{rowCount:l=0,columnCount:i=0,scrollHeight:s,scrollWidth:r},props:{rowCount:c=0,columnCount:h=0,reverse:a={}},_scrollingContainerRef:u}=this,{scrollTop:d,scrollLeft:f,scrollHeight:g,scrollWidth:p,clientHeight:v,clientWidth:C}=u.scrollingElement,m=e?c:h,_=e?d:f,L=e?g:p,E=e?s:r,R=e?v:C;if((e?l:i)!==m&&Math.abs(_)<R){const t=a[e?"column":"row"]?-1:1;this._scroll({["scroll"+(e?"Top":"Left")]:_+(L-E)*t})}this.state.isLoading=!1,this.state[e?"scrollHeight":"scrollWidth"]=L,this.state[e?"rowCount":"columnCount"]=m,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:o},props:{rowCount:e,columnCount:l,hasMore:i},_scrollingContainerRef:s}=this;s&&(void 0===e&&(i.down||i.up)&&console.warn(`You provided props with "hasMore: { up: ${!!i.up}, down: ${!!i.down} }" but "rowCount" is "undefined"`),void 0===l&&(i.left||i.right)&&console.warn(`You provided props with "hasMore: { left: ${!!i.left}, right: ${!!i.right} }" but "columnCount" is "undefined"`),o&&(t.rowCount||0)>(this.state.rowCount||0)?this._onLoadComplete(n.VERTICAL):o&&(t.columnCount||0)>(this.state.columnCount||0)&&this._onLoadComplete(n.HORIZONTAL),o||this._checkOffsetAndLoadMore())},this._onCleanup=function(){const{state:{cleanup:t}}=this;t.length&&(t.forEach((t=>t())),this.state.cleanup=[])},this.setRef=this._setRef.bind(this),this.onPropsChange=this._onPropsChange.bind(this),this.onCleanup=this._onCleanup.bind(this),this.props=t,this.state={rowCount:t.rowCount,columnCount:t.columnCount,scrollHeight:0,scrollWidth:0,clientHeight:0,clientWidth:0,isLoading:!1,computedScrollThreshold:{vertical:0,horizontal:0},thresholdReached:{},cleanup:[]}}}const s=e=>{const n=t(null),{rowCount:l,columnCount:s,hasMore:{up:r,down:c,left:h,right:a},next:u,windowScroll:d}=e,{current:{setRef:f,onPropsChange:g,onCleanup:p}}=t(new i(e));return o((()=>(f(d?null:n.current),p)),[n.current]),o((()=>g(e)),[l,s,r,c,h,a,u]),n};export{i as InfiniteScroll,n as ScrollAxisName,l as ScrollDirection,s as default,s as useInfiniteScroll};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.9.6",
+  "version": "1.9.7",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "A react hook for creating simple, fast and lightweight components with infinite scrolling in any direction, supporting both windowed and scrollable elements.",

No alert changes

Improved metrics

Total package byte prevSize

119174

increased by1.18%

Lines of code

360

increased by0.56%

No dependency changes