react-stone-mason 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.mason-container{position:relative;overflow:hidden;--cell-width: 100
|
|
1
|
+
.mason-container{position:relative;overflow:hidden;--cell-width: 100%;--child-display: none;box-sizing:border-box;margin:0;padding:0}.mason-container>*{box-sizing:inherit;vertical-align:top;width:var(--cell-width);display:var(--child-display)}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { jsx as
|
|
1
|
+
import { jsx as g } from "react/jsx-runtime";
|
|
2
2
|
import * as m from "react";
|
|
3
3
|
import './index.css';const v = { childList: !0, subtree: !0 }, E = (u) => {
|
|
4
4
|
const o = Object.keys(u).find((r) => {
|
|
@@ -10,7 +10,7 @@ import './index.css';const v = { childList: !0, subtree: !0 }, E = (u) => {
|
|
|
10
10
|
const t = (n = u[r]) == null ? void 0 : n.query;
|
|
11
11
|
return t && window.matchMedia(t).matches;
|
|
12
12
|
}) || o;
|
|
13
|
-
},
|
|
13
|
+
}, y = (u, o, l) => {
|
|
14
14
|
var e;
|
|
15
15
|
const r = E(l);
|
|
16
16
|
if (!r || !o) return;
|
|
@@ -31,7 +31,7 @@ function A({ children: u = [], columns: o, style: l = {} }) {
|
|
|
31
31
|
return m.useLayoutEffect(() => {
|
|
32
32
|
if (!r.current) return;
|
|
33
33
|
const t = Array.from(r.current.children);
|
|
34
|
-
|
|
34
|
+
y(t, r.current, o);
|
|
35
35
|
}, [r, o]), m.useEffect(() => {
|
|
36
36
|
if (!r.current) return;
|
|
37
37
|
const t = {}, n = r.current.style, a = () => {
|
|
@@ -39,7 +39,7 @@ function A({ children: u = [], columns: o, style: l = {} }) {
|
|
|
39
39
|
const e = r.current, s = o[i], c = t[i];
|
|
40
40
|
if (!e || !s) return;
|
|
41
41
|
const d = Array.from(e.children), h = (100 / s.columns).toFixed(3) + "%";
|
|
42
|
-
(c != null && c.matches || !s.query) && (n.setProperty("--cell-width", h), window.requestAnimationFrame(() =>
|
|
42
|
+
(c != null && c.matches || !s.query) && (n.setProperty("--child-display", "inline-block"), n.setProperty("--cell-width", h), window.requestAnimationFrame(() => y(d, e, o)));
|
|
43
43
|
});
|
|
44
44
|
};
|
|
45
45
|
return Object.keys(o).forEach((i) => {
|
|
@@ -56,7 +56,7 @@ function A({ children: u = [], columns: o, style: l = {} }) {
|
|
|
56
56
|
const t = (e) => {
|
|
57
57
|
if (!r.current) return;
|
|
58
58
|
const s = Array.from(r.current.children), c = e != null && e.length ? e.map((d) => d.target) : s;
|
|
59
|
-
|
|
59
|
+
y(c, n, o);
|
|
60
60
|
}, n = r.current, a = new ResizeObserver((e) => {
|
|
61
61
|
t(e);
|
|
62
62
|
}), i = new MutationObserver((e) => {
|
|
@@ -65,7 +65,7 @@ function A({ children: u = [], columns: o, style: l = {} }) {
|
|
|
65
65
|
return Array.from(r.current.children).forEach((e) => a.observe(e)), a.observe(n), i.observe(n, v), () => {
|
|
66
66
|
a.disconnect(), i.disconnect();
|
|
67
67
|
};
|
|
68
|
-
}, [r, o]), /* @__PURE__ */
|
|
68
|
+
}, [r, o]), /* @__PURE__ */ g("div", { className: "mason-container", ref: r, style: l, children: m.Children.toArray(u).filter((t) => t).map((t, n) => /* @__PURE__ */ g("div", { children: t }, `child-${n}`)) });
|
|
69
69
|
}
|
|
70
70
|
export {
|
|
71
71
|
A as default
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
(function(l,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],m):(l=typeof globalThis<"u"?globalThis:l||self,l["react-stone-mason"]=m(l.jsxRuntime,l.React))})(this,(function(l,m){"use strict";var
|
|
2
|
-
/*$vite$:1*/`,document.head.appendChild(
|
|
1
|
+
(function(l,m){typeof exports=="object"&&typeof module<"u"?module.exports=m(require("react/jsx-runtime"),require("react")):typeof define=="function"&&define.amd?define(["react/jsx-runtime","react"],m):(l=typeof globalThis<"u"?globalThis:l||self,l["react-stone-mason"]=m(l.jsxRuntime,l.React))})(this,(function(l,m){"use strict";var g=document.createElement("style");g.textContent=`.mason-container{position:relative;overflow:hidden;--cell-width: 100%;--child-display: none;box-sizing:border-box;margin:0;padding:0}.mason-container>*{box-sizing:inherit;vertical-align:top;width:var(--cell-width);display:var(--child-display)}
|
|
2
|
+
/*$vite$:1*/`,document.head.appendChild(g);function w(c){const r=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(c){for(const d in c)if(d!=="default"){const t=Object.getOwnPropertyDescriptor(c,d);Object.defineProperty(r,d,t.get?t:{enumerable:!0,get:()=>c[d]})}}return r.default=c,Object.freeze(r)}const y=w(m),C={childList:!0,subtree:!0},O=c=>{const r=Object.keys(c).find(t=>{var e;return!((e=c[t])!=null&&e.query)});return Object.keys(c).find(t=>{var o;const e=(o=c[t])==null?void 0:o.query;return e&&window.matchMedia(e).matches})||r},p=(c,r,d)=>{var n;const t=O(d);if(!t||!r)return;const e=+(((n=d[t])==null?void 0:n.columns)||1),o=Array.from(r.children),u=c.reduce((a,i)=>Math.min(a,o.indexOf(i)),o.length),s=Math.max(0,u-e);o.forEach((a,i)=>{if(i>=s){const h=i%e,f=o.slice(i-h,i-h+e),b=o[i-e],v=Number((b==null?void 0:b.getAttribute("data-debt"))||0),x=Math.max(...f.map(k=>k.getBoundingClientRect().height)),E=v+Math.ceil(x-a.getBoundingClientRect().height);a.setAttribute("data-debt",String(E)),a.style.transform=i>e-1?`translateY(-${v}px)`:""}}),window.requestAnimationFrame(()=>{var f;const a=o.slice(-1*e),i=Math.max(...a.map(b=>b.getBoundingClientRect().bottom)),h=((f=o[0])==null?void 0:f.getBoundingClientRect().top)??0;r.style.height=i-h+"px"})};function j({children:c=[],columns:r,style:d={}}){const t=y.useRef(null);return y.useLayoutEffect(()=>{if(!t.current)return;const e=Array.from(t.current.children);p(e,t.current,r)},[t,r]),y.useEffect(()=>{if(!t.current)return;const e={},o=t.current.style,u=()=>{Object.keys(r).forEach(s=>{const n=t.current,a=r[s],i=e[s];if(!n||!a)return;const h=Array.from(n.children),f=(100/a.columns).toFixed(3)+"%";(i!=null&&i.matches||!a.query)&&(o.setProperty("--child-display","inline-block"),o.setProperty("--cell-width",f),window.requestAnimationFrame(()=>p(h,n,r)))})};return Object.keys(r).forEach(s=>{const n=r[s];!n||!n.query||(e[s]=window.matchMedia(n.query),e[s].addEventListener("change",u))}),u(),()=>{Object.keys(e).forEach(s=>{var n;return(n=e[s])==null?void 0:n.removeEventListener("change",u)})}},[r,t]),y.useEffect(()=>{if(!t.current)return;const e=n=>{if(!t.current)return;const a=Array.from(t.current.children),i=n!=null&&n.length?n.map(h=>h.target):a;p(i,o,r)},o=t.current,u=new ResizeObserver(n=>{e(n)}),s=new MutationObserver(n=>{e(n)});return Array.from(t.current.children).forEach(n=>u.observe(n)),u.observe(o),s.observe(o,C),()=>{u.disconnect(),s.disconnect()}},[t,r]),l.jsx("div",{className:"mason-container",ref:t,style:d,children:y.Children.toArray(c).filter(e=>e).map((e,o)=>l.jsx("div",{children:e},`child-${o}`))})}return j}));
|