@bedrock-layout/masonry-grid
Version:
bedrock-layout masonry-grid
2 lines (1 loc) • 2.04 kB
JavaScript
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const S=require("@bedrock-layout/grid"),l=require("@bedrock-layout/spacing-constants"),m=require("@bedrock-layout/type-utils"),b=require("@bedrock-layout/use-resize-observer"),s=require("react"),R=typeof window=="object"&&typeof document=="object"&&document.nodeType===9,x=s.forwardRef(function({style:r={},...e},t){return s.createElement("div",{ref:t,style:{gridRow:"span var(--rows, 1)",...r},...e})});function z({children:n,gutter:r}){const[e,t]=s.useState(1),c=l.useTheme(),i=b.useResizeObserver(({target:o})=>{t(1);const f=l.getSafeGutter(c,r)??"1px",y=R?m.convertToMaybe(d(f,o)):1,h=Math.max(y??1,1),[g]=Array.from(o.children),v=1+Math.min(o.scrollHeight,g.scrollHeight),w=Math.ceil(v/h);t(w)});return s.createElement(x,{style:{"--rows":e},ref:i},s.Children.map(n,o=>s.cloneElement(o,{style:{display:"block",blockSize:"100%",...o.props.style??{}}})))}const C=m.forwardRefWithAs(function({children:r,style:e={},...t},c){return s.createElement(S.Grid,{ref:c,"data-bedrock-masonry-grid":!0,...t,style:{gridTemplateRows:"1px",...e}},s.Children.map(r,i=>s.createElement(z,{gutter:t.gutter},i)))}),a=96;function p(n){const r=String(n),e=parseFloat(r),[,t]=r.match(/[\d.\-+]*\s*(.*)/)??["",""];return[e,t]}function d(n,r){if(!n)return;const e=r??document.body,t=(n??"px").trim().toLowerCase();switch(t){case"vmin":case"vmax":case"vh":case"vw":case"%":return;case"ch":case"ex":return E(t,e);case"em":return u(e,"font-size");case"rem":return u(document.body,"font-size");case"in":return a;case"cm":return a/2.54;case"mm":return a/25.4;case"pt":return a/72;case"pc":return a/6;case"px":return 1;default:{const[c,i]=p(t);if(isNaN(c))return;if(!i)return c;const o=d(i,r);return typeof o=="number"?c*o:void 0}}}function u(n,r){const[e,t]=p(getComputedStyle(n).getPropertyValue(r));return e*(d(t,n)??1)}function E(n,r){const e=document.createElement("div");e.style.height="128"+n,r.appendChild(e);const t=u(e,"height")/128;return r.removeChild(e),t}exports.MasonryGrid=C;