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

Comparing version 1.14.0 to 1.15.0

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

dist/cjs/InfiniteScroll.d.ts

@@ -11,6 +11,6 @@ import { InfiniteScrollState, ScrollDirection, ScrollingContainerRef, ScrollOffsetValues, InfiniteScrollProps, UseInfiniteScrollProps, ScrollPosition, ScrollAxisName, ElementRef } from './types';
     _getPossibleDirections: (this: InfiniteScroll, offset?: number) => Required<ScrollOffsetValues>;
-    _getScreenOffset: (this: InfiniteScroll, isVertical: boolean) => void;
     _loadByDirection: (this: InfiniteScroll, direction1: ScrollDirection.UP | ScrollDirection.LEFT, direction2: ScrollDirection.DOWN | ScrollDirection.RIGHT, offset: Required<ScrollOffsetValues>) => Promise<void>;
     _checkOffsetAndLoadMore: (this: InfiniteScroll) => void;
     _setRef: (this: InfiniteScroll, ref: ElementRef | null) => void;
+    _resetThreshold: (this: InfiniteScroll, direction: ScrollDirection, offset?: number, hardReset?: boolean) => void;
     _onLoadComplete: (this: InfiniteScroll, axis: ScrollAxisName) => void;
@@ -17,0 +17,0 @@ _onPropsChange: (this: InfiniteScroll, props: UseInfiniteScrollProps) => void;

dist/cjs/types.d.ts

@@ -34,3 +34,3 @@ /// <reference types="react" />
 export declare type ScrollParams = ScrollSize & ScrollPosition & ClientSize;
-export declare type EventListenerFn = (type: 'scroll', callback: () => void) => void;
+export declare type EventListenerFn = (type: 'scroll' | 'mouseup', callback: () => void) => void;
 export declare type SetRefFn = (ref: any) => void;
@@ -37,0 +37,0 @@ export declare type ScrollingElementRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize>;

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(t){this._computeThreshold();const{state:{clientHeight:e,clientWidth:o,computedScrollThreshold:{vertical:n,horizontal:i}},props:{reverse:s={}},_scrollingContainerRef:r}=this,{scrollHeight:c,scrollWidth:h,scrollLeft:a,scrollTop:u}=r.scrollingElement,{column:d,row:f}=s,g=(t,e)=>Math.abs(t)<=e,p=(t,e,o,n)=>Math.abs(t)>=Math.abs(e-o-n);return{[d?l.DOWN:l.UP]:g(u,null!=t?t:n),[d?l.UP:l.DOWN]:p(u,c,e,null!=t?t:n),[f?l.RIGHT:l.LEFT]:g(a,null!=t?t:i),[f?l.LEFT:l.RIGHT]:p(a,h,o,null!=t?t:i)}},this._getScreenOffset=function(t){const e=this._getPossibleDirections(0),{state:{clientHeight:o,clientWidth:n,computedScrollThreshold:{vertical:i,horizontal:s}},props:{reverse:r={}},_scrollingContainerRef:c}=this,{scrollHeight:h,scrollWidth:a}=c.scrollingElement,{column:u,row:d}=r,f=(t,e)=>t*(e?-1.1:1.1),g=(t,e,o,n)=>t-e-o*(n?-1.1:1.1),p={[u?l.DOWN:l.UP]:f(i,u),[u?l.UP:l.DOWN]:g(h,o,i,u),[d?l.RIGHT:l.LEFT]:f(s,d),[d?l.LEFT:l.RIGHT]:g(a,n,s,d)},{props:{hasMore:m}}=this;Object.keys(e).forEach((o=>{const n=o;e[n]&&m[n]&&this._scroll({["scroll"+(t?"Top":"Left")]:p[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)),100)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;const e=this._getPossibleDirections();this._loadByDirection(l.UP,l.DOWN,e),this._loadByDirection(l.LEFT,l.RIGHT,e)},this._setRef=function(t){const{windowScroll:e}=this.props,o={scrollingElement:null,registerEventListener:null};if(!e&&t){let e=null;"_scrollingContainer"in t&&(e=t._scrollingContainer),"Grid"in t&&(e=t.Grid._scrollingContainer),"scrollHeight"in t&&(e=t),o.scrollingElement=e,o.registerEventListener=e}else e&&(o.scrollingElement=document.scrollingElement,o.registerEventListener=document);const{scrollingElement:n,registerEventListener:l}=o;if(n&&l&&("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 l.addEventListener||"function"!=typeof l.removeEventListener)||!n||!l)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=o;const i=()=>{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.state.isLoading||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:s}=this.props;s&&this._scroll({scrollTop:s.top,scrollLeft:s.left}),this._onCleanup(),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",i),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",i)})),this._checkOffsetAndLoadMore()},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement)||!this.state.isLoading)return;const o=t===n.VERTICAL,{state:{rowCount:i=0,columnCount:s=0,scrollHeight:r,scrollWidth:c},props:{rowCount:h=0,columnCount:a=0,reverse:u={}},_scrollingContainerRef:d}=this,{scrollTop:f,scrollLeft:g,scrollHeight:p,scrollWidth:m,clientHeight:v,clientWidth:C}=d.scrollingElement,_=o?h:a,L=(o?i:s)!==_,E=o?f:g,R=o?p:m,T=o?r:c,H=o?v:C,w=u[o?"column":"row"]?-1:1,W=t=>(!this._getPossibleDirections(0)[t]&&this.state.thresholdReached[t]&&(this.state.thresholdReached[t]=!1),this.state.thresholdReached[t]);if(Object.values(l).some((t=>W(t))))return this._getScreenOffset(o),void setTimeout((()=>this._onLoadComplete(t)),100);L&&Math.abs(E)<H&&this._scroll({["scroll"+(o?"Top":"Left")]:E+(R-T)*w}),this.state[o?"scrollHeight":"scrollWidth"]=R,this.state[o?"rowCount":"columnCount"]=_,this.state.isLoading=!1,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 e}from"react";function o(t,e,o,n){return new(o||(o=Promise))((function(i,l){function s(t){try{c(n.next(t))}catch(t){l(t)}}function r(t){try{c(n.throw(t))}catch(t){l(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(s,r)}c((n=n.apply(t,e||[])).next())}))}var n,i;!function(t){t.VERTICAL="vertical",t.HORIZONTAL="horizontal"}(n||(n={})),function(t){t.UP="up",t.DOWN="down",t.LEFT="left",t.RIGHT="right"}(i||(i={}));class l{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:i}=this._scrollingContainerRef.scrollingElement;void 0!==t&&(this._scrollingContainerRef.scrollingElement.scrollTop=this._validateScrollValue(t,n)),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:n}=this;if(!(null==n?void 0:n.scrollingElement)||t===n.scrollingElement.clientWidth&&e===n.scrollingElement.clientHeight)return;const{clientWidth:i,clientHeight:l,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,l),horizontal:this._validateScrollValue(t,r,i)}}else{const t=o>1?1:o<=0?.1:o;c={vertical:t*l,horizontal:t*i}}this.state.computedScrollThreshold=c,this.state.clientWidth=i,this.state.clientHeight=l},this._getPossibleDirections=function(t=0){this._computeThreshold();const{state:{clientHeight:e,clientWidth:o,computedScrollThreshold:{vertical:n,horizontal:l}},props:{reverse:s={}},_scrollingContainerRef:r}=this,{scrollHeight:c,scrollWidth:h,scrollLeft:a,scrollTop:u}=r.scrollingElement,{column:d,row:f}=s,g=(e,o)=>Math.abs(e)<=o-t,p=(e,o,n,i)=>Math.abs(e)>=Math.abs(o-n-i-t);return{[d?i.DOWN:i.UP]:g(u,n),[d?i.UP:i.DOWN]:p(u,c,e,n),[f?i.RIGHT:i.LEFT]:g(a,l),[f?i.LEFT:i.RIGHT]:p(a,h,o,l)}},this._loadByDirection=function(t,e,l){return o(this,void 0,void 0,(function*(){const{state:{isLoading:o,thresholdReached:s},props:{next:r,hasMore:c}}=this,h=t===i.UP?n.VERTICAL:n.HORIZONTAL;if(!o){const o=c[t]&&!s[t]&&l[t],n=!o&&c[e]&&!s[e]&&l[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)),100)}}}))},this._checkOffsetAndLoadMore=function(){const{_scrollingContainerRef:t}=this;if(!t)return;this.state.isLoading||Object.values(i).forEach((t=>this._resetThreshold(t,0,!0)));const e=this._getPossibleDirections();this._loadByDirection(i.UP,i.DOWN,e),this._loadByDirection(i.LEFT,i.RIGHT,e)},this._setRef=function(t){const{windowScroll:e}=this.props,o={scrollingElement:null,registerEventListener:null};if(!e&&t){let e=null;"_scrollingContainer"in t&&(e=t._scrollingContainer),"Grid"in t&&(e=t.Grid._scrollingContainer),"scrollHeight"in t&&(e=t),o.scrollingElement=e,o.registerEventListener=e}else e&&(o.scrollingElement=document.scrollingElement,o.registerEventListener=document);const{scrollingElement:n,registerEventListener:i}=o;if(n&&i&&("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 i.addEventListener||"function"!=typeof i.removeEventListener)||!n||!i)return void console.error("Sorry I can't use this container - try using a different DOM element.");this._scrollingContainerRef=o;const l=()=>{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:i,scrollLeft:l,scrollTop:s,clientHeight:r,clientWidth:c}=e;o&&o({clientHeight:r,clientWidth:c,scrollHeight:n,scrollWidth:i,scrollLeft:l,scrollTop:s}),this.state.isLoading||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:s}=this.props;s&&this._scroll({scrollTop:s.top,scrollLeft:s.left}),this._onCleanup(),this._scrollingContainerRef.registerEventListener.addEventListener("scroll",l),this._scrollingContainerRef.registerEventListener.addEventListener("mouseup",(()=>l)),this.state.cleanup.push((()=>{var t,e,o,n;null===(e=null===(t=this._scrollingContainerRef)||void 0===t?void 0:t.registerEventListener)||void 0===e||e.removeEventListener("scroll",l),null===(n=null===(o=this._scrollingContainerRef)||void 0===o?void 0:o.registerEventListener)||void 0===n||n.removeEventListener("mouseup",l)})),this._checkOffsetAndLoadMore()},this._resetThreshold=function(t,e=10,o){(!this._getPossibleDirections(e)[t]&&this.state.thresholdReached[t]||o)&&(this.state.thresholdReached[t]=!1)},this._onLoadComplete=function(t){var e;if(!(null===(e=this._scrollingContainerRef)||void 0===e?void 0:e.scrollingElement)||!this.state.isLoading)return;const o=t===n.VERTICAL,{state:{rowCount:l=0,columnCount:s=0,scrollHeight:r,scrollWidth:c},props:{rowCount:h=0,columnCount:a=0,reverse:u={}},_scrollingContainerRef:d}=this,{scrollTop:f,scrollLeft:g,scrollHeight:p,scrollWidth:v,clientHeight:m,clientWidth:C}=d.scrollingElement,_=o?h:a,L=o?f:g,E=o?p:v,R=o?r:c,T=o?m:C;if((o?l:s)!==_&&Math.abs(L)<T){const t=u[o?"column":"row"]?-1:1;this._scroll({["scroll"+(o?"Top":"Left")]:L+(E-R)*t})}Object.values(i).forEach((t=>this._resetThreshold(t))),this.state[o?"scrollHeight":"scrollWidth"]=E,this.state[o?"rowCount":"columnCount"]=_,this.state.isLoading=!1,setTimeout((()=>this._checkOffsetAndLoadMore()),100)},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:e},props:{rowCount:o,columnCount:n,hasMore:i},_scrollingContainerRef:l}=this;l&&(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===n&&(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 s=o=>{const n=t(null),{rowCount:i,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 l(o));return e((()=>(f(d?null:n.current),p)),[n.current]),e((()=>g(o)),[i,s,r,c,h,a,u]),n};export{l as InfiniteScroll,n as ScrollAxisName,i as ScrollDirection,s as default,s as useInfiniteScroll};
 //# sourceMappingURL=index.js.map

dist/esm/InfiniteScroll.d.ts

@@ -11,6 +11,6 @@ import { InfiniteScrollState, ScrollDirection, ScrollingContainerRef, ScrollOffsetValues, InfiniteScrollProps, UseInfiniteScrollProps, ScrollPosition, ScrollAxisName, ElementRef } from './types';
     _getPossibleDirections: (this: InfiniteScroll, offset?: number) => Required<ScrollOffsetValues>;
-    _getScreenOffset: (this: InfiniteScroll, isVertical: boolean) => void;
     _loadByDirection: (this: InfiniteScroll, direction1: ScrollDirection.UP | ScrollDirection.LEFT, direction2: ScrollDirection.DOWN | ScrollDirection.RIGHT, offset: Required<ScrollOffsetValues>) => Promise<void>;
     _checkOffsetAndLoadMore: (this: InfiniteScroll) => void;
     _setRef: (this: InfiniteScroll, ref: ElementRef | null) => void;
+    _resetThreshold: (this: InfiniteScroll, direction: ScrollDirection, offset?: number, hardReset?: boolean) => void;
     _onLoadComplete: (this: InfiniteScroll, axis: ScrollAxisName) => void;
@@ -17,0 +17,0 @@ _onPropsChange: (this: InfiniteScroll, props: UseInfiniteScrollProps) => void;

dist/esm/types.d.ts

@@ -34,3 +34,3 @@ /// <reference types="react" />
 export declare type ScrollParams = ScrollSize & ScrollPosition & ClientSize;
-export declare type EventListenerFn = (type: 'scroll', callback: () => void) => void;
+export declare type EventListenerFn = (type: 'scroll' | 'mouseup', callback: () => void) => void;
 export declare type SetRefFn = (ref: any) => void;
@@ -37,0 +37,0 @@ export declare type ScrollingElementRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize>;

dist/index.d.ts

@@ -34,3 +34,3 @@ /// <reference types="react" />
 declare type ScrollParams = ScrollSize & ScrollPosition & ClientSize;
-declare type EventListenerFn = (type: 'scroll', callback: () => void) => void;
+declare type EventListenerFn = (type: 'scroll' | 'mouseup', callback: () => void) => void;
 declare type SetRefFn = (ref: any) => void;
@@ -89,6 +89,6 @@ declare type ScrollingElementRef = Required<ScrollSize> & Required<ScrollPosition> & Required<ClientSize>;
     _getPossibleDirections: (this: InfiniteScroll, offset?: number) => Required<ScrollOffsetValues>;
-    _getScreenOffset: (this: InfiniteScroll, isVertical: boolean) => void;
     _loadByDirection: (this: InfiniteScroll, direction1: ScrollDirection.UP | ScrollDirection.LEFT, direction2: ScrollDirection.DOWN | ScrollDirection.RIGHT, offset: Required<ScrollOffsetValues>) => Promise<void>;
     _checkOffsetAndLoadMore: (this: InfiniteScroll) => void;
     _setRef: (this: InfiniteScroll, ref: ElementRef | null) => void;
+    _resetThreshold: (this: InfiniteScroll, direction: ScrollDirection, offset?: number, hardReset?: boolean) => void;
     _onLoadComplete: (this: InfiniteScroll, axis: ScrollAxisName) => void;
@@ -95,0 +95,0 @@ _onPropsChange: (this: InfiniteScroll, props: UseInfiniteScrollProps) => void;

package.json

 {
   "name": "react-easy-infinite-scroll-hook",
-  "version": "1.14.0",
+  "version": "1.15.0",
   "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

Worsened metrics

Total package byte prevSize

123421

decreased by-3.88%

Lines of code

386

decreased by-0.77%

No dependency changes