react-layout-masonry
Version:
Responsive masonry layout for React
2 lines • 2.16 kB
JavaScript
Object.defineProperty(exports,`__esModule`,{value:!0});var e=Object.create,t=Object.defineProperty,n=Object.getOwnPropertyDescriptor,r=Object.getOwnPropertyNames,i=Object.getPrototypeOf,a=Object.prototype.hasOwnProperty,o=(e,i,o,s)=>{if(i&&typeof i==`object`||typeof i==`function`)for(var c=r(i),l=0,u=c.length,d;l<u;l++)d=c[l],!a.call(e,d)&&d!==o&&t(e,d,{get:(e=>i[e]).bind(null,d),enumerable:!(s=n(i,d))||s.enumerable});return e},s=(n,r,a)=>(a=n==null?{}:e(i(n)),o(r||!n||!n.__esModule?t(a,`default`,{value:n,enumerable:!0}):a,n));const c=s(require(`react`)),l=s(require(`react/jsx-runtime`)),u=typeof window<`u`,d=u?c.useLayoutEffect:c.useEffect,f=(e=!0)=>{let[t,n]=(0,c.useState)(u?window.innerWidth:0),r=(0,c.useCallback)(()=>{n(window.innerWidth)},[]);return(0,c.useEffect)(()=>(e&&window.addEventListener(`resize`,r),()=>{window.removeEventListener(`resize`,r)}),[e,r]),d(()=>{r()},[r]),t};var p=f;const m=[640,786,1024,1280,1536],h=e=>e.reduce((e,t,n)=>typeof t==`number`?{...e,[m[n]]:t}:e,{}),g=e=>Array.isArray(e)?h(e):e,_=(e,t)=>{let n=Object.keys(g(e)).map(Number).sort((e,t)=>e-t),r=null;for(let e of n)t>=e&&(r=e);return r??n[0]};var v=_;const y=3,b=e=>{let t=typeof e==`object`,n=p(t),r=(0,c.useMemo)(()=>{if(!t)return e??y;let r=v(e,n);return e[r]??y},[t,n,e]);return r};var x=b;const S=e=>Array.from({length:e},()=>[]),C=(e,t)=>{let n=x(t),r=(0,c.useMemo)(()=>{let t=S(n);return c.Children.forEach(e,(e,r)=>{(0,c.isValidElement)(e)&&t[r%n].push(e)}),t},[n,e]);return r};var w=C;const T=(0,c.createContext)({column:0,position:0}),E=()=>(0,c.useContext)(T),D=e=>{let{gap:t,as:n=`div`,columnProps:r,columns:i,ref:a,...o}=e,s=(0,c.useId)(),u=w(e.children,i);return(0,l.jsx)(n,{...o,"data-masonry-id":`Masonry-${s}`,style:{display:`flex`,gap:t,...o.style},ref:a,children:u.map((e,i)=>(0,l.jsx)(n,{"data-masonry-column":i+1,...r,style:{display:`flex`,flex:1,flexDirection:`column`,gap:t,...r?.style},children:e.map((e,t)=>(0,l.jsx)(T,{value:{column:i,position:t},children:e},`Masonry__Column_Child_${s}_${t}`))},`Masonry__Column_${s}_${i}`))})};var O=D;exports.default=O,exports.useMasonry=w,exports.useMasonryItem=E;
//# sourceMappingURL=index.cjs.map