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

Comparing version 1.3.5 to 1.3.6

dist/cjs/index.js

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

dist/esm/index.js

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

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.3.5",
+  "version": "1.3.6",
   "license": "MIT",
-  "description": "This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.",
+  "description": "A react hook for creating simple, fast and lightweight components with infinite scrolling in any direction, supporting both windowed and scrollable elements.",
   "author": "Vadim Rogov <[e-mail]>",
@@ -7,0 +7,0 @@ "main": "dist/cjs/index.js",

README.md

@@ -17,3 +17,3 @@ # react-easy-infinite-scroll-hook
 - ⏬ **Universal** - Ability to use all types of scrollable elements or any [react-virtualized](https://www.npmjs.com/package/react-virtualized) components
-- 📦 **Support for all loading directions** - You can scroll the component indefinitely in the direction you want or all at once (`up`, `down`, `left`, `right`)
+- 📦 **Support for all loading directions** - You can infinitely scroll a component in any direction or in all directions at once (`up`, `down`, `left`, `right`)
 - 📏 **No need to specify heights** - No need to pass the dimensions of the component, scrollbar or element
@@ -44,2 +44,4 @@ - 💬 **Support for "chat history"** - Reverse mode includes
 
+You can create infinite scrolling in any direction and in any pair, for example: `up-down`, `down-right`, `etc.` and even `all` at once.
+
 [![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-6w9szb)
@@ -86,5 +88,6 @@
 
-| List |            [![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-virtualized-mdfpyu)             |
-| :--: | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
-| Grid | [![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-virtualized-grid-rlmfd9?file=/src/App.tsx) |
+| Component | Description | Link |
+| :--: | -- | :-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: |
+| List | Virtualized `List` component with infinite scroll | [![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-virtualized-mdfpyu)             |
+| Grid | Virtualized `Grid` component with infinite scroll `down` and `right` | [![Edit useInfiniteScroll](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/react-easy-infinite-scroll-hook-virtualized-grid-rlmfd9?file=/src/App.tsx) |
 
@@ -134,12 +137,12 @@ <br />
 
-| Name            | Required  | Description                                                                                                                                                                                      | Type             | Default Value |
-| --------------- | --------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------- | ------------- |
-| next            | Yes       | A callback when more items are requested by the user. Receives a single parameter specifying the direction to load e.g. `(direction) => Promise<void>`                                             | Function         |               |
-| hasMore         | Yes       | Whether there are more items to be loaded. Expect object with directions to load `{ up: false, down: false, left: false, right: false }`                                                         | object           |               |
-| rowCount        | Condition | Number of items in a `vertical` list (scroll axis `Y`). Required if you are using `vertical` scroll.                                                                                             | number           |               |
-| columnCount     | Condition | Number of items in a `horizontal` list (scroll axis `X`). Required if you are using `horizontal` scroll.                                                                                         | number           |               |
-| onScroll        |           | The callback is called when the container is scrolled: `({ clientHeight: number, scrollHeight: number, scrollTop: number, clientWidth: number, scrollWidth: number, scrollLeft: number }) => void` | Function         |               |
-| initialScroll   |           | The initial scroll position of the element, which is applied after the ref has been initialized                                                                                                  | object           |               |
-| reverse         |           | The direction of the scroll axis is used to create scrolling in the opposite direction, for example when using the CSS style `flex-direction: 'row-reverse'`                                     | object           |               |
-| scrollThreshold |           | The threshold at which the next function is called. It can be specified in pixels from the scrollbar value, for example `'200px'` and as a percentage of the container size `from 0.1 to 1` (`1` is `100%`)           | number or string | 1             |
+| Name            | Required  | Description                                                                                                                                                                                                 | Type             | Default Value |
+| --------------- | --------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------- | ------------- |
+| next            | Yes       | A callback when more items are requested by the user. Receives a single parameter specifying the direction to load e.g. `(direction) => Promise<void>`                                                      | Function         |               |
+| hasMore         | Yes       | If marked "true" in the specified direction, it will try to load more items if the threshold is reached. Expect object with directions to load `{ up: false, down: false, left: false, right: false }`      | object           |               |
+| rowCount        | Condition | Number of items in a `vertical` list (scroll axis `Y`). Required if you are using `vertical` scroll.                                                                                                        | number           |               |
+| columnCount     | Condition | Number of items in a `horizontal` list (scroll axis `X`). Required if you are using `horizontal` scroll.                                                                                                    | number           |               |
+| onScroll        |           | The callback is called when the container is scrolled: `({ clientHeight: number, scrollHeight: number, scrollTop: number, clientWidth: number, scrollWidth: number, scrollLeft: number }) => void`          | Function         |               |
+| initialScroll   |           | The initial scroll position of the element, which is applied after the ref has been initialized                                                                                                             | object           |               |
+| reverse         |           | The direction of the scroll axis is used to create scrolling in the opposite direction, for example when using the CSS style `flex-direction: 'row-reverse'`                                                | object           |               |
+| scrollThreshold |           | The threshold at which the next function is called. It can be specified in pixels from the scrollbar value, for example `'200px'` and as a percentage of the container size `from 0.1 to 1` (`1` is `100%`) | number or string | 1             |
 
@@ -146,0 +149,0 @@ ## Friends

No alert changes

Improved metrics

Total package byte prevSize

77604

increased by0.54%

Number of lines in readme file

205

increased by1.49%

No dependency changes