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

Comparing version 1.2.6 to 1.3.0

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,l){function r(t){try{c(i.next(t))}catch(t){l(t)}}function n(t){try{c(i.throw(t))}catch(t){l(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(r,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:l,scrollHeight:r,scrollWidth:n}=i;let c={vertical:0,horizontal:0};if("string"==typeof e){const t=Math.abs(parseInt(e));c={vertical:this._validateScrollValue(t,r,l),horizontal:this._validateScrollValue(t,n,s)}}else{const t=e>1?1:e<=0?.1:e;c={vertical:t*l,horizontal:t*s}}this.state.computedScrollThreshold=c,this.state.clientWidth=s,this.state.clientHeight=l},this._getPossibleDirection=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:o,computedScrollThreshold:{vertical:e,horizontal:i}},props:{reverse:s={}},_scrollingContainerRef:l}=this,{scrollHeight:r,scrollWidth:n,scrollLeft:c,scrollTop:a}=l,{vertical:h,horizontal:d}=s,f=(t,o)=>Math.abs(t)<=o,u=(t,o,e,i)=>Math.abs(t)>=Math.abs(o-e-i);return{[h?exports.ScrollDirection.DOWN:exports.ScrollDirection.UP]:f(a,e),[h?exports.ScrollDirection.UP:exports.ScrollDirection.DOWN]:u(a,r,t,e),[d?exports.ScrollDirection.RIGHT:exports.ScrollDirection.LEFT]:f(c,i),[d?exports.ScrollDirection.LEFT:exports.ScrollDirection.RIGHT]:u(c,n,o,i)}},this._checkOffsetAndLoadMore=function(){const{state:{isLoading:{start:t}},props:{next:o,hasMore:i},_scrollingContainerRef:s}=this;if(!s)return;const l=this._getPossibleDirection(),r=(s,r)=>e(this,void 0,void 0,(function*(){const e=s===exports.ScrollDirection.UP?"vertical":"horizontal";if(!t[e]&&!t[e]){const t=i[s]&&l[s],n=!t&&i[r]&&l[r];if(t||n)try{const i=t?s:r;this.state.isLoading.start[e]=!0,yield o(i)}finally{this.state.isLoading.end[e]=!0}}}));r(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN),r(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 l=()=>{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:r}=this.props;r&&this._scroll({scrollTop:r.top,scrollLeft:r.left}),this._scrollingContainerRef.addEventListener("scroll",l),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",l)},this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{rowCount:o=0,columnCount:e=0,isLoading:{start:i,end:s}},props:{rowCount:l=0,columnCount:r=0,reverse:n={}},_scrollingContainerRef:c}=this;if(!c)return;const{scrollTop:a,scrollLeft:h,scrollHeight:d,scrollWidth:f,clientHeight:u,clientWidth:p}=c,{vertical:g,horizontal:v}=n,_=(t,o,e,i,s,l,r,n,c,a)=>{const h=c.start&&c.end;if(e!==i&&h&&Math.abs(t)<o){r(t+(l-s)*(a?-1:1))}h&&n()};_(a,u,o,l,this.state.scrollHeight,d,(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},g),_(h,p,e,r,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},v),this.state.scrollHeight=d,this.state.rowCount=l,this.state.scrollWidth=f,this.state.columnCount=r,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:l,down:r,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,l,r,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,l){function r(t){try{c(i.next(t))}catch(t){l(t)}}function n(t){try{c(i.throw(t))}catch(t){l(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(r,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:l,scrollHeight:r,scrollWidth:n}=i;let c={vertical:0,horizontal:0};if("string"==typeof e){const t=Math.abs(parseInt(e));c={vertical:this._validateScrollValue(t,r,l),horizontal:this._validateScrollValue(t,n,s)}}else{const t=e>1?1:e<=0?.1:e;c={vertical:t*l,horizontal:t*s}}this.state.computedScrollThreshold=c,this.state.clientWidth=s,this.state.clientHeight=l},this._getPossibleDirection=function(){this._computeThreshold();const{state:{clientHeight:t,clientWidth:o,computedScrollThreshold:{vertical:e,horizontal:i}},props:{reverse:s={}},_scrollingContainerRef:l}=this,{scrollHeight:r,scrollWidth:n,scrollLeft:c,scrollTop:a}=l,{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,r,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 l=this._getPossibleDirection(),r=(s,r)=>e(this,void 0,void 0,(function*(){const e=s===exports.ScrollDirection.UP?"vertical":"horizontal";if(!t[e]&&!t[e]){const t=i[s]&&l[s],n=!t&&i[r]&&l[r];if(t||n)try{const i=t?s:r;this.state.isLoading.start[e]=!0,yield o(i)}finally{this.state.isLoading.end[e]=!0}}}));r(exports.ScrollDirection.UP,exports.ScrollDirection.DOWN),r(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 l=()=>{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:r}=this.props;r&&this._scroll({scrollTop:r.top,scrollLeft:r.left}),this._scrollingContainerRef.addEventListener("scroll",l),this.onCleanup=()=>{var t;return null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.removeEventListener("scroll",l)},this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{rowCount:o=0,columnCount:e=0,isLoading:{start:i,end:s}},props:{rowCount:l=0,columnCount:r=0,reverse:n={}},_scrollingContainerRef:c}=this;if(!c)return;const{scrollTop:a,scrollLeft:h,scrollHeight:d,scrollWidth:u,clientHeight:f,clientWidth:p}=c,{column:g,row:v}=n,_=(t,o,e,i,s,l,r,n,c,a)=>{const h=c.start&&c.end;if(e!==i&&h&&Math.abs(t)<o){r(t+(l-s)*(a?-1:1))}h&&n()};_(a,f,o,l,this.state.scrollHeight,d,(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},g),_(h,p,e,r,this.state.scrollWidth,u,(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},v),this.state.scrollHeight=d,this.state.rowCount=l,this.state.scrollWidth=u,this.state.columnCount=r,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:l,down:r,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,l,r,n,c]),{setRef:a}};
 //# sourceMappingURL=index.js.map

dist/cjs/types/types.d.ts

@@ -51,3 +51,6 @@ export interface ClientSize {
     };
-    reverse?: ScrollAxis<boolean>;
+    reverse?: {
+        column?: boolean;
+        row?: boolean;
+    };
 };
@@ -54,0 +57,0 @@ export interface UseInfiniteScrollResult {

dist/esm/index.js

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

dist/esm/types/types.d.ts

@@ -51,3 +51,6 @@ export interface ClientSize {
     };
-    reverse?: ScrollAxis<boolean>;
+    reverse?: {
+        column?: boolean;
+        row?: boolean;
+    };
 };
@@ -54,0 +57,0 @@ export interface UseInfiniteScrollResult {

dist/index.d.ts

@@ -51,3 +51,6 @@ interface ClientSize {
     };
-    reverse?: ScrollAxis<boolean>;
+    reverse?: {
+        column?: boolean;
+        row?: boolean;
+    };
 };
@@ -54,0 +57,0 @@ interface UseInfiniteScrollResult {

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.2.6",
+  "version": "1.3.0",
   "license": "MIT",
@@ -5,0 +5,0 @@ "description": "This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.",

README.md

@@ -11,3 +11,2 @@ # react-easy-infinite-scroll-hook
 
-
 A hook that will save you from endless scrolling problems! Infinite scrolling that really works and is very easy to integrate!
@@ -32,3 +31,2 @@ This hook allows you to create simple, lightweight components with infinite scrolling in all directions, supporting both windowed and scrollable elements.
 
-
 ## Install
@@ -149,3 +147,3 @@
 
-> Yes, just pass `reverse: { vertical: true }` to props for `flex-direction: 'column-reverse'` or `reverse: { horizontal: true }` for `flex-direction: 'row-reverse'`.
+> Yes, just pass `reverse: { column: true }` to props for `flex-direction: 'column-reverse'` or `reverse: { row: true }` for `flex-direction: 'row-reverse'`.
 
@@ -178,6 +176,3 @@ ### How to use it with `react-virtualized` `MultiGrid` component?
     <div>
-      <MultiGrid
-        ref={selectRef}
-        {...props}
-       />
+      <MultiGrid ref={selectRef} {...props} />
       {isLoading && <div>Loading...</div>}
@@ -189,5 +184,9 @@ </div>
 
+## Contributions
+
+Learn how to [contribute](https://github.com/vdmrgv/react-easy-infinite-scroll-hook/blob/main/CONTRIBUTING.md)
+
 ## License
 
-MIT © [vdmrgv](https://github.com/vdmrgv)
+[MIT](https://github.com/vdmrgv/react-easy-infinite-scroll-hook/blob/main/LICENSE) © [vdmrgv](https://github.com/vdmrgv)
 
@@ -194,0 +193,0 @@ [package-url]: https://npmjs.org/package/react-easy-infinite-scroll-hook

No alert changes

Improved metrics

Total package byte prevSize

75519

increased by0.38%

Lines of code

311

increased by2.64%

Worsened metrics

Number of lines in readme file

196

decreased by-0.51%

No dependency changes