react-masonry/dist/index.js

ReactJs layout library.

var k=Object.defineProperty,q=Object.defineProperties;var G=Object.getOwnPropertyDescriptors;var h=Object.getOwnPropertySymbols;var P=Object.prototype.hasOwnProperty,v=Object.prototype.propertyIsEnumerable;var w=(t,o,e)=>o in t?k(t,o,{enumerable:!0,configurable:!0,writable:!0,value:e}):t[o]=e,l=(t,o)=>{for(var e in o||(o={}))P.call(o,e)&&w(t,e,o[e]);if(h)for(var e of h(o))v.call(o,e)&&w(t,e,o[e]);return t},c=(t,o)=>q(t,G(o));var R=(t,o)=>{var e={};for(var n in t)P.call(t,n)&&o.indexOf(n)<0&&(e[n]=t[n]);if(t!=null&&h)for(var n of h(t))o.indexOf(n)<0&&v.call(t,n)&&(e[n]=t[n]);return e};import{cloneElement as lt,useRef as A,Children as ut}from"react";import{useState as Z,useEffect as _}from"react";var I=t=>t.right-t.left<5||t.bottom&&t.bottom-t.top<5,J=({spotsList:t,usedSpot:o})=>t.some(e=>e!==o&&o.left===e.left),K=({position:t,spot:o,stone:e})=>{if(t.left>o.left&&o.right>=t.left&&t.top+e.height>o.top){if(o.bottom&&o.bottom<t.top)return o;let n=l({},o);return n.right=t.left,n}return null},Q=({position:t,stone:o,spot:e})=>{if(t.left+o.width>e.left&&t.top>=e.top){if(e.bottom&&e.bottom<t.top||e.right<t.left)return e;let n=l({},e);return n.bottom=t.top,n}return null},V=({stone:t,position:o,spotsList:e,optimalSpot:n})=>{let r=l({},n);return r.left=o.left+t.width,I(r)||J({usedSpot:r,spotsList:e})?null:r},M=({spots:t,position:o,optimalSpot:e,stone:n})=>t.map((r,i,s)=>{if(r===e)return V({stone:n,position:o,optimalSpot:e,spotsList:s});let u=K({position:o,spot:r,stone:n});if(u)return u;let p=Q({position:o,stone:n,spot:r});return p||r});function W(t,o){for(let e=0,n=o.length;e<n;e++){let r=o[e];if(t(r))return r}return null}var x=(t,o)=>o.filter(t),T=(t,o)=>[...o].sort(t);var X=(t,o)=>t.top===o.top?t.left<o.left?-1:1:t.top<o.top?-1:1,H=t=>T(X,t);var C=({availableSpots:t,optimalSpot:o,containerSize:e,stone:n})=>{let i={right:e,top:o.top+n.height,left:o.left};o.bottom&&(i.bottom=o.bottom);for(let s=0,u=t.length;s<u;s+=1){let p=t[s];if(i.left<p.left&&i.top<p.top){i.right=p.left;break}}return i},Y=(t,o)=>{let e=t.right-t.left>=o.width;if(!t.bottom)return e;let n=t.bottom-t.top>=o.height;return e&&n},E=({availableSpots:t,stone:o})=>W(e=>Y(e,o),t);function L({stone:t,availableSpots:o,containerSize:e}){let n=E({availableSpots:o,stone:t}),r={left:n.left,top:n.top},i=C({optimalSpot:n,availableSpots:o.filter(p=>p!==n),stone:t,containerSize:e}),s=[...o,i],u=M({spots:s,position:r,optimalSpot:n,stone:t});return s=[...x(Boolean,u)],s=H(s),{position:r,availableSpots:s}}var z=({stones:t,containerSize:o})=>{let e={positions:[],containerHeight:0,availableSpots:[]};if(!t.length)return e;let n=0,r=[],i=[{top:0,left:0,right:o}];for(let s of t){let u=L({availableSpots:i,stone:s,containerSize:o}),p=u.position.top+s.height;n<p&&(n=p),r.push(u.position),i=u.availableSpots}return{availableSpots:i,positions:r,containerHeight:n}};var D=t=>t.reduce((o,e)=>{if(!e)return o;let n=e.getBoundingClientRect();return o.push({width:n.width,height:n.height}),o},[]),B=({boxesRefs:t,wrapperRef:o,children:e,windowWidth:n,wrapperWidth:r})=>{let[{positions:i,containerHeight:s,stones:u,availableSpots:p},a]=Z({positions:[],containerHeight:null,stones:[],availableSpots:[]});return _(()=>{var m,d;let S=D(t.current),b=(d=(m=o.current)==null?void 0:m.offsetWidth)!=null?d:0;if(b===null)return;let y=z({stones:S,containerSize:b});a(c(l({},y),{stones:S}))},[e,t,o,n,r]),{positions:i,containerHeight:s,stones:u,availableSpots:p}};var tt=t=>({fade:`${t}ms opacity ease`,fadeMove:`
    ${t}ms opacity ease,
    ${t}ms top ease,
    ${t}ms left ease
  `,move:`
    ${t}ms top ease,
    ${t}ms left ease
  `}),ot=({transition:t,transitionDuration:o})=>t?{transition:tt(o)[t]}:null,et=t=>t?c(l({},t),{opacity:1}):{opacity:0,top:0,left:0},j=({style:t,position:o,transition:e,transitionDuration:n})=>l(l(c(l({},t),{position:"absolute"}),et(o)),ot({transition:e,transitionDuration:n}));import{useEffect as nt,useRef as rt,useState as it}from"react";function F(t,o,e){let n;return function(...r){n&&clearTimeout(n),n=setTimeout(function(){n=null,e||t.apply(null,r)},o),e&&!n&&t.apply(null,r)}}var O=()=>{let[t,o]=it(),e=rt(F(o,300));return nt(()=>{let n=()=>{e.current(window.innerWidth)};return window.addEventListener("resize",n),()=>{window.removeEventListener("resize",n)}},[]),t};import{useEffect as st,useState as pt}from"react";var $=t=>{let[o,e]=pt(null);return st(()=>{let n=new ResizeObserver(r=>{for(let i of r)e(i.contentRect.width)});return t.current&&n.observe(t.current),()=>{n.disconnect()}},[t]),o};import{jsx as ct}from"react/jsx-runtime";var ft=s=>{var u=s,{children:t,style:o,transition:e=!1,transitionDuration:n=500,transitionStep:r=50}=u,i=R(u,["children","style","transition","transitionDuration","transitionStep"]);let p=A([]),a=A(null),S=O(),b=$(a),{positions:y,containerHeight:m}=B({boxesRefs:p,wrapperRef:a,children:t,windowWidth:S,wrapperWidth:b}),d=l({minHeight:m!=null?m:0,position:"relative"},o);return ct("div",c(l({ref:a,style:d},i),{children:ut.map(t,(f,g)=>{if(typeof f!="object"||!f||!("type"in f))return f;let N={style:j({style:f.props.style,position:y[g],transition:e,transitionDuration:n}),ref:U=>p.current[g]=U};return lt(f,l(l({},f.props),N))})}))};export{ft as Masonry};