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