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

Comparing version 1.4.3 to 1.4.4

dist/cjs/index.js

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

dist/cjs/types/types.d.ts

@@ -32,3 +32,3 @@ export interface ClientSize {
 export declare type ScrollDirectionState = Partial<Record<ScrollDirection, boolean>>;
-export declare type ScrollParams = ScrollSize & ScrollPosition;
+export declare type ScrollParams = ScrollSize & ScrollPosition & ClientSize;
 export declare type EventListenerFn = (type: 'scroll', callback: () => void) => void;
@@ -35,0 +35,0 @@ export declare type SetRefFn = (ref: any) => void;

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(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:u,row:d}=s,f=(t,o)=>Math.abs(t)<=o,p=(t,o,e,i)=>Math.abs(t)>=Math.abs(o-e-i);return{[u?n.DOWN:n.UP]:f(a,e),[u?n.UP:n.DOWN]:p(a,r,t,e),[d?n.RIGHT:n.LEFT]:f(h,i),[d?n.LEFT:n.RIGHT]:p(h,c,o,i)}},this._loadByDirection=function(t,o,s){return e(this,void 0,void 0,(function*(){const{state:{isLoading:e,thresholdReached:l},props:{next:r,hasMore:c}}=this,h=t===n.UP?i.VERTICAL:i.HORIZONTAL;if(!e[h]){const e=c[t]&&!l[t]&&s[t],i=!e&&c[o]&&!l[o]&&s[o];if(e||i)try{const i=e?t:o;this.state.thresholdReached[i]=!0,this.state.isLoading[h]=!0,yield r(i)}finally{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:u,scrollLeft:d,scrollHeight:f,scrollWidth:p,clientHeight:g,clientWidth:C}=a,v=o?r:c,_=o?u:d,R=o?f:p,L=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")]:_+(R-L)*t})}this.state.isLoading=Object.assign(Object.assign({},this.state.isLoading),{[t]:!1}),this.state[o?"scrollHeight":"scrollWidth"]=R,this.state[o?"rowCount":"columnCount"]=v,this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:o},props:{rowCount:e,columnCount:i,hasMore:n},_scrollingContainerRef:s}=this;s&&(void 0===e&&(n.down||n.up)&&console.warn(`You provided props with "hasMore: { up: ${!!n.up}, down: ${!!n.down} }" but "rowCount" is "undefined"`),void 0===i&&(n.left||n.right)&&console.warn(`You provided props with "hasMore: { left: ${!!n.left}, right: ${!!n.right} }" but "columnCount" is "undefined"`),o.vertical&&o.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:{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:u,onCleanup:d}}=t(new s(e));return o((()=>d),[]),o((()=>u(e)),[i,n,l,r,c,h]),{setRef:a}};export{s as InfiniteScroll,i as ScrollAxisName,n as ScrollDirection,l as default,l as useInfiniteScroll};
+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:u,row:d}=s,f=(t,o)=>Math.abs(t)<=o,p=(t,o,e,i)=>Math.abs(t)>=Math.abs(o-e-i);return{[u?n.DOWN:n.UP]:f(a,e),[u?n.UP:n.DOWN]:p(a,r,t,e),[d?n.RIGHT:n.LEFT]:f(h,i),[d?n.LEFT:n.RIGHT]:p(h,c,o,i)}},this._loadByDirection=function(t,o,s){return e(this,void 0,void 0,(function*(){const{state:{isLoading:e,thresholdReached:l},props:{next:r,hasMore:c}}=this,h=t===n.UP?i.VERTICAL:i.HORIZONTAL;if(!e[h]){const e=c[t]&&!l[t]&&s[t],i=!e&&c[o]&&!l[o]&&s[o];if(e||i)try{const i=e?t:o;this.state.thresholdReached[i]=!0,this.state.isLoading[h]=!0,yield r(i)}finally{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,clientHeight:n,clientWidth:s},props:{onScroll:l}}=this;l&&l({clientHeight:n,clientWidth:s,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:u,scrollLeft:d,scrollHeight:f,scrollWidth:p,clientHeight:g,clientWidth:C}=a,v=o?r:c,_=o?u:d,R=o?f:p,L=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")]:_+(R-L)*t})}this.state.isLoading=Object.assign(Object.assign({},this.state.isLoading),{[t]:!1}),this.state[o?"scrollHeight":"scrollWidth"]=R,this.state[o?"rowCount":"columnCount"]=v,this._checkOffsetAndLoadMore()},this._onPropsChange=function(t){this.props=t;const{state:{isLoading:o},props:{rowCount:e,columnCount:i,hasMore:n},_scrollingContainerRef:s}=this;s&&(void 0===e&&(n.down||n.up)&&console.warn(`You provided props with "hasMore: { up: ${!!n.up}, down: ${!!n.down} }" but "rowCount" is "undefined"`),void 0===i&&(n.left||n.right)&&console.warn(`You provided props with "hasMore: { left: ${!!n.left}, right: ${!!n.right} }" but "columnCount" is "undefined"`),o.vertical&&o.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:{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:u,onCleanup:d}}=t(new s(e));return o((()=>d),[]),o((()=>u(e)),[i,n,l,r,c,h]),{setRef:a}};export{s as InfiniteScroll,i as ScrollAxisName,n as ScrollDirection,l as default,l as useInfiniteScroll};
 //# sourceMappingURL=index.js.map

dist/esm/types/types.d.ts

@@ -32,3 +32,3 @@ export interface ClientSize {
 export declare type ScrollDirectionState = Partial<Record<ScrollDirection, boolean>>;
-export declare type ScrollParams = ScrollSize & ScrollPosition;
+export declare type ScrollParams = ScrollSize & ScrollPosition & ClientSize;
 export declare type EventListenerFn = (type: 'scroll', callback: () => void) => void;
@@ -35,0 +35,0 @@ export declare type SetRefFn = (ref: any) => void;

dist/index.d.ts

@@ -32,3 +32,3 @@ interface ClientSize {
 declare type ScrollDirectionState = Partial<Record<ScrollDirection, boolean>>;
-declare type ScrollParams = ScrollSize & ScrollPosition;
+declare type ScrollParams = ScrollSize & ScrollPosition & ClientSize;
 declare type EventListenerFn = (type: 'scroll', callback: () => void) => void;
@@ -35,0 +35,0 @@ declare type SetRefFn = (ref: any) => void;

package.json

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

No alert changes

Improved metrics

Total package byte prevSize

79822

increased by0.29%

Lines of code

330

increased by0.3%

No dependency changes