react-staggered-grid/dist/esm/index.js

This is a React component that positions and arranges your items in a staggered grid

import e,{useContext as t,useState as i,useEffect as n,useRef as o}from"react";
/*! *****************************************************************************
Copyright (c) Microsoft Corporation.

Permission to use, copy, modify, and/or distribute this software for any
purpose with or without fee is hereby granted.

THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
PERFORMANCE OF THIS SOFTWARE.
***************************************************************************** */var r=function(e,t){return(r=Object.setPrototypeOf||{__proto__:[]}instanceof Array&&function(e,t){e.__proto__=t}||function(e,t){for(var i in t)Object.prototype.hasOwnProperty.call(t,i)&&(e[i]=t[i])})(e,t)};function s(e,t){if("function"!=typeof t&&null!==t)throw new TypeError("Class extends value "+String(t)+" is not a constructor or null");function i(){this.constructor=e}r(e,t),e.prototype=null===t?Object.create(t):(i.prototype=t.prototype,new i)}var l,p,d=function(){return(d=Object.assign||function(e){for(var t,i=1,n=arguments.length;i<n;i++)for(var o in t=arguments[i])Object.prototype.hasOwnProperty.call(t,o)&&(e[o]=t[o]);return e}).apply(this,arguments)};!function(e){e[e.Single=1]="Single",e[e.Full=99999]="Full"}(l||(l={})),function(e){e[e.Start=0]="Start",e[e.Center=1]="Center",e[e.End=2]="End"}(p||(p={}));var u=e.createContext({updateItem:function(){},removeItem:function(){}});function a(){return t(u)}var h=function(t){function i(e){var i=t.call(this,e)||this;return i.repositionedOnce=!1,i.gridWidth=void 0,i.gridItems=[],i.requestRepositioningId=void 0,i.state={calculatedGridHeight:void 0},i.gridElementRef=null,i.reposition=function(){try{if(0===i.gridItems.length)return;i.gridWidth=i.getGridWidth();var e=i.gridWidth,t=i.getColsCount(e);if(t<1)return;var n=i.props.horizontalGap,o=i.props.verticalGap,r=i.getColumnWidth(e,t,n),s=t*r+(t-1)*n,l=0,d=0,u=Array(t).fill(0),a=0;i.props.alignment===p.Center?a=(e-s)/2:i.props.alignment===p.End&&(a=e-s);for(var h=0;h<i.gridItems.length;h++){var c=i.gridItems[h];if(c.mounted)try{var m=Math.max(1,Math.min(c.itemColumnSpan,t)),f=m*r+Math.max(m-1,0)*n,g=c.itemHeight,v=void 0,y=0;if(d+m<=t?v=l:(d=0,v=0,l=0),1===m)y=u[d],u[d]+=g+o;else if(m>1){for(var R=0,C=d;C<d+m;C++)u[C]>R&&(R=u[C]);y=R;for(var w=d;w<d+m;w++)u[w]=R+g+o}l+=f+n,d+=m,c.update(f,a+v,y)}catch(e){console.warn(e)}}if(i.props.calculateHeight){var H=0;for(h=0;h<u.length;h++)u[h]>H&&(H=u[h]);i.state.calculatedGridHeight!==H&&i.setState({calculatedGridHeight:H})}i.repositionedOnce=!0}catch(e){console.error(e)}},i.requestReposition=function(){null==i.requestRepositioningId&&(i.requestRepositioningId=window.requestAnimationFrame((function(){i.requestRepositioningId=void 0,i.reposition()})))},i.onResize=function(){i.requestReposition()},i.onScroll=function(){var e;if(null!=i.gridElementRef&&null!=i.state.calculatedGridHeight){var t=i.gridElementRef.getBoundingClientRect().top-((null===(e=i.gridElementRef.offsetParent)||void 0===e?void 0:e.getBoundingClientRect().top)||0);(window.scrollY||window.pageYOffset)+window.innerHeight-t>=i.gridElementRef.scrollHeight-i.props.requestAppendScrollTolerance&&null!=i.props.requestAppend&&i.props.requestAppend()}else i.props.calculateHeight||console.warn("calculateHeight must be true for requestAppend to work !")},null!=i.props.gridController&&i.registerController(i.props.gridController),i}return s(i,t),i.prototype.registerController=function(e){var t=this;e.requestReposition=function(){t.requestReposition()},e.reposition=function(){t.reposition()},e.isRegistered=!0},i.prototype.getGridWidth=function(){if(null!=this.props.gridWidth)return this.props.gridWidth;var e=this.getDefinedColsCount();if(null==e||null==this.props.columnWidth||this.props.useElementWidth){if(null!=this.gridElementRef){var t=this.gridElementRef.clientWidth;return null==t||0==t?(console.error("gridWidth is zero , gridWidth prop || css width property should be given to StaggeredGrid"),0):t}return 0}return e*this.props.columnWidth},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.getDefinedColumnWidth=function(e){if(null!=this.props.columnWidth)return this.props.columnWidth;var t=this.getDefinedColsCount();return null!=t?e/t:(console.error("columnWidth is zero , columns || columnWidth prop not given to StaggeredGrid"),260)},i.prototype.getColumnWidth=function(e,t,i){var n=this.getDefinedColumnWidth(e);return this.props.fitHorizontalGap&&(n-=(t-1)*i/t),n},i.prototype.getColsCount=function(e){return this.getDefinedColsCount()||Math.max(1,Math.min(this.gridItems.length,Math.ceil(e/this.getDefinedColumnWidth(e))-1))},i.prototype.componentDidMount=function(){this.requestReposition(),this.props.repositionOnResize&&window.addEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.addEventListener("scroll",this.onScroll)},i.prototype.componentWillUnmount=function(){this.props.repositionOnResize&&window.removeEventListener("resize",this.onResize),null!=this.props.requestAppend&&document.removeEventListener("scroll",this.onScroll)},i.prototype.componentDidUpdate=function(e,t,i){e.columns===this.props.columns&&e.columnWidth===this.props.columnWidth&&e.gridWidth===this.props.gridWidth&&e.calculateHeight===this.props.calculateHeight&&e.horizontalGap===this.props.horizontalGap&&e.fitHorizontalGap===this.props.fitHorizontalGap&&e.alignment===this.props.alignment&&e.children===this.props.children||this.requestReposition(),null==e.requestAppend&&null!=this.props.requestAppend?document.addEventListener("scroll",this.onScroll):null!=e.requestAppend&&null==this.props.requestAppend&&document.removeEventListener("scroll",this.onScroll),!e.repositionOnResize&&this.props.repositionOnResize?window.addEventListener("resize",this.onResize):e.repositionOnResize&&!this.props.repositionOnResize&&window.removeEventListener("resize",this.onResize),null==this.props.gridController||this.props.gridController.isRegistered||this.registerController(this.props.gridController)},i.prototype.updateItem=function(e,t,i,n){var o=!1;null!=this.gridItems[e]?(t===this.gridItems[e].itemColumnSpan&&i===this.gridItems[e].itemHeight||(o=!0),this.gridItems[e].itemColumnSpan=t,this.gridItems[e].itemHeight=i,this.gridItems[e].update=n,this.gridItems[e].mounted=!0):this.gridItems[e]={itemColumnSpan:t,itemHeight:i,update:n,mounted:!0},o&&this.repositionedOnce&&this.requestReposition()},i.prototype.removeItem=function(e){null!=this.gridItems[e]&&(this.gridItems[e].mounted=!1,this.requestReposition())},i.prototype.elementProps=function(){var e=d({},this.props);return delete e.elementType,delete e.columnWidth,delete e.columns,delete e.alignment,delete e.className,delete e.children,delete e.gridController,delete e.style,delete e.useElementWidth,delete e.fitHorizontalGap,delete e.gridWidth,delete e.calculateHeight,delete e.verticalGap,delete e.horizontalGap,delete e.repositionOnResize,delete e.requestAppendScrollTolerance,delete e.requestAppend,e},i.prototype.render=function(){var t,i=this;return t=this.props.calculateHeight&&null!=this.state.calculatedGridHeight?{height:this.state.calculatedGridHeight+"px"}:{},e.createElement(u.Provider,{value:{updateItem:this.updateItem.bind(this),removeItem:this.removeItem.bind(this)}},e.createElement(this.props.elementType,d(d({},this.elementProps()),{ref:function(e){i.gridElementRef=e},style:d(d({position:"relative"},t),this.props.style)}),this.props.children))},i.defaultProps={elementType:"div",alignment:p.Center,calculateHeight:!0,useElementWidth:!1,horizontalGap:0,verticalGap:0,repositionOnResize:!0,fitHorizontalGap:!1,requestAppendScrollTolerance:20},i}(e.Component);function c(){return{isRegistered:!1,reposition:function(){console.warn("StaggeredGridController must be registered with a StaggeredGrid before use.")},requestReposition:function(){console.warn("StaggeredGridController must be registered with a StaggeredGrid before use.")}}}var m=function(t){function i(){var e=null!==t&&t.apply(this,arguments)||this;return e.state=e.props.initialPosition||{left:0,top:0,width:0},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 s(i,t),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(e,t,i){e.itemHeight===this.props.itemHeight&&e.index===this.props.index&&e.spans===this.props.spans&&e.children===this.props.children||this.reportData()},i.prototype.componentWillUnmount=function(){this.context.removeItem(this.props.index)},i.prototype.transform=function(e){var t=d({},this.props);return delete t.elementType,delete t.initialPosition,delete t.itemHeight,delete t.spans,delete t.index,delete t.style,delete t.children,delete t.transform,null!=this.props.transform?d(d({},t),this.props.transform(e)):d(d({},t),{style:d({position:"absolute",width:e.width+"px",left:e.left+"px",top:e.top+"px"},this.props.style)})},i.prototype.render=function(){var t=this;return e.createElement(this.props.elementType,d(d({},this.transform(this.state)),{ref:null==this.props.itemHeight?function(e){t.itemElementRef=e}:void 0,onLoad:this.reportData.bind(this)}),this.props.children)},i.contextType=u,i.defaultProps={spans:1,elementType:"div"},i}(e.Component);function f(e,o,r,s,l){var p=i(l||{width:0,left:0,top:0}),d=p[0],a=p[1],h=t(u);return n((function(){if(null!=r||null!=(null==s?void 0:s.current))return h.updateItem(e,o,r||s.current.clientHeight,(function(e,t,i){a({width:e,left:t,top:i})})),function(){h.removeItem(e)}}),[e,o,null==s?void 0:s.current]),d}function g(t){var i=void 0;null==t.itemHeight&&(i=o(null));var n=f(t.index,t.spans,t.itemHeight,i,t.initialPosition);return e.createElement("div",d({},function(e){var i=d({},t);return delete i.elementType,delete i.initialPosition,delete i.itemHeight,delete i.spans,delete i.index,delete i.style,delete i.children,delete i.transform,null!=t.transform?d(d({},i),t.transform(e)):d(d({},i),{style:d({position:"absolute",width:e.width+"px",left:e.left+"px",top:e.top+"px"},t.style)})}(n),{ref:function(e){null!=i&&(i.current=e)}}),t.children)}g.defaultProps={spans:1};export{p as StaggeredAlignment,h as StaggeredGrid,u as StaggeredGridContext,m as StaggeredGridItem,g as StaggeredGridItemFunctional,l as StaggeredItemSpan,c as createStaggeredGridController,a as useStaggeredGrid,f as useStaggeredItemPosition};
//# sourceMappingURL=index.js.map