@dotss/tictoccroc 0.4.1 → 0.5.0

package/dist/shared/components/Masonry/Masonry.mjs

@@ -1,277 +1,241 @@
-import { jsx as W } from "react/jsx-runtime";
-import { useState as v, useRef as u, Children as S, isValidElement as Q, useMemo as lt, useEffect as M, cloneElement as Y } from "react";
-import { Box as Z, Flexbox as ft } from "@dotss/ui";
-import gt from "@dotss/ui/core/useTheme";
-import { findImageInChildren as pt, getHorizontalLayoutRows as ht, getNextIndexHorizontalFromRows as dt, findNextFocusableElement as z } from "./Masonry.utils.mjs";
-import _ from "./MasonryBlock/MasonryBlock.mjs";
-import mt from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
-import vt from "../../utils/getImageUrl/getImageUrl.mjs";
-import K from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/ActivityGalleryItem.mjs";
-function zt({
-  children: A,
-  columnCount: x = 2,
-  rowCount: F = 2,
-  spacing: c = 2,
-  edgeSpacing: w = 0,
-  direction: L = "vertical",
-  defaultContainerWidth: O = 360,
-  defaultContainerHeight: tt = 0,
-  ...l
-}) {
-  const { spacing: H } = gt(), [rt, B] = v(O), [et, U] = v(tt), [N, nt] = v(0), b = 4 / 3, f = (rt - c) / x, p = L === "horizontal" ? (et - c) / F : f * b, s = u(null), g = u([]), R = u([]), I = u(!1), k = u(!0), P = u(0), C = u(0), m = u(0), h = u(
-    /* @__PURE__ */ new Map()
-  ), [y, ot] = v(
-    S.toArray(A).filter(Q).filter((t) => t.type === _ || t.type === K)
-  ), [d, X] = v(
-    y.map((t) => {
-      var o;
-      const r = ((o = pt(t.props.children)) == null ? void 0 : o.props.src) || "";
-      if (!r) return null;
-      const e = t.props.width ?? f, n = t.props.height ?? p;
-      return {
-        originalSrc: r,
-        originWidth: e,
-        originHeight: n,
-        src: vt({
-          src: r,
-          width: e
-        }),
-        width: e,
-        height: n,
-        loaded: !1
-      };
-    }).filter((t) => t !== null)
-  ), G = y.length, j = lt(() => d.length ? new Map(d.map((t) => [t.originalSrc, t])) : null, [d]), q = (t) => {
-    var r, e;
-    I.current = !0, P.current = t.clientX - (((r = s.current) == null ? void 0 : r.offsetLeft) || 0), C.current = ((e = s.current) == null ? void 0 : e.scrollLeft) || 0;
-  }, V = (t) => {
-    I.current && (t.currentTarget.style.cursor = "grabbing", s.current && (s.current.scrollLeft = C.current - (t.clientX - s.current.offsetLeft - P.current)));
-  }, E = (t) => {
-    var e;
-    I.current = !1, C.current !== ((e = s.current) == null ? void 0 : e.scrollLeft) ? (t.currentTarget.style.cursor = "grab", k.current = !1, m.current && cancelAnimationFrame(m.current), m.current = requestAnimationFrame(() => {
-      k.current = !0;
-    })) : k.current = !0;
-  }, at = (t) => (r) => {
-    r.stopPropagation();
-    let e = null;
-    switch (r.key) {
-      case "ArrowRight":
-        r.preventDefault(), e = z(r.currentTarget, "right", g.current);
-        break;
-      case "ArrowLeft":
-        r.preventDefault(), e = z(r.currentTarget, "left", g.current);
-        break;
-      case "ArrowDown":
-        r.preventDefault(), e = z(r.currentTarget, "down", g.current);
-        break;
-      case "ArrowUp":
-        r.preventDefault(), e = z(r.currentTarget, "up", g.current);
-        break;
-      case "Enter":
-      case " ": {
-        r.preventDefault(), r.currentTarget.click();
-        return;
-      }
-      default:
-        return;
-    }
-    e == null || e.focus(), t == null || t(r);
-  }, st = (t) => (r) => {
-    if (r.stopPropagation(), r.key === "Enter" || r.key === " ") {
-      r.preventDefault(), r.currentTarget.click();
-      return;
-    }
-    const e = Number(r.currentTarget.getAttribute("aria-posinset")) - 1, n = r.key.replace("Arrow", "").toLowerCase();
-    if (!["left", "right", "up", "down"].includes(n)) {
-      t == null || t(r);
-      return;
-    }
-    r.preventDefault();
-    const o = dt(
-      R.current,
-      e,
-      n
-    ), a = g.current[o ?? -1];
-    a == null || a.focus(), t == null || t(r);
-  }, it = (t) => (r) => {
-    g.current[t] = r;
-  }, ut = (t, r, e) => (n) => {
-    R.current[r] || (R.current[r] = []), g.current[t] = n, R.current[r][e] = n;
-  }, $ = (t) => (r) => {
-    nt(Number(r.currentTarget.getAttribute("aria-posinset")) - 1), t == null || t(r);
-  }, T = (t) => {
-    const { naturalWidth: r, naturalHeight: e, src: n } = t.currentTarget;
-    h.current.set(n, { naturalWidth: r, naturalHeight: e }), h.current.size === d.length && X(
-      (o) => o.map((a) => {
-        const i = h.current.get(a.src);
-        return i ? {
-          ...a,
-          width: i.naturalWidth / i.naturalHeight * (a.height ?? p) || f,
-          height: a.height ?? p,
-          loaded: !0
-        } : a;
-      })
-    );
-  }, J = (t, r, e) => {
-    h.current.set(e, { naturalWidth: t, naturalHeight: r }), h.current.size === d.length && X(
-      (n) => n.map((o) => {
-        const a = h.current.get(o.src);
-        return a ? {
-          ...o,
-          width: a.naturalWidth / a.naturalHeight * (o.height ?? p) || f,
-          height: o.height ?? p,
-          loaded: !0
-        } : o;
-      })
-    );
-  };
-  if (M(() => {
-    const t = s.current, r = (e) => {
-      k.current || e.stopPropagation();
-    };
-    return t == null || t.addEventListener("click", r), () => {
-      t == null || t.removeEventListener("click", r);
-    };
-  }, []), M(() => {
-    const t = s.current, r = (e) => {
-      e.stopPropagation();
-    };
-    return t == null || t.addEventListener("touchmove", r), () => {
-      t == null || t.removeEventListener("touchmove", r);
-    };
-  }, []), M(() => {
-    ot(
-      S.toArray(A).filter(Q).filter((t) => t.type === _ || t.type === K)
-    );
-  }, [A]), mt(() => {
-    var t, r, e;
-    B(((r = (t = s.current) == null ? void 0 : t.parentElement) == null ? void 0 : r.offsetWidth) ?? 0), U(((e = s.current) == null ? void 0 : e.offsetHeight) ?? 0);
-  }, []), M(() => {
-    const t = () => {
-      var r, e, n;
-      B(((e = (r = s.current) == null ? void 0 : r.parentElement) == null ? void 0 : e.offsetWidth) ?? 0), U(((n = s.current) == null ? void 0 : n.offsetHeight) ?? 0);
-    };
-    return t(), window.addEventListener("resize", t), () => {
-      window.removeEventListener("resize", t);
-    };
-  }, []), M(() => () => {
-    m.current && cancelAnimationFrame(m.current);
-  }, []), L === "horizontal") {
-    const t = ht(
-      d,
-      y,
-      F,
-      f * b / 2
-    );
-    let r = f * b / 2;
-    r = r <= 0 ? 120 : r;
-    let e = 0;
-    return /* @__PURE__ */ W(
-      Z,
-      {
-        ref: s,
-        role: "list",
-        "aria-label": "콘텐츠",
-        "aria-orientation": "horizontal",
-        onMouseDown: q,
-        onMouseMove: V,
-        onMouseUp: E,
-        onMouseLeave: E,
-        pl: w,
-        pr: w,
-        ...l,
-        inlineCSS: {
-          display: "grid",
-          position: "relative",
-          width: "100%",
-          height: "100%",
-          overflowX: "auto",
-          scrollbarWidth: "none",
-          cursor: "grab",
-          transform: "translate3d(0, 0, 0)",
-          "&::-webkit-scrollbar": {
-            display: "none"
-          },
-          ...l == null ? void 0 : l.inlineCSS
-        },
-        children: t.map((n, o) => {
-          const a = o === t.length - 1;
-          return /* @__PURE__ */ W(ft, { gap: c, children: n.map((i, ct) => {
-            const D = e++;
-            return Y(i, {
-              setInnerRef: ut(D, o, ct),
-              tabIndex: D === N ? 0 : -1,
-              role: "listitem",
-              "aria-posinset": D + 1,
-              "aria-setsize": G,
-              width: i.props.width ?? r,
-              height: i.props.height ?? p,
-              direction: L,
-              spacing: c,
-              sourceMetadataMap: j ?? void 0,
-              onLoad: T,
-              onManualLoad: J,
-              onError: T,
-              onKeyDown: st(i.props.onKeyDown),
-              onFocus: $(i.props.onFocus),
-              style: {
-                marginBottom: a ? 0 : H.content(c),
-                ...i.props.style
-              },
-              ...i.props
-            });
-          }) }, `masonry-row-${o}`);
-        })
-      }
-    );
-  }
-  return /* @__PURE__ */ W(
-    Z,
-    {
-      ref: s,
-      role: "list",
-      "aria-label": "콘텐츠",
-      "aria-orientation": "vertical",
-      onMouseDown: q,
-      onMouseMove: V,
-      onMouseUp: E,
-      onMouseLeave: E,
-      pt: w,
-      pb: w,
-      ...l,
-      inlineCSS: {
-        width: "100%",
-        position: "relative",
-        transform: "translate3d(0, 0, 0)",
-        columnCount: x,
-        columnGap: H.content(c),
-        marginTop: -H.content(c),
-        ...l == null ? void 0 : l.inlineCSS
-      },
-      children: S.map(
-        y,
-        (t, r) => Y(t, {
-          setInnerRef: it(r),
-          role: "listitem",
-          tabIndex: r === N ? 0 : -1,
-          "aria-posinset": r + 1,
-          "aria-setsize": G,
-          width: t.props.width ?? f,
-          height: t.props.height ?? f * b / 2,
-          direction: L,
-          spacing: c,
-          sourceMetadataMap: j ?? void 0,
-          onLoad: T,
-          onManualLoad: J,
-          onError: T,
-          onKeyDown: at(t.props.onKeyDown),
-          onFocus: $(t.props.onFocus),
-          ...t.props
-        })
-      )
-    }
-  );
+import e from "../../hooks/useIsomorphicLayoutEffect/useIsomorphicLayoutEffect.mjs";
+import t from "../../utils/getImageUrl/index.mjs";
+import { findImageInChildren as n, findNextFocusableElement as r, getHorizontalLayoutRows as i, getNextIndexHorizontalFromRows as a } from "./Masonry.utils.mjs";
+import o from "./MasonryBlock/index.mjs";
+import s from "../../../teacher/profile/components/ActivityGallery/ActivityGalleryItem/index.mjs";
+import { Children as c, cloneElement as l, isValidElement as u, useEffect as d, useMemo as ee, useRef as f, useState as p } from "react";
+import { Box as m, Flexbox as h } from "@dotss/ui";
+import te from "@dotss/ui/core/useTheme";
+import { jsx as g } from "react/jsx-runtime";
+//#region shared/components/Masonry/Masonry.tsx
+function _({ children: _, columnCount: v = 2, rowCount: y = 2, spacing: b = 2, edgeSpacing: x = 0, direction: S = "vertical", defaultContainerWidth: C = 360, defaultContainerHeight: w = 0, ...T }) {
+	let { spacing: E } = te(), [ne, D] = p(C), [re, O] = p(w), [k, A] = p(0), j = 4 / 3, M = (ne - b) / v, N = S === "horizontal" ? (re - b) / y : M * j, P = f(null), F = f([]), I = f([]), L = f(!1), R = f(!0), z = f(0), B = f(0), V = f(0), H = f(/* @__PURE__ */ new Map()), [U, ie] = p(c.toArray(_).filter(u).filter((e) => e.type === o || e.type === s)), [W, G] = p(U.map((e) => {
+		let r = n(e.props.children)?.props.src || "";
+		if (!r) return null;
+		let i = e.props.width ?? M, a = e.props.height ?? N;
+		return {
+			originalSrc: r,
+			originWidth: i,
+			originHeight: a,
+			src: t({
+				src: r,
+				width: i
+			}),
+			width: i,
+			height: a,
+			loaded: !1
+		};
+	}).filter((e) => e !== null)), K = U.length, q = ee(() => W.length ? new Map(W.map((e) => [e.originalSrc, e])) : null, [W]), J = (e) => {
+		L.current = !0, z.current = e.clientX - (P.current?.offsetLeft || 0), B.current = P.current?.scrollLeft || 0;
+	}, Y = (e) => {
+		L.current && (e.currentTarget.style.cursor = "grabbing", P.current && (P.current.scrollLeft = B.current - (e.clientX - P.current.offsetLeft - z.current)));
+	}, X = (e) => {
+		L.current = !1, B.current === P.current?.scrollLeft ? R.current = !0 : (e.currentTarget.style.cursor = "grab", R.current = !1, V.current && cancelAnimationFrame(V.current), V.current = requestAnimationFrame(() => {
+			R.current = !0;
+		}));
+	}, ae = (e) => (t) => {
+		t.stopPropagation();
+		let n = null;
+		switch (t.key) {
+			case "ArrowRight":
+				t.preventDefault(), n = r(t.currentTarget, "right", F.current);
+				break;
+			case "ArrowLeft":
+				t.preventDefault(), n = r(t.currentTarget, "left", F.current);
+				break;
+			case "ArrowDown":
+				t.preventDefault(), n = r(t.currentTarget, "down", F.current);
+				break;
+			case "ArrowUp":
+				t.preventDefault(), n = r(t.currentTarget, "up", F.current);
+				break;
+			case "Enter":
+			case " ":
+				t.preventDefault(), t.currentTarget.click();
+				return;
+			default: return;
+		}
+		n?.focus(), e?.(t);
+	}, oe = (e) => (t) => {
+		if (t.stopPropagation(), t.key === "Enter" || t.key === " ") {
+			t.preventDefault(), t.currentTarget.click();
+			return;
+		}
+		let n = Number(t.currentTarget.getAttribute("aria-posinset")) - 1, r = t.key.replace("Arrow", "").toLowerCase();
+		if (![
+			"left",
+			"right",
+			"up",
+			"down"
+		].includes(r)) {
+			e?.(t);
+			return;
+		}
+		t.preventDefault();
+		let i = a(I.current, n, r);
+		F.current[i ?? -1]?.focus(), e?.(t);
+	}, se = (e) => (t) => {
+		F.current[e] = t;
+	}, ce = (e, t, n) => (r) => {
+		I.current[t] || (I.current[t] = []), F.current[e] = r, I.current[t][n] = r;
+	}, Z = (e) => (t) => {
+		A(Number(t.currentTarget.getAttribute("aria-posinset")) - 1), e?.(t);
+	}, Q = (e) => {
+		let { naturalWidth: t, naturalHeight: n, src: r } = e.currentTarget;
+		H.current.set(r, {
+			naturalWidth: t,
+			naturalHeight: n
+		}), H.current.size === W.length && G((e) => e.map((e) => {
+			let t = H.current.get(e.src);
+			return t ? {
+				...e,
+				width: t.naturalWidth / t.naturalHeight * (e.height ?? N) || M,
+				height: e.height ?? N,
+				loaded: !0
+			} : e;
+		}));
+	}, $ = (e, t, n) => {
+		H.current.set(n, {
+			naturalWidth: e,
+			naturalHeight: t
+		}), H.current.size === W.length && G((e) => e.map((e) => {
+			let t = H.current.get(e.src);
+			return t ? {
+				...e,
+				width: t.naturalWidth / t.naturalHeight * (e.height ?? N) || M,
+				height: e.height ?? N,
+				loaded: !0
+			} : e;
+		}));
+	};
+	if (d(() => {
+		let e = P.current, t = (e) => {
+			R.current || e.stopPropagation();
+		};
+		return e?.addEventListener("click", t), () => {
+			e?.removeEventListener("click", t);
+		};
+	}, []), d(() => {
+		let e = P.current, t = (e) => {
+			e.stopPropagation();
+		};
+		return e?.addEventListener("touchmove", t), () => {
+			e?.removeEventListener("touchmove", t);
+		};
+	}, []), d(() => {
+		ie(c.toArray(_).filter(u).filter((e) => e.type === o || e.type === s));
+	}, [_]), e(() => {
+		D(P.current?.parentElement?.offsetWidth ?? 0), O(P.current?.offsetHeight ?? 0);
+	}, []), d(() => {
+		let e = () => {
+			D(P.current?.parentElement?.offsetWidth ?? 0), O(P.current?.offsetHeight ?? 0);
+		};
+		return e(), window.addEventListener("resize", e), () => {
+			window.removeEventListener("resize", e);
+		};
+	}, []), d(() => () => {
+		V.current && cancelAnimationFrame(V.current);
+	}, []), S === "horizontal") {
+		let e = i(W, U, y, M * j / 2), t = M * j / 2;
+		t = t <= 0 ? 120 : t;
+		let n = 0;
+		return /* @__PURE__ */ g(m, {
+			ref: P,
+			role: "list",
+			"aria-label": "콘텐츠",
+			"aria-orientation": "horizontal",
+			onMouseDown: J,
+			onMouseMove: Y,
+			onMouseUp: X,
+			onMouseLeave: X,
+			pl: x,
+			pr: x,
+			...T,
+			inlineCSS: {
+				display: "grid",
+				position: "relative",
+				width: "100%",
+				height: "100%",
+				overflowX: "auto",
+				scrollbarWidth: "none",
+				cursor: "grab",
+				transform: "translate3d(0, 0, 0)",
+				"&::-webkit-scrollbar": { display: "none" },
+				...T?.inlineCSS
+			},
+			children: e.map((r, i) => {
+				let a = i === e.length - 1;
+				return /* @__PURE__ */ g(h, {
+					gap: b,
+					children: r.map((e, r) => {
+						let o = n++;
+						return l(e, {
+							setInnerRef: ce(o, i, r),
+							tabIndex: o === k ? 0 : -1,
+							role: "listitem",
+							"aria-posinset": o + 1,
+							"aria-setsize": K,
+							width: e.props.width ?? t,
+							height: e.props.height ?? N,
+							direction: S,
+							spacing: b,
+							sourceMetadataMap: q ?? void 0,
+							onLoad: Q,
+							onManualLoad: $,
+							onError: Q,
+							onKeyDown: oe(e.props.onKeyDown),
+							onFocus: Z(e.props.onFocus),
+							style: {
+								marginBottom: a ? 0 : E.content(b),
+								...e.props.style
+							},
+							...e.props
+						});
+					})
+				}, `masonry-row-${i}`);
+			})
+		});
+	}
+	return /* @__PURE__ */ g(m, {
+		ref: P,
+		role: "list",
+		"aria-label": "콘텐츠",
+		"aria-orientation": "vertical",
+		onMouseDown: J,
+		onMouseMove: Y,
+		onMouseUp: X,
+		onMouseLeave: X,
+		pt: x,
+		pb: x,
+		...T,
+		inlineCSS: {
+			width: "100%",
+			position: "relative",
+			transform: "translate3d(0, 0, 0)",
+			columnCount: v,
+			columnGap: E.content(b),
+			marginTop: -E.content(b),
+			...T?.inlineCSS
+		},
+		children: c.map(U, (e, t) => l(e, {
+			setInnerRef: se(t),
+			role: "listitem",
+			tabIndex: t === k ? 0 : -1,
+			"aria-posinset": t + 1,
+			"aria-setsize": K,
+			width: e.props.width ?? M,
+			height: e.props.height ?? M * j / 2,
+			direction: S,
+			spacing: b,
+			sourceMetadataMap: q ?? void 0,
+			onLoad: Q,
+			onManualLoad: $,
+			onError: Q,
+			onKeyDown: ae(e.props.onKeyDown),
+			onFocus: Z(e.props.onFocus),
+			...e.props
+		}))
+	});
 }
-export {
-  zt as default
-};
+//#endregion
+export { _ as default };