react-plock/dist/index.cjs.js

The 1kB Masonry Grid for React

"use strict";var P=Object.create;var m=Object.defineProperty,k=Object.defineProperties,A=Object.getOwnPropertyDescriptor,E=Object.getOwnPropertyDescriptors,Q=Object.getOwnPropertyNames,p=Object.getOwnPropertySymbols,S=Object.getPrototypeOf,d=Object.prototype.hasOwnProperty,g=Object.prototype.propertyIsEnumerable;var f=(e,r,n)=>r in e?m(e,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[r]=n,h=(e,r)=>{for(var n in r||(r={}))d.call(r,n)&&f(e,n,r[n]);if(p)for(var n of p(r))g.call(r,n)&&f(e,n,r[n]);return e},y=(e,r)=>k(e,E(r));var x=(e,r)=>{var n={};for(var t in e)d.call(e,t)&&r.indexOf(t)<0&&(n[t]=e[t]);if(e!=null&&p)for(var t of p(e))r.indexOf(t)<0&&g.call(e,t)&&(n[t]=e[t]);return n};var G=(e,r)=>{for(var n in r)m(e,n,{get:r[n],enumerable:!0})},T=(e,r,n,t)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of Q(r))!d.call(e,o)&&o!==n&&m(e,o,{get:()=>r[o],enumerable:!(t=A(r,o))||t.enumerable});return e};var L=(e,r,n)=>(n=e!=null?P(S(e)):{},T(r||!e||!e.__esModule?m(n,"default",{value:e,enumerable:!0}):n,e)),N=e=>T(m({},"__esModule",{value:!0}),e);var D={};G(D,{Masonry:()=>M});module.exports=N(D);var s=L(require("react"));function V(e,r,n){let[t,o]=s.useState({columns:1,gap:1});return s.useEffect(()=>{if(!e){o({columns:r[0],gap:n[0]});return}let u=e.map(a=>window.matchMedia(`(min-width: ${a}px)`)),i=()=>{let a=0;u.forEach(l=>{l.matches&&a++});let c=Math.min(u.length-1,Math.max(0,a));o({columns:r[c],gap:n[c]})};i();for(let a of u)a.addEventListener("change",i);return()=>{for(let a of u)a.removeEventListener("change",i)}},[t.columns,t.gap]),t}function b(e){return Array.isArray(e)?e:[e]}function M(o){var u=o,{items:e=[],render:r,config:n}=u,t=x(u,["items","render","config"]);let{columns:i,gap:a}=V(n.media,b(n.columns),b(n.gap)),c=j(e,i),l=z(c,i);return s.createElement("div",y(h({},t),{style:{display:"grid",alignItems:"start",gridColumnGap:a,gridTemplateColumns:`repeat(${i}, minmax(0, 1fr))`}}),l.map((R,v)=>s.createElement($,{gap:a,key:v},R.map((C,w)=>r(C,w)))))}function $({children:e,gap:r}){return s.createElement("div",{style:{display:"grid",rowGap:r,gridTemplateColumns:"minmax(0, 1fr)"}},e)}function j(e=[],r=3){let n=[];for(let t=0;t<e.length;t+=r){let o=e.slice(t,t+r);n.push(o)}return n}function z(e=[],r=3){let n=Array.from({length:r},()=>[]);for(let t=0;t<r;t++)for(let o=0;o<e.length;o+=1)e[o][t]&&n[t].push(e[o][t]);return n}0&&(module.exports={Masonry});