react-staggered-grid - npm Package Compare versions

Comparing version 1.0.12 to 1.0.13

dist/cjs/index.js

@@ -15,3 +15,3 @@ "use strict";Object.defineProperty(exports,"__esModule",{value:!0});var t=require("react");function e(t){return t&&"object"==typeof t&&"default"in t?t:{default:t}}var i=e(t),n=function(t,e){return(n=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])})(t,e)};
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var r,s,l=function(){return(l=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};exports.StaggeredItemSpan=void 0,(r=exports.StaggeredItemSpan||(exports.StaggeredItemSpan={}))[r.Single=1]="Single",r[r.Full=-1]="Full",exports.StaggeredAlignment=void 0,(s=exports.StaggeredAlignment||(exports.StaggeredAlignment={}))[s.Start=0]="Start",s[s.Center=1]="Center",s[s.End=2]="End";var p=i.default.createContext({colWidth:400,updateItem:function(t,e,i,n){},removeItem:function(t){}});var a=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.repositionedOnce=!1,e.gridWidth=0,e.gridItems=[],e.requestRepositioningId=void 0,e.state={calculatedGridHeight:void 0},e.gridElementRef=null,e.reposition=function(){try{if(0===e.gridItems.length)return;e.gridWidth=e.getGridWidth();var t=e.gridWidth,i=e.getColsCount(t);if(i<1)return;var n=e.props.horizontalGap,o=e.props.verticalGap,r=e.props.limitSpan,s=e.getColumnWidth(t);e.props.fitHorizontalGap&&(s-=(i-1)*n/i);var l=i*s+(i-1)*n,p=0,a=0,u=Array(i).fill(0),d=0;e.props.alignment===exports.StaggeredAlignment.Center?d=(t-l)/2:e.props.alignment===exports.StaggeredAlignment.End&&(d=t-l);for(var h=0;h<e.gridItems.length;h++){var c=e.gridItems[h];if(c.mounted)try{var m=c.itemColumnSpan;m<1?m===exports.StaggeredItemSpan.Full?m=i:(m=1,console.warn("column span out of bounds")):m>i&&r&&(m=i);var g=m*s+Math.max(m-1,0)*n,f=c.itemHeight,v=void 0,y=0;if(a+m<=i?v=p:(a=0,v=0,p=0),1===m)y=u[a],u[a]+=f+o;else if(m>1){for(var S=0,x=a;x<a+m;x++)u[x]>S&&(S=u[x]);y=S;for(var I=a;I<a+m;I++)u[I]=S+f+o}p+=g+n,a+=m,c.update(g,d+v,y)}catch(t){console.warn(t)}}if(e.props.calculateHeight){var W=0;for(h=0;h<u.length;h++)u[h]>W&&(W=u[h]);e.state.calculatedGridHeight!==W&&e.setState({calculatedGridHeight:W})}e.repositionedOnce=!0}catch(t){console.error(t)}},e.requestReposition=function(){null==e.requestRepositioningId&&(e.requestRepositioningId=window.requestAnimationFrame((function(){e.requestRepositioningId=void 0,e.reposition()})))},e.onResize=function(){e.requestReposition()},e.onScroll=function(){var t;if(null!=e.gridElementRef&&null!=e.state.calculatedGridHeight){var i=e.gridElementRef.getBoundingClientRect().top-((null===(t=e.gridElementRef.offsetParent)||void 0===t?void 0:t.getBoundingClientRect().top)||0);window.pageYOffset+window.innerHeight-i>=e.gridElementRef.scrollHeight-e.props.requestAppendScrollTolerance&&null!=e.props.requestAppend&&e.props.requestAppend()}else e.props.calculateHeight||console.warn("calculateHeight must be true for requestAppend to work !")},e}return o(e,t),e.prototype.getGridWidth=function(){if(null!=this.props.gridWidth)return this.props.gridWidth;var t=this.getDefinedColsCount();if(null==t||null==this.props.columnWidth||this.props.useElementWidth){if(null!=this.gridElementRef){var e=this.gridElementRef.clientWidth;return null==e||0==e?(console.error("gridWidth is zero , gridWidth prop || css width property should be given to StaggeredGrid"),0):e}return 0}return t*this.props.columnWidth},e.prototype.getColumnWidth=function(t){if(null!=this.props.columnWidth)return this.props.columnWidth;var e=this.getDefinedColsCount();return null!=e?t/e:(console.error("columnWidth is zero , columns || columnWidth prop not given to StaggeredGrid"),260)},e.prototype.getDefinedColsCount=function(){return null!=this.props.columns&&this.props.columns>0?Math.max(1,Math.min(this.gridItems.length,this.props.columns)):void 0},e.prototype.getColsCount=function(t){return this.getDefinedColsCount()||Math.max(1,Math.min(this.gridItems.length,Math.ceil(t/this.getColumnWidth(t))-1))},e.prototype.componentDidMount=function(){this.reposition(),null!=this.gridElementRef&&this.props.repositionOnResize&&window.addEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.addEventListener("scroll",this.onScroll)},e.prototype.componentWillUnmount=function(){null!=this.gridElementRef&&this.props.repositionOnResize&&window.removeEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.removeEventListener("scroll",this.onScroll)},e.prototype.componentDidUpdate=function(t,e,i){t.columns===this.props.columns&&t.columnWidth===this.props.columnWidth&&t.gridWidth===this.props.gridWidth&&t.calculateHeight===this.props.calculateHeight&&t.horizontalGap===this.props.horizontalGap&&t.fitHorizontalGap===this.props.fitHorizontalGap&&t.limitSpan===this.props.limitSpan&&t.alignment===this.props.alignment&&t.children===this.props.children||this.requestReposition()},e.prototype.updateItem=function(t,e,i,n){var o=!1;null!=this.gridItems[t]?(e===this.gridItems[t].itemColumnSpan&&i===this.gridItems[t].itemHeight||(o=!0),this.gridItems[t].itemColumnSpan=e,this.gridItems[t].itemHeight=i,this.gridItems[t].update=n,this.gridItems[t].mounted=!0):this.gridItems[t]={itemColumnSpan:e,itemHeight:i,update:n,mounted:!0},o&&this.repositionedOnce&&this.requestReposition()},e.prototype.removeItem=function(t){null!=this.gridItems[t]&&(this.gridItems[t].mounted=!1,this.requestReposition())},e.prototype.render=function(){var t,e=this;return t=this.props.calculateHeight&&null!=this.state.calculatedGridHeight?{height:this.state.calculatedGridHeight+"px"}:{},i.default.createElement(p.Provider,{value:{colWidth:this.getColumnWidth(this.getGridWidth()),updateItem:this.updateItem.bind(this),removeItem:this.removeItem.bind(this)}},i.default.createElement("div",{ref:function(t){e.gridElementRef=t},style:l(l({position:"relative"},t),this.props.style),className:this.props.className},this.props.children))},e.defaultProps={alignment:exports.StaggeredAlignment.Center,limitSpan:!0,calculateHeight:!0,useElementWidth:!1,horizontalGap:0,verticalGap:0,repositionOnResize:!1,fitHorizontalGap:!1,requestAppendScrollTolerance:20},e}(i.default.Component),u=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={left:e.props.initialTranslateX,top:e.props.initialTranslateY,width:e.props.initialWidth},e.itemElementRef=null,e.updateTranslate=function(t,i,n){e.state.width===t&&i===e.state.left&&n===e.state.top||e.setState({width:t,left:i,top:n})},e}return o(e,t),e.prototype.reportData=function(){null==this.props.itemHeight&&null==this.itemElementRef||this.context.updateItem(this.props.index,this.props.spans,this.props.itemHeight||this.itemElementRef.clientHeight,this.updateTranslate)},e.prototype.componentDidMount=function(){this.reportData()},e.prototype.componentDidUpdate=function(t,e,i){t.itemHeight===this.props.itemHeight&&t.index===this.props.index&&t.spans===this.props.spans&&t.isLoading===this.props.isLoading&&t.children===this.props.children||this.reportData()},e.prototype.componentWillUnmount=function(){this.context.removeItem(this.props.index)},e.prototype.transform=function(t){return null!=this.props.transform?this.props.transform(t):{style:l({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},this.props.style)}},e.prototype.render=function(){var t=this;return i.default.createElement("div",l({},this.transform(this.state),{ref:null==this.props.itemHeight?function(e){t.itemElementRef=e}:void 0,className:this.props.className}),this.props.children)},e.contextType=p,e.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1},e}(i.default.Component);function d(e,i,n,o,r,s,l,a){void 0===r&&(r=!1),void 0===s&&(s=0),void 0===l&&(l=0),void 0===a&&(a=0);var u=t.useState({width:s,left:l,top:a}),d=u[0],h=u[1],c=t.useContext(p);return t.useEffect((function(){if(null!=n||null!=(null==o?void 0:o.current))return c.updateItem(e,i,n||o.current.clientHeight,(function(t,e,i){h({width:t,left:e,top:i})})),function(){c.removeItem(e)}}),[e,i,null==o?void 0:o.current,r]),d}function h(e){var n=void 0;null==e.itemHeight&&(n=t.useRef(null));var o=d(e.index,e.spans,e.itemHeight,n,e.isLoading,e.initialWidth,e.initialTranslateX,e.initialTranslateY);return i.default.createElement("div",l({},function(t){return null!=e.transform?e.transform(t):{style:l({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},e.style)}}(o),{ref:n,className:e.className}),e.children)}h.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1},exports.StaggeredGrid=a,exports.StaggeredGridContext=p,exports.StaggeredGridItem=u,exports.StaggeredGridItemFunctional=h,exports.useStaggeredGrid=function(){return t.useContext(p)},exports.useStaggeredItemPosition=d;
+***************************************************************************** */function o(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}n(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var r,s,l=function(){return(l=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};exports.StaggeredItemSpan=void 0,(r=exports.StaggeredItemSpan||(exports.StaggeredItemSpan={}))[r.Single=1]="Single",r[r.Full=-1]="Full",exports.StaggeredAlignment=void 0,(s=exports.StaggeredAlignment||(exports.StaggeredAlignment={}))[s.Start=0]="Start",s[s.Center=1]="Center",s[s.End=2]="End";var p=i.default.createContext({colWidth:400,updateItem:function(t,e,i,n){},removeItem:function(t){}});var a=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.repositionedOnce=!1,e.gridWidth=0,e.gridItems=[],e.requestRepositioningId=void 0,e.state={calculatedGridHeight:void 0},e.gridElementRef=null,e.reposition=function(){try{if(0===e.gridItems.length)return;e.gridWidth=e.getGridWidth();var t=e.gridWidth,i=e.getColsCount(t);if(i<1)return;var n=e.props.horizontalGap,o=e.props.verticalGap,r=e.props.limitSpan,s=e.getColumnWidth(t);e.props.fitHorizontalGap&&(s-=(i-1)*n/i);var l=i*s+(i-1)*n,p=0,a=0,u=Array(i).fill(0),d=0;e.props.alignment===exports.StaggeredAlignment.Center?d=(t-l)/2:e.props.alignment===exports.StaggeredAlignment.End&&(d=t-l);for(var h=0;h<e.gridItems.length;h++){var c=e.gridItems[h];if(c.mounted)try{var m=c.itemColumnSpan;m<1?m===exports.StaggeredItemSpan.Full?m=i:(m=1,console.warn("column span out of bounds")):m>i&&r&&(m=i);var g=m*s+Math.max(m-1,0)*n,f=c.itemHeight,v=void 0,y=0;if(a+m<=i?v=p:(a=0,v=0,p=0),1===m)y=u[a],u[a]+=f+o;else if(m>1){for(var S=0,x=a;x<a+m;x++)u[x]>S&&(S=u[x]);y=S;for(var I=a;I<a+m;I++)u[I]=S+f+o}p+=g+n,a+=m,c.update(g,d+v,y)}catch(t){console.warn(t)}}if(e.props.calculateHeight){var W=0;for(h=0;h<u.length;h++)u[h]>W&&(W=u[h]);e.state.calculatedGridHeight!==W&&e.setState({calculatedGridHeight:W})}e.repositionedOnce=!0}catch(t){console.error(t)}},e.requestReposition=function(){null==e.requestRepositioningId&&(e.requestRepositioningId=window.requestAnimationFrame((function(){e.requestRepositioningId=void 0,e.reposition()})))},e.onResize=function(){e.requestReposition()},e.onScroll=function(){var t;if(null!=e.gridElementRef&&null!=e.state.calculatedGridHeight){var i=e.gridElementRef.getBoundingClientRect().top-((null===(t=e.gridElementRef.offsetParent)||void 0===t?void 0:t.getBoundingClientRect().top)||0);window.pageYOffset+window.innerHeight-i>=e.gridElementRef.scrollHeight-e.props.requestAppendScrollTolerance&&null!=e.props.requestAppend&&e.props.requestAppend()}else e.props.calculateHeight||console.warn("calculateHeight must be true for requestAppend to work !")},e}return o(e,t),e.prototype.getGridWidth=function(){if(null!=this.props.gridWidth)return this.props.gridWidth;var t=this.getDefinedColsCount();if(null==t||null==this.props.columnWidth||this.props.useElementWidth){if(null!=this.gridElementRef){var e=this.gridElementRef.clientWidth;return null==e||0==e?(console.error("gridWidth is zero , gridWidth prop || css width property should be given to StaggeredGrid"),0):e}return 0}return t*this.props.columnWidth},e.prototype.getColumnWidth=function(t){if(null!=this.props.columnWidth)return this.props.columnWidth;var e=this.getDefinedColsCount();return null!=e?t/e:(console.error("columnWidth is zero , columns || columnWidth prop not given to StaggeredGrid"),260)},e.prototype.getDefinedColsCount=function(){return null!=this.props.columns&&this.props.columns>0?Math.max(1,Math.min(this.gridItems.length,this.props.columns)):void 0},e.prototype.getColsCount=function(t){return this.getDefinedColsCount()||Math.max(1,Math.min(this.gridItems.length,Math.ceil(t/this.getColumnWidth(t))-1))},e.prototype.componentDidMount=function(){this.requestReposition(),null!=this.gridElementRef&&this.props.repositionOnResize&&window.addEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.addEventListener("scroll",this.onScroll)},e.prototype.componentWillUnmount=function(){null!=this.gridElementRef&&this.props.repositionOnResize&&window.removeEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.removeEventListener("scroll",this.onScroll)},e.prototype.componentDidUpdate=function(t,e,i){t.columns===this.props.columns&&t.columnWidth===this.props.columnWidth&&t.gridWidth===this.props.gridWidth&&t.calculateHeight===this.props.calculateHeight&&t.horizontalGap===this.props.horizontalGap&&t.fitHorizontalGap===this.props.fitHorizontalGap&&t.limitSpan===this.props.limitSpan&&t.alignment===this.props.alignment&&t.children===this.props.children||this.requestReposition()},e.prototype.updateItem=function(t,e,i,n){var o=!1;null!=this.gridItems[t]?(e===this.gridItems[t].itemColumnSpan&&i===this.gridItems[t].itemHeight||(o=!0),this.gridItems[t].itemColumnSpan=e,this.gridItems[t].itemHeight=i,this.gridItems[t].update=n,this.gridItems[t].mounted=!0):this.gridItems[t]={itemColumnSpan:e,itemHeight:i,update:n,mounted:!0},o&&this.repositionedOnce&&this.requestReposition()},e.prototype.removeItem=function(t){null!=this.gridItems[t]&&(this.gridItems[t].mounted=!1,this.requestReposition())},e.prototype.render=function(){var t,e=this;return t=this.props.calculateHeight&&null!=this.state.calculatedGridHeight?{height:this.state.calculatedGridHeight+"px"}:{},i.default.createElement(p.Provider,{value:{colWidth:this.getColumnWidth(this.getGridWidth()),updateItem:this.updateItem.bind(this),removeItem:this.removeItem.bind(this)}},i.default.createElement("div",{ref:function(t){e.gridElementRef=t},style:l(l({position:"relative"},t),this.props.style),className:this.props.className},this.props.children))},e.defaultProps={alignment:exports.StaggeredAlignment.Center,limitSpan:!0,calculateHeight:!0,useElementWidth:!1,horizontalGap:0,verticalGap:0,repositionOnResize:!1,fitHorizontalGap:!1,requestAppendScrollTolerance:20},e}(i.default.Component),u=function(t){function e(){var e=null!==t&&t.apply(this,arguments)||this;return e.state={left:e.props.initialTranslateX,top:e.props.initialTranslateY,width:e.props.initialWidth},e.itemElementRef=null,e.updateTranslate=function(t,i,n){e.state.width===t&&i===e.state.left&&n===e.state.top||e.setState({width:t,left:i,top:n})},e}return o(e,t),e.prototype.reportData=function(){null==this.props.itemHeight&&null==this.itemElementRef||this.context.updateItem(this.props.index,this.props.spans,this.props.itemHeight||this.itemElementRef.clientHeight,this.updateTranslate)},e.prototype.componentDidMount=function(){this.reportData()},e.prototype.componentDidUpdate=function(t,e,i){t.itemHeight===this.props.itemHeight&&t.index===this.props.index&&t.spans===this.props.spans&&t.isLoading===this.props.isLoading&&t.children===this.props.children||this.reportData()},e.prototype.componentWillUnmount=function(){this.context.removeItem(this.props.index)},e.prototype.transform=function(t){return null!=this.props.transform?this.props.transform(t):{style:l({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},this.props.style)}},e.prototype.render=function(){var t=this;return i.default.createElement("div",l({},this.transform(this.state),{ref:null==this.props.itemHeight?function(e){t.itemElementRef=e}:void 0,className:this.props.className}),this.props.children)},e.contextType=p,e.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1},e}(i.default.Component);function d(e,i,n,o,r,s,l,a){void 0===r&&(r=!1),void 0===s&&(s=0),void 0===l&&(l=0),void 0===a&&(a=0);var u=t.useState({width:s,left:l,top:a}),d=u[0],h=u[1],c=t.useContext(p);return t.useEffect((function(){if(null!=n||null!=(null==o?void 0:o.current))return c.updateItem(e,i,n||o.current.clientHeight,(function(t,e,i){h({width:t,left:e,top:i})})),function(){c.removeItem(e)}}),[e,i,null==o?void 0:o.current,r]),d}function h(e){var n=void 0;null==e.itemHeight&&(n=t.useRef(null));var o=d(e.index,e.spans,e.itemHeight,n,e.isLoading,e.initialWidth,e.initialTranslateX,e.initialTranslateY);return i.default.createElement("div",l({},function(t){return null!=e.transform?e.transform(t):{style:l({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},e.style)}}(o),{ref:n,className:e.className}),e.children)}h.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1},exports.StaggeredGrid=a,exports.StaggeredGridContext=p,exports.StaggeredGridItem=u,exports.StaggeredGridItemFunctional=h,exports.useStaggeredGrid=function(){return t.useContext(p)},exports.useStaggeredItemPosition=d;
 //# sourceMappingURL=index.js.map

dist/esm/index.js

@@ -15,3 +15,3 @@ import t,{useContext as e,useState as i,useEffect as n,useRef as o}from"react";
 PERFORMANCE OF THIS SOFTWARE.
-***************************************************************************** */var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])})(t,e)};function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var l,p,a=function(){return(a=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};!function(t){t[t.Single=1]="Single",t[t.Full=-1]="Full"}(l||(l={})),function(t){t[t.Start=0]="Start",t[t.Center=1]="Center",t[t.End=2]="End"}(p||(p={}));var u=t.createContext({colWidth:400,updateItem:function(t,e,i,n){},removeItem:function(t){}});function h(){return e(u)}var d=function(e){function i(){var t=null!==e&&e.apply(this,arguments)||this;return t.repositionedOnce=!1,t.gridWidth=0,t.gridItems=[],t.requestRepositioningId=void 0,t.state={calculatedGridHeight:void 0},t.gridElementRef=null,t.reposition=function(){try{if(0===t.gridItems.length)return;t.gridWidth=t.getGridWidth();var e=t.gridWidth,i=t.getColsCount(e);if(i<1)return;var n=t.props.horizontalGap,o=t.props.verticalGap,r=t.props.limitSpan,s=t.getColumnWidth(e);t.props.fitHorizontalGap&&(s-=(i-1)*n/i);var a=i*s+(i-1)*n,u=0,h=0,d=Array(i).fill(0),c=0;t.props.alignment===p.Center?c=(e-a)/2:t.props.alignment===p.End&&(c=e-a);for(var m=0;m<t.gridItems.length;m++){var f=t.gridItems[m];if(f.mounted)try{var g=f.itemColumnSpan;g<1?g===l.Full?g=i:(g=1,console.warn("column span out of bounds")):g>i&&r&&(g=i);var v=g*s+Math.max(g-1,0)*n,y=f.itemHeight,W=void 0,H=0;if(h+g<=i?W=u:(h=0,W=0,u=0),1===g)H=d[h],d[h]+=y+o;else if(g>1){for(var I=0,R=h;R<h+g;R++)d[R]>I&&(I=d[R]);H=I;for(var C=h;C<h+g;C++)d[C]=I+y+o}u+=v+n,h+=g,f.update(v,c+W,H)}catch(t){console.warn(t)}}if(t.props.calculateHeight){var w=0;for(m=0;m<d.length;m++)d[m]>w&&(w=d[m]);t.state.calculatedGridHeight!==w&&t.setState({calculatedGridHeight:w})}t.repositionedOnce=!0}catch(t){console.error(t)}},t.requestReposition=function(){null==t.requestRepositioningId&&(t.requestRepositioningId=window.requestAnimationFrame((function(){t.requestRepositioningId=void 0,t.reposition()})))},t.onResize=function(){t.requestReposition()},t.onScroll=function(){var e;if(null!=t.gridElementRef&&null!=t.state.calculatedGridHeight){var i=t.gridElementRef.getBoundingClientRect().top-((null===(e=t.gridElementRef.offsetParent)||void 0===e?void 0:e.getBoundingClientRect().top)||0);window.pageYOffset+window.innerHeight-i>=t.gridElementRef.scrollHeight-t.props.requestAppendScrollTolerance&&null!=t.props.requestAppend&&t.props.requestAppend()}else t.props.calculateHeight||console.warn("calculateHeight must be true for requestAppend to work !")},t}return s(i,e),i.prototype.getGridWidth=function(){if(null!=this.props.gridWidth)return this.props.gridWidth;var t=this.getDefinedColsCount();if(null==t||null==this.props.columnWidth||this.props.useElementWidth){if(null!=this.gridElementRef){var e=this.gridElementRef.clientWidth;return null==e||0==e?(console.error("gridWidth is zero , gridWidth prop || css width property should be given to StaggeredGrid"),0):e}return 0}return t*this.props.columnWidth},i.prototype.getColumnWidth=function(t){if(null!=this.props.columnWidth)return this.props.columnWidth;var e=this.getDefinedColsCount();return null!=e?t/e:(console.error("columnWidth is zero , columns || columnWidth prop not given to StaggeredGrid"),260)},i.prototype.getDefinedColsCount=function(){return null!=this.props.columns&&this.props.columns>0?Math.max(1,Math.min(this.gridItems.length,this.props.columns)):void 0},i.prototype.getColsCount=function(t){return this.getDefinedColsCount()||Math.max(1,Math.min(this.gridItems.length,Math.ceil(t/this.getColumnWidth(t))-1))},i.prototype.componentDidMount=function(){this.reposition(),null!=this.gridElementRef&&this.props.repositionOnResize&&window.addEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.addEventListener("scroll",this.onScroll)},i.prototype.componentWillUnmount=function(){null!=this.gridElementRef&&this.props.repositionOnResize&&window.removeEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.removeEventListener("scroll",this.onScroll)},i.prototype.componentDidUpdate=function(t,e,i){t.columns===this.props.columns&&t.columnWidth===this.props.columnWidth&&t.gridWidth===this.props.gridWidth&&t.calculateHeight===this.props.calculateHeight&&t.horizontalGap===this.props.horizontalGap&&t.fitHorizontalGap===this.props.fitHorizontalGap&&t.limitSpan===this.props.limitSpan&&t.alignment===this.props.alignment&&t.children===this.props.children||this.requestReposition()},i.prototype.updateItem=function(t,e,i,n){var o=!1;null!=this.gridItems[t]?(e===this.gridItems[t].itemColumnSpan&&i===this.gridItems[t].itemHeight||(o=!0),this.gridItems[t].itemColumnSpan=e,this.gridItems[t].itemHeight=i,this.gridItems[t].update=n,this.gridItems[t].mounted=!0):this.gridItems[t]={itemColumnSpan:e,itemHeight:i,update:n,mounted:!0},o&&this.repositionedOnce&&this.requestReposition()},i.prototype.removeItem=function(t){null!=this.gridItems[t]&&(this.gridItems[t].mounted=!1,this.requestReposition())},i.prototype.render=function(){var e,i=this;return e=this.props.calculateHeight&&null!=this.state.calculatedGridHeight?{height:this.state.calculatedGridHeight+"px"}:{},t.createElement(u.Provider,{value:{colWidth:this.getColumnWidth(this.getGridWidth()),updateItem:this.updateItem.bind(this),removeItem:this.removeItem.bind(this)}},t.createElement("div",{ref:function(t){i.gridElementRef=t},style:a(a({position:"relative"},e),this.props.style),className:this.props.className},this.props.children))},i.defaultProps={alignment:p.Center,limitSpan:!0,calculateHeight:!0,useElementWidth:!1,horizontalGap:0,verticalGap:0,repositionOnResize:!1,fitHorizontalGap:!1,requestAppendScrollTolerance:20},i}(t.Component),c=function(e){function i(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={left:t.props.initialTranslateX,top:t.props.initialTranslateY,width:t.props.initialWidth},t.itemElementRef=null,t.updateTranslate=function(e,i,n){t.state.width===e&&i===t.state.left&&n===t.state.top||t.setState({width:e,left:i,top:n})},t}return s(i,e),i.prototype.reportData=function(){null==this.props.itemHeight&&null==this.itemElementRef||this.context.updateItem(this.props.index,this.props.spans,this.props.itemHeight||this.itemElementRef.clientHeight,this.updateTranslate)},i.prototype.componentDidMount=function(){this.reportData()},i.prototype.componentDidUpdate=function(t,e,i){t.itemHeight===this.props.itemHeight&&t.index===this.props.index&&t.spans===this.props.spans&&t.isLoading===this.props.isLoading&&t.children===this.props.children||this.reportData()},i.prototype.componentWillUnmount=function(){this.context.removeItem(this.props.index)},i.prototype.transform=function(t){return null!=this.props.transform?this.props.transform(t):{style:a({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},this.props.style)}},i.prototype.render=function(){var e=this;return t.createElement("div",a({},this.transform(this.state),{ref:null==this.props.itemHeight?function(t){e.itemElementRef=t}:void 0,className:this.props.className}),this.props.children)},i.contextType=u,i.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1},i}(t.Component);function m(t,o,r,s,l,p,a,h){void 0===l&&(l=!1),void 0===p&&(p=0),void 0===a&&(a=0),void 0===h&&(h=0);var d=i({width:p,left:a,top:h}),c=d[0],m=d[1],f=e(u);return n((function(){if(null!=r||null!=(null==s?void 0:s.current))return f.updateItem(t,o,r||s.current.clientHeight,(function(t,e,i){m({width:t,left:e,top:i})})),function(){f.removeItem(t)}}),[t,o,null==s?void 0:s.current,l]),c}function f(e){var i=void 0;null==e.itemHeight&&(i=o(null));var n=m(e.index,e.spans,e.itemHeight,i,e.isLoading,e.initialWidth,e.initialTranslateX,e.initialTranslateY);return t.createElement("div",a({},function(t){return null!=e.transform?e.transform(t):{style:a({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},e.style)}}(n),{ref:i,className:e.className}),e.children)}f.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1};export{p as StaggeredAlignment,d as StaggeredGrid,u as StaggeredGridContext,c as StaggeredGridItem,f as StaggeredGridItemFunctional,l as StaggeredItemSpan,h as useStaggeredGrid,m as useStaggeredItemPosition};
+***************************************************************************** */var r=function(t,e){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(t,e){t.__proto__=e}||function(t,e){for(var i in e)Object.prototype.hasOwnProperty.call(e,i)&&(t[i]=e[i])})(t,e)};function s(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Class extends value "+String(e)+" is not a constructor or null");function i(){this.constructor=t}r(t,e),t.prototype=null===e?Object.create(e):(i.prototype=e.prototype,new i)}var l,p,a=function(){return(a=Object.assign||function(t){for(var e,i=1,n=arguments.length;i<n;i++)for(var o in e=arguments[i])Object.prototype.hasOwnProperty.call(e,o)&&(t[o]=e[o]);return t}).apply(this,arguments)};!function(t){t[t.Single=1]="Single",t[t.Full=-1]="Full"}(l||(l={})),function(t){t[t.Start=0]="Start",t[t.Center=1]="Center",t[t.End=2]="End"}(p||(p={}));var u=t.createContext({colWidth:400,updateItem:function(t,e,i,n){},removeItem:function(t){}});function h(){return e(u)}var d=function(e){function i(){var t=null!==e&&e.apply(this,arguments)||this;return t.repositionedOnce=!1,t.gridWidth=0,t.gridItems=[],t.requestRepositioningId=void 0,t.state={calculatedGridHeight:void 0},t.gridElementRef=null,t.reposition=function(){try{if(0===t.gridItems.length)return;t.gridWidth=t.getGridWidth();var e=t.gridWidth,i=t.getColsCount(e);if(i<1)return;var n=t.props.horizontalGap,o=t.props.verticalGap,r=t.props.limitSpan,s=t.getColumnWidth(e);t.props.fitHorizontalGap&&(s-=(i-1)*n/i);var a=i*s+(i-1)*n,u=0,h=0,d=Array(i).fill(0),c=0;t.props.alignment===p.Center?c=(e-a)/2:t.props.alignment===p.End&&(c=e-a);for(var m=0;m<t.gridItems.length;m++){var f=t.gridItems[m];if(f.mounted)try{var g=f.itemColumnSpan;g<1?g===l.Full?g=i:(g=1,console.warn("column span out of bounds")):g>i&&r&&(g=i);var v=g*s+Math.max(g-1,0)*n,y=f.itemHeight,W=void 0,H=0;if(h+g<=i?W=u:(h=0,W=0,u=0),1===g)H=d[h],d[h]+=y+o;else if(g>1){for(var I=0,R=h;R<h+g;R++)d[R]>I&&(I=d[R]);H=I;for(var C=h;C<h+g;C++)d[C]=I+y+o}u+=v+n,h+=g,f.update(v,c+W,H)}catch(t){console.warn(t)}}if(t.props.calculateHeight){var w=0;for(m=0;m<d.length;m++)d[m]>w&&(w=d[m]);t.state.calculatedGridHeight!==w&&t.setState({calculatedGridHeight:w})}t.repositionedOnce=!0}catch(t){console.error(t)}},t.requestReposition=function(){null==t.requestRepositioningId&&(t.requestRepositioningId=window.requestAnimationFrame((function(){t.requestRepositioningId=void 0,t.reposition()})))},t.onResize=function(){t.requestReposition()},t.onScroll=function(){var e;if(null!=t.gridElementRef&&null!=t.state.calculatedGridHeight){var i=t.gridElementRef.getBoundingClientRect().top-((null===(e=t.gridElementRef.offsetParent)||void 0===e?void 0:e.getBoundingClientRect().top)||0);window.pageYOffset+window.innerHeight-i>=t.gridElementRef.scrollHeight-t.props.requestAppendScrollTolerance&&null!=t.props.requestAppend&&t.props.requestAppend()}else t.props.calculateHeight||console.warn("calculateHeight must be true for requestAppend to work !")},t}return s(i,e),i.prototype.getGridWidth=function(){if(null!=this.props.gridWidth)return this.props.gridWidth;var t=this.getDefinedColsCount();if(null==t||null==this.props.columnWidth||this.props.useElementWidth){if(null!=this.gridElementRef){var e=this.gridElementRef.clientWidth;return null==e||0==e?(console.error("gridWidth is zero , gridWidth prop || css width property should be given to StaggeredGrid"),0):e}return 0}return t*this.props.columnWidth},i.prototype.getColumnWidth=function(t){if(null!=this.props.columnWidth)return this.props.columnWidth;var e=this.getDefinedColsCount();return null!=e?t/e:(console.error("columnWidth is zero , columns || columnWidth prop not given to StaggeredGrid"),260)},i.prototype.getDefinedColsCount=function(){return null!=this.props.columns&&this.props.columns>0?Math.max(1,Math.min(this.gridItems.length,this.props.columns)):void 0},i.prototype.getColsCount=function(t){return this.getDefinedColsCount()||Math.max(1,Math.min(this.gridItems.length,Math.ceil(t/this.getColumnWidth(t))-1))},i.prototype.componentDidMount=function(){this.requestReposition(),null!=this.gridElementRef&&this.props.repositionOnResize&&window.addEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.addEventListener("scroll",this.onScroll)},i.prototype.componentWillUnmount=function(){null!=this.gridElementRef&&this.props.repositionOnResize&&window.removeEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.removeEventListener("scroll",this.onScroll)},i.prototype.componentDidUpdate=function(t,e,i){t.columns===this.props.columns&&t.columnWidth===this.props.columnWidth&&t.gridWidth===this.props.gridWidth&&t.calculateHeight===this.props.calculateHeight&&t.horizontalGap===this.props.horizontalGap&&t.fitHorizontalGap===this.props.fitHorizontalGap&&t.limitSpan===this.props.limitSpan&&t.alignment===this.props.alignment&&t.children===this.props.children||this.requestReposition()},i.prototype.updateItem=function(t,e,i,n){var o=!1;null!=this.gridItems[t]?(e===this.gridItems[t].itemColumnSpan&&i===this.gridItems[t].itemHeight||(o=!0),this.gridItems[t].itemColumnSpan=e,this.gridItems[t].itemHeight=i,this.gridItems[t].update=n,this.gridItems[t].mounted=!0):this.gridItems[t]={itemColumnSpan:e,itemHeight:i,update:n,mounted:!0},o&&this.repositionedOnce&&this.requestReposition()},i.prototype.removeItem=function(t){null!=this.gridItems[t]&&(this.gridItems[t].mounted=!1,this.requestReposition())},i.prototype.render=function(){var e,i=this;return e=this.props.calculateHeight&&null!=this.state.calculatedGridHeight?{height:this.state.calculatedGridHeight+"px"}:{},t.createElement(u.Provider,{value:{colWidth:this.getColumnWidth(this.getGridWidth()),updateItem:this.updateItem.bind(this),removeItem:this.removeItem.bind(this)}},t.createElement("div",{ref:function(t){i.gridElementRef=t},style:a(a({position:"relative"},e),this.props.style),className:this.props.className},this.props.children))},i.defaultProps={alignment:p.Center,limitSpan:!0,calculateHeight:!0,useElementWidth:!1,horizontalGap:0,verticalGap:0,repositionOnResize:!1,fitHorizontalGap:!1,requestAppendScrollTolerance:20},i}(t.Component),c=function(e){function i(){var t=null!==e&&e.apply(this,arguments)||this;return t.state={left:t.props.initialTranslateX,top:t.props.initialTranslateY,width:t.props.initialWidth},t.itemElementRef=null,t.updateTranslate=function(e,i,n){t.state.width===e&&i===t.state.left&&n===t.state.top||t.setState({width:e,left:i,top:n})},t}return s(i,e),i.prototype.reportData=function(){null==this.props.itemHeight&&null==this.itemElementRef||this.context.updateItem(this.props.index,this.props.spans,this.props.itemHeight||this.itemElementRef.clientHeight,this.updateTranslate)},i.prototype.componentDidMount=function(){this.reportData()},i.prototype.componentDidUpdate=function(t,e,i){t.itemHeight===this.props.itemHeight&&t.index===this.props.index&&t.spans===this.props.spans&&t.isLoading===this.props.isLoading&&t.children===this.props.children||this.reportData()},i.prototype.componentWillUnmount=function(){this.context.removeItem(this.props.index)},i.prototype.transform=function(t){return null!=this.props.transform?this.props.transform(t):{style:a({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},this.props.style)}},i.prototype.render=function(){var e=this;return t.createElement("div",a({},this.transform(this.state),{ref:null==this.props.itemHeight?function(t){e.itemElementRef=t}:void 0,className:this.props.className}),this.props.children)},i.contextType=u,i.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1},i}(t.Component);function m(t,o,r,s,l,p,a,h){void 0===l&&(l=!1),void 0===p&&(p=0),void 0===a&&(a=0),void 0===h&&(h=0);var d=i({width:p,left:a,top:h}),c=d[0],m=d[1],f=e(u);return n((function(){if(null!=r||null!=(null==s?void 0:s.current))return f.updateItem(t,o,r||s.current.clientHeight,(function(t,e,i){m({width:t,left:e,top:i})})),function(){f.removeItem(t)}}),[t,o,null==s?void 0:s.current,l]),c}function f(e){var i=void 0;null==e.itemHeight&&(i=o(null));var n=m(e.index,e.spans,e.itemHeight,i,e.isLoading,e.initialWidth,e.initialTranslateX,e.initialTranslateY);return t.createElement("div",a({},function(t){return null!=e.transform?e.transform(t):{style:a({position:"absolute",width:t.width+"px",left:t.left+"px",top:t.top+"px"},e.style)}}(n),{ref:i,className:e.className}),e.children)}f.defaultProps={initialWidth:0,initialTranslateX:0,initialTranslateY:0,spans:1,isLoading:!1};export{p as StaggeredAlignment,d as StaggeredGrid,u as StaggeredGridContext,c as StaggeredGridItem,f as StaggeredGridItemFunctional,l as StaggeredItemSpan,h as useStaggeredGrid,m as useStaggeredItemPosition};
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-staggered-grid",
-  "version": "1.0.12",
+  "version": "1.0.13",
   "description": "",
@@ -5,0 +5,0 @@ "main": "dist/cjs/index.js",

No alert changes

Improved metrics

Total package byte prevSize

89685

0.02%

No dependency changes