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

Comparing version 1.4.0 to 1.4.1

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

dist/cjs/types/InfiniteScroll.d.ts

@@ -1,2 +0,2 @@
-import { InfiniteScrollState, ScrollingContainerRef, ScrollOffsetValues, InfiniteScrollProps, UseInfiniteScrollProps, ScrollPosition } from './types';
+import { InfiniteScrollState, ScrollDirection, ScrollingContainerRef, ScrollOffsetValues, InfiniteScrollProps, UseInfiniteScrollProps, ScrollPosition, ScrollAxisName } from './types';
 declare class InfiniteScroll {
@@ -11,9 +11,11 @@ props: InfiniteScrollProps;
     _computeThreshold: (this: InfiniteScroll) => void;
-    _getPossibleDirection: (this: InfiniteScroll) => Required<ScrollOffsetValues>;
+    _getPossibleDirections: (this: InfiniteScroll) => Required<ScrollOffsetValues>;
+    _loadByDirection: (this: InfiniteScroll, direction1: ScrollDirection, direction2: ScrollDirection, offset: Required<ScrollOffsetValues>) => Promise<void>;
     _checkOffsetAndLoadMore: (this: InfiniteScroll) => void;
     _setRef: (this: InfiniteScroll, ref: any) => void;
-    _onPropsChange: (this: InfiniteScroll, props?: UseInfiniteScrollProps) => void;
+    _onLoadComplete: (this: InfiniteScroll, axis: `${ScrollAxisName}`) => void;
+    _onPropsChange: (this: InfiniteScroll, props: UseInfiniteScrollProps) => void;
     setRef: (ref: any) => void;
-    onPropsChange: (props?: UseInfiniteScrollProps | undefined) => void;
+    onPropsChange: (props: UseInfiniteScrollProps) => void;
 }
 export default InfiniteScroll;

dist/cjs/types/types.d.ts

@@ -17,5 +17,9 @@ export interface ClientSize {
 }
+export declare enum ScrollAxisName {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 export interface ScrollAxis<T> {
-    vertical?: T;
-    horizontal?: T;
+    [ScrollAxisName.VERTICAL]?: T;
+    [ScrollAxisName.HORIZONTAL]?: T;
 }
@@ -22,0 +26,0 @@ export declare enum ScrollDirection {

dist/esm/index.js

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

dist/esm/types/InfiniteScroll.d.ts

@@ -1,2 +0,2 @@
-import { InfiniteScrollState, ScrollingContainerRef, ScrollOffsetValues, InfiniteScrollProps, UseInfiniteScrollProps, ScrollPosition } from './types';
+import { InfiniteScrollState, ScrollDirection, ScrollingContainerRef, ScrollOffsetValues, InfiniteScrollProps, UseInfiniteScrollProps, ScrollPosition, ScrollAxisName } from './types';
 declare class InfiniteScroll {
@@ -11,9 +11,11 @@ props: InfiniteScrollProps;
     _computeThreshold: (this: InfiniteScroll) => void;
-    _getPossibleDirection: (this: InfiniteScroll) => Required<ScrollOffsetValues>;
+    _getPossibleDirections: (this: InfiniteScroll) => Required<ScrollOffsetValues>;
+    _loadByDirection: (this: InfiniteScroll, direction1: ScrollDirection, direction2: ScrollDirection, offset: Required<ScrollOffsetValues>) => Promise<void>;
     _checkOffsetAndLoadMore: (this: InfiniteScroll) => void;
     _setRef: (this: InfiniteScroll, ref: any) => void;
-    _onPropsChange: (this: InfiniteScroll, props?: UseInfiniteScrollProps) => void;
+    _onLoadComplete: (this: InfiniteScroll, axis: `${ScrollAxisName}`) => void;
+    _onPropsChange: (this: InfiniteScroll, props: UseInfiniteScrollProps) => void;
     setRef: (ref: any) => void;
-    onPropsChange: (props?: UseInfiniteScrollProps | undefined) => void;
+    onPropsChange: (props: UseInfiniteScrollProps) => void;
 }
 export default InfiniteScroll;

dist/esm/types/types.d.ts

@@ -17,5 +17,9 @@ export interface ClientSize {
 }
+export declare enum ScrollAxisName {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 export interface ScrollAxis<T> {
-    vertical?: T;
-    horizontal?: T;
+    [ScrollAxisName.VERTICAL]?: T;
+    [ScrollAxisName.HORIZONTAL]?: T;
 }
@@ -22,0 +26,0 @@ export declare enum ScrollDirection {

dist/index.d.ts

@@ -17,5 +17,9 @@ interface ClientSize {
 }
+declare enum ScrollAxisName {
+    VERTICAL = "vertical",
+    HORIZONTAL = "horizontal"
+}
 interface ScrollAxis<T> {
-    vertical?: T;
-    horizontal?: T;
+    [ScrollAxisName.VERTICAL]?: T;
+    [ScrollAxisName.HORIZONTAL]?: T;
 }
@@ -75,10 +79,12 @@ declare enum ScrollDirection {
     _computeThreshold: (this: InfiniteScroll) => void;
-    _getPossibleDirection: (this: InfiniteScroll) => Required<ScrollOffsetValues>;
+    _getPossibleDirections: (this: InfiniteScroll) => Required<ScrollOffsetValues>;
+    _loadByDirection: (this: InfiniteScroll, direction1: ScrollDirection, direction2: ScrollDirection, offset: Required<ScrollOffsetValues>) => Promise<void>;
     _checkOffsetAndLoadMore: (this: InfiniteScroll) => void;
     _setRef: (this: InfiniteScroll, ref: any) => void;
-    _onPropsChange: (this: InfiniteScroll, props?: UseInfiniteScrollProps) => void;
+    _onLoadComplete: (this: InfiniteScroll, axis: `${ScrollAxisName}`) => void;
+    _onPropsChange: (this: InfiniteScroll, props: UseInfiniteScrollProps) => void;
     setRef: (ref: any) => void;
-    onPropsChange: (props?: UseInfiniteScrollProps | undefined) => void;
+    onPropsChange: (props: UseInfiniteScrollProps) => void;
 }
 
-export { ClientSize, DatasetLength, EventListenerFn, InfiniteScroll, InfiniteScrollProps, InfiniteScrollState, ScrollAxis, ScrollDirection, ScrollDirectionState, ScrollOffsetValues, ScrollParams, ScrollPosition, ScrollSize, ScrollingContainerRef, SetRefFn, UseInfiniteScrollProps, UseInfiniteScrollResult, useInfiniteScroll as default };
+export { ClientSize, DatasetLength, EventListenerFn, InfiniteScroll, InfiniteScrollProps, InfiniteScrollState, ScrollAxis, ScrollAxisName, ScrollDirection, ScrollDirectionState, ScrollOffsetValues, ScrollParams, ScrollPosition, ScrollSize, ScrollingContainerRef, SetRefFn, UseInfiniteScrollProps, UseInfiniteScrollResult, useInfiniteScroll as default };

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.4.0",
+  "version": "1.4.1",
   "license": "MIT",
@@ -21,3 +21,4 @@ "description": "A react hook for creating simple, fast and lightweight components with infinite scrolling in any direction, supporting both windowed and scrollable elements.",
     "ts-check": "tsc -p tsconfig.json --noEmit",
-    "test": "jest"
+    "test": "jest",
+    "test:coverage": "yarn test --coverage"
   },
@@ -24,0 +25,0 @@ "lint-staged": {

No alert changes

Improved metrics

Total package byte prevSize

80478

increased by1.87%

Lines of code

338

increased by5.96%

No dependency changes