smart-masonry-grid 0.1.0

package/dist/react/index.js

@@ -0,0 +1,612 @@
+"use client";
+import { useRef, useState, Children, useMemo, useCallback, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/layout.ts
+function computeLayout(input) {
+  const { items, containerWidth, columnCount, gap } = input;
+  if (columnCount <= 0 || containerWidth <= 0 || items.length === 0) {
+    return { positions: [], columnHeights: [], totalHeight: 0 };
+  }
+  const columnWidth = (containerWidth - (columnCount - 1) * gap) / columnCount;
+  const columnHeights = new Float64Array(columnCount);
+  const positions = new Array(items.length);
+  for (let i = 0; i < items.length; i++) {
+    const item = items[i];
+    let shortestCol = 0;
+    let shortestHeight = columnHeights[0];
+    for (let c = 1; c < columnCount; c++) {
+      if (columnHeights[c] < shortestHeight) {
+        shortestHeight = columnHeights[c];
+        shortestCol = c;
+      }
+    }
+    const left = shortestCol * (columnWidth + gap);
+    const top = columnHeights[shortestCol];
+    positions[i] = {
+      id: item.id,
+      index: item.index,
+      top,
+      left,
+      width: columnWidth,
+      height: item.height,
+      column: shortestCol
+    };
+    columnHeights[shortestCol] = top + item.height + gap;
+  }
+  let maxHeight = 0;
+  for (let c = 0; c < columnCount; c++) {
+    if (columnHeights[c] > maxHeight) {
+      maxHeight = columnHeights[c];
+    }
+  }
+  const totalHeight = maxHeight > 0 ? maxHeight - gap : 0;
+  return {
+    positions,
+    columnHeights: Array.from(columnHeights),
+    totalHeight
+  };
+}
+function resolveColumnCount(containerWidth, strategy, gap) {
+  if (strategy.type === "fixed") {
+    return Math.max(1, strategy.count);
+  }
+  if (strategy.type === "responsive") {
+    return resolveResponsiveColumns(containerWidth, strategy.breakpoints);
+  }
+  const count = Math.floor((containerWidth + gap) / (strategy.minColumnWidth + gap));
+  return Math.max(1, count);
+}
+function resolveResponsiveColumns(containerWidth, breakpoints) {
+  const entries = Object.keys(breakpoints).map((w) => [Number(w), breakpoints[Number(w)]]).sort((a, b) => b[0] - a[0]);
+  for (const [minWidth, cols] of entries) {
+    if (containerWidth >= minWidth) {
+      return Math.max(1, cols);
+    }
+  }
+  return entries.length > 0 ? Math.max(1, entries[entries.length - 1][1]) : 1;
+}
+
+// src/react/utils.ts
+var NAMED_BREAKPOINTS = {
+  sm: 640,
+  md: 768,
+  lg: 1024,
+  xl: 1280
+};
+function resolveStrategy(columns) {
+  if (columns === void 0) return { type: "auto", minColumnWidth: 250 };
+  if (typeof columns === "number") return { type: "fixed", count: columns };
+  if ("type" in columns) return columns;
+  const breakpoints = {};
+  for (const [key, value] of Object.entries(columns)) {
+    const namedPx = NAMED_BREAKPOINTS[key];
+    breakpoints[namedPx ?? Number(key)] = value;
+  }
+  return { type: "responsive", breakpoints };
+}
+function resolveAnimationConfig(animate) {
+  if (!animate) return null;
+  if (animate === true) {
+    return { duration: 300, easing: "ease-out", offset: 20 };
+  }
+  return {
+    duration: animate.duration ?? 300,
+    easing: animate.easing ?? "ease-out",
+    offset: animate.offset ?? 20
+  };
+}
+function Masonry({
+  children,
+  columns,
+  gap = 16,
+  className,
+  style,
+  onLayout,
+  animate,
+  onReachEnd,
+  reachEndThreshold = 200
+}) {
+  const containerRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const [positions, setPositions] = useState([]);
+  const [totalHeight, setTotalHeight] = useState(0);
+  const animConfig = resolveAnimationConfig(animate);
+  const animatedRef = useRef(/* @__PURE__ */ new Set());
+  const pendingAnimRef = useRef(/* @__PURE__ */ new Set());
+  const [, forceUpdate] = useState(0);
+  const sentinelRef = useRef(null);
+  const reachEndFiredRef = useRef(false);
+  const childArray = Children.toArray(children);
+  const childCount = childArray.length;
+  const strategy = resolveStrategy(columns);
+  const stableStrategy = useMemo(() => strategy, [
+    strategy.type,
+    strategy.type === "fixed" ? strategy.count : void 0,
+    strategy.type === "auto" ? strategy.minColumnWidth : void 0,
+    strategy.type === "responsive" ? JSON.stringify(strategy.breakpoints) : void 0
+  ]);
+  const computePositions = useCallback(() => {
+    const container = containerRef.current;
+    if (!container || childCount === 0) return;
+    const containerWidth = container.offsetWidth;
+    if (containerWidth <= 0) return;
+    const colCount = resolveColumnCount(containerWidth, stableStrategy, gap);
+    const items = [];
+    for (let i = 0; i < childCount; i++) {
+      const el = itemRefs.current.get(i);
+      const height = el ? el.offsetHeight : 0;
+      items.push({ id: i, index: i, height });
+    }
+    const result = computeLayout({
+      items,
+      containerWidth,
+      columnCount: colCount,
+      gap
+    });
+    setPositions(result.positions);
+    setTotalHeight(result.totalHeight);
+    onLayout?.(result);
+  }, [childCount, gap, stableStrategy, onLayout]);
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    const ro = new ResizeObserver(() => computePositions());
+    ro.observe(container);
+    return () => ro.disconnect();
+  }, [computePositions]);
+  useEffect(() => {
+    const items = itemRefs.current;
+    if (items.size === 0) return;
+    const ro = new ResizeObserver(() => computePositions());
+    for (const [, el] of items) {
+      ro.observe(el);
+    }
+    return () => ro.disconnect();
+  }, [childCount, computePositions]);
+  useEffect(() => {
+    computePositions();
+  }, [computePositions]);
+  useEffect(() => {
+    if (!animConfig || positions.length === 0) return;
+    const newItems = [];
+    for (let i = 0; i < positions.length; i++) {
+      if (!animatedRef.current.has(i)) {
+        animatedRef.current.add(i);
+        pendingAnimRef.current.add(i);
+        newItems.push(i);
+      }
+    }
+    if (newItems.length === 0) return;
+    forceUpdate((c) => c + 1);
+    requestAnimationFrame(() => {
+      pendingAnimRef.current.clear();
+      forceUpdate((c) => c + 1);
+    });
+  }, [positions, animConfig]);
+  useEffect(() => {
+    reachEndFiredRef.current = false;
+  }, [childCount]);
+  useEffect(() => {
+    if (!onReachEnd) return;
+    const sentinel = sentinelRef.current;
+    if (!sentinel) return;
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting && !reachEndFiredRef.current) {
+          reachEndFiredRef.current = true;
+          onReachEnd();
+        }
+      },
+      { rootMargin: `0px 0px ${reachEndThreshold}px 0px` }
+    );
+    observer.observe(sentinel);
+    return () => observer.disconnect();
+  }, [onReachEnd, reachEndThreshold, totalHeight]);
+  const containerStyle = {
+    position: "relative",
+    overflow: "hidden",
+    height: totalHeight > 0 ? totalHeight : void 0,
+    ...style
+  };
+  return /* @__PURE__ */ jsxs("div", { ref: containerRef, className, style: containerStyle, children: [
+    childArray.map((child, index) => {
+      const pos = positions[index];
+      const isPending = animConfig && pendingAnimRef.current.has(index);
+      const hasAnimated = animConfig && animatedRef.current.has(index);
+      const itemStyle = pos ? {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transform: `translate3d(${pos.left}px, ${pos.top + (isPending ? animConfig.offset ?? 20 : 0)}px, 0)`,
+        width: pos.width,
+        willChange: "transform",
+        opacity: isPending ? 0 : 1,
+        transition: hasAnimated ? `opacity ${animConfig.duration}ms ${animConfig.easing}, transform ${animConfig.duration}ms ${animConfig.easing}` : void 0
+      } : { visibility: "hidden" };
+      return /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: (el) => {
+            if (el) {
+              itemRefs.current.set(index, el);
+            } else {
+              itemRefs.current.delete(index);
+            }
+          },
+          style: itemStyle,
+          children: child
+        },
+        index
+      );
+    }),
+    onReachEnd && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: sentinelRef,
+        style: {
+          position: "absolute",
+          bottom: 0,
+          height: 1,
+          width: "100%",
+          pointerEvents: "none"
+        }
+      }
+    )
+  ] });
+}
+function findVisibleItems(positions, sortedIndices, scrollTop, viewportHeight, overscan, maxItemHeight) {
+  if (sortedIndices.length === 0) return [];
+  const rangeTop = scrollTop - overscan;
+  const rangeBottom = scrollTop + viewportHeight + overscan;
+  const searchTop = rangeTop - maxItemHeight;
+  let lo = 0;
+  let hi = sortedIndices.length;
+  while (lo < hi) {
+    const mid = lo + hi >>> 1;
+    if (positions[sortedIndices[mid]].top < searchTop) {
+      lo = mid + 1;
+    } else {
+      hi = mid;
+    }
+  }
+  const result = [];
+  for (let i = lo; i < sortedIndices.length; i++) {
+    const idx = sortedIndices[i];
+    const pos = positions[idx];
+    if (pos.top >= rangeBottom) break;
+    if (pos.top + pos.height > rangeTop) {
+      result.push(idx);
+    }
+  }
+  return result;
+}
+function VirtualMasonry({
+  totalItems,
+  renderItem,
+  columns,
+  gap = 16,
+  height,
+  overscan = 600,
+  estimatedItemHeight = 300,
+  className,
+  style,
+  onLayout,
+  animate,
+  onReachEnd,
+  reachEndThreshold = 200,
+  placeholder
+}) {
+  const scrollRef = useRef(null);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const [heightMap, setHeightMap] = useState(
+    () => /* @__PURE__ */ new Map()
+  );
+  const [scrollTop, setScrollTop] = useState(0);
+  const [containerWidth, setContainerWidth] = useState(0);
+  const animConfig = resolveAnimationConfig(animate);
+  const animatedRef = useRef(/* @__PURE__ */ new Set());
+  const pendingAnimRef = useRef(/* @__PURE__ */ new Set());
+  const [, forceUpdate] = useState(0);
+  const reachEndFiredRef = useRef(false);
+  const prevTotalItemsRef = useRef(totalItems);
+  if (prevTotalItemsRef.current !== totalItems) {
+    prevTotalItemsRef.current = totalItems;
+    setHeightMap(/* @__PURE__ */ new Map());
+    animatedRef.current.clear();
+    pendingAnimRef.current.clear();
+  }
+  const strategy = resolveStrategy(columns);
+  const stableStrategy = useMemo(() => strategy, [
+    strategy.type,
+    strategy.type === "fixed" ? strategy.count : void 0,
+    strategy.type === "auto" ? strategy.minColumnWidth : void 0,
+    strategy.type === "responsive" ? JSON.stringify(strategy.breakpoints) : void 0
+  ]);
+  const columnCount = useMemo(
+    () => containerWidth > 0 ? resolveColumnCount(containerWidth, stableStrategy, gap) : 1,
+    [containerWidth, stableStrategy, gap]
+  );
+  const layoutItems = useMemo(() => {
+    const items = [];
+    for (let i = 0; i < totalItems; i++) {
+      items.push({
+        id: i,
+        index: i,
+        height: heightMap.get(i) ?? estimatedItemHeight
+      });
+    }
+    return items;
+  }, [totalItems, heightMap, estimatedItemHeight]);
+  const layout = useMemo(() => {
+    if (containerWidth <= 0) return null;
+    const result = computeLayout({
+      items: layoutItems,
+      containerWidth,
+      columnCount,
+      gap
+    });
+    return result;
+  }, [layoutItems, containerWidth, columnCount, gap]);
+  useEffect(() => {
+    if (layout) onLayout?.(layout);
+  }, [layout, onLayout]);
+  const sortedIndices = useMemo(() => {
+    if (!layout) return [];
+    const indices = layout.positions.map((_, i) => i);
+    indices.sort((a, b) => layout.positions[a].top - layout.positions[b].top);
+    return indices;
+  }, [layout]);
+  const maxItemHeight = useMemo(() => {
+    let max = estimatedItemHeight;
+    for (const h of heightMap.values()) {
+      if (h > max) max = h;
+    }
+    return max;
+  }, [heightMap, estimatedItemHeight]);
+  const visibleIndices = useMemo(() => {
+    if (!layout) return [];
+    return findVisibleItems(
+      layout.positions,
+      sortedIndices,
+      scrollTop,
+      height,
+      overscan,
+      maxItemHeight
+    );
+  }, [layout, sortedIndices, scrollTop, height, overscan, maxItemHeight]);
+  useEffect(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const ro = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const w = entry.borderBoxSize?.[0]?.inlineSize ?? entry.contentRect.width;
+        setContainerWidth(w);
+      }
+    });
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, []);
+  const itemRORef = useRef(null);
+  const observedRef = useRef(/* @__PURE__ */ new Set());
+  const measureItems = useCallback(() => {
+    const refs = itemRefs.current;
+    if (refs.size === 0) return;
+    setHeightMap((prev) => {
+      let changed = false;
+      const updates = new Map(prev);
+      for (const [index, el] of refs) {
+        const measured = el.offsetHeight;
+        if (measured > 0 && measured !== updates.get(index)) {
+          updates.set(index, measured);
+          changed = true;
+        }
+      }
+      return changed ? updates : prev;
+    });
+  }, []);
+  useEffect(() => {
+    const ro = new ResizeObserver(() => {
+      measureItems();
+    });
+    itemRORef.current = ro;
+    return () => {
+      ro.disconnect();
+      itemRORef.current = null;
+      observedRef.current.clear();
+    };
+  }, [measureItems]);
+  useEffect(() => {
+    const ro = itemRORef.current;
+    if (!ro) return;
+    const refs = itemRefs.current;
+    const observed = observedRef.current;
+    const currentEls = /* @__PURE__ */ new Set();
+    for (const [, el] of refs) {
+      currentEls.add(el);
+      if (!observed.has(el)) {
+        ro.observe(el);
+        observed.add(el);
+      }
+    }
+    for (const el of observed) {
+      if (!currentEls.has(el)) {
+        ro.unobserve(el);
+        observed.delete(el);
+      }
+    }
+  });
+  useEffect(() => {
+    measureItems();
+  });
+  useEffect(() => {
+    reachEndFiredRef.current = false;
+  }, [totalItems]);
+  const handleScroll = useCallback(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const currentScrollTop = el.scrollTop;
+    setScrollTop(currentScrollTop);
+    if (onReachEnd && !reachEndFiredRef.current && layout) {
+      if (currentScrollTop + height + reachEndThreshold >= layout.totalHeight) {
+        reachEndFiredRef.current = true;
+        onReachEnd();
+      }
+    }
+  }, [onReachEnd, reachEndThreshold, height, layout]);
+  useEffect(() => {
+    if (!animConfig || visibleIndices.length === 0) return;
+    const newItems = [];
+    for (const idx of visibleIndices) {
+      if (!animatedRef.current.has(idx)) {
+        animatedRef.current.add(idx);
+        pendingAnimRef.current.add(idx);
+        newItems.push(idx);
+      }
+    }
+    if (newItems.length === 0) return;
+    forceUpdate((c) => c + 1);
+    requestAnimationFrame(() => {
+      pendingAnimRef.current.clear();
+      forceUpdate((c) => c + 1);
+    });
+  }, [visibleIndices, animConfig]);
+  const containerStyle = {
+    height,
+    overflowY: "auto",
+    position: "relative",
+    ...style
+  };
+  const innerStyle = {
+    position: "relative",
+    height: layout?.totalHeight ?? 0,
+    width: "100%"
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: scrollRef,
+      className,
+      style: containerStyle,
+      onScroll: handleScroll,
+      children: /* @__PURE__ */ jsx("div", { style: innerStyle, children: visibleIndices.map((index) => {
+        const pos = layout?.positions[index];
+        if (!pos) return null;
+        const isMeasured = heightMap.has(index);
+        const isPending = animConfig && pendingAnimRef.current.has(index);
+        const hasAnimated = animConfig && animatedRef.current.has(index);
+        const itemStyle = {
+          position: "absolute",
+          top: 0,
+          left: 0,
+          transform: `translate3d(${pos.left}px, ${pos.top + (isPending ? animConfig.offset ?? 20 : 0)}px, 0)`,
+          width: pos.width,
+          willChange: "transform",
+          opacity: isPending ? 0 : 1,
+          transition: hasAnimated ? `opacity ${animConfig.duration}ms ${animConfig.easing}, transform ${animConfig.duration}ms ${animConfig.easing}` : void 0
+        };
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ref: (el) => {
+              if (el) {
+                itemRefs.current.set(index, el);
+              } else {
+                itemRefs.current.delete(index);
+              }
+            },
+            style: itemStyle,
+            children: placeholder && !isMeasured ? placeholder : renderItem(index)
+          },
+          index
+        );
+      }) })
+    }
+  );
+}
+function useMasonryGrid(options = {}) {
+  const { columns, gap = 16, onLayout } = options;
+  const strategy = resolveStrategy(columns);
+  const containerElRef = useRef(null);
+  const itemHeights = useRef(/* @__PURE__ */ new Map());
+  const [layout, setLayout] = useState(null);
+  const [columnCount, setColumnCount] = useState(0);
+  const compute = useCallback(() => {
+    const container = containerElRef.current;
+    if (!container) return;
+    const containerWidth = container.offsetWidth;
+    if (containerWidth <= 0) return;
+    const colCount = resolveColumnCount(containerWidth, strategy, gap);
+    setColumnCount(colCount);
+    const children = Array.from(container.children);
+    const items = children.map((el, i) => ({
+      id: i,
+      index: i,
+      height: itemHeights.current.get(i) ?? el.offsetHeight
+    }));
+    if (items.length === 0) return;
+    const result = computeLayout({
+      items,
+      containerWidth,
+      columnCount: colCount,
+      gap
+    });
+    children.forEach((el, i) => {
+      const h = el.offsetHeight;
+      if (h > 0) itemHeights.current.set(i, h);
+    });
+    setLayout(result);
+    onLayout?.(result);
+  }, [gap, strategy, onLayout]);
+  const containerRef = useCallback(
+    (el) => {
+      containerElRef.current = el;
+      if (!el) return;
+      compute();
+      const ro = new ResizeObserver(() => compute());
+      ro.observe(el);
+      return () => ro.disconnect();
+    },
+    [compute]
+  );
+  useEffect(() => {
+    const container = containerElRef.current;
+    if (!container) return;
+    const ro = new ResizeObserver(() => compute());
+    const children = Array.from(container.children);
+    for (const child of children) {
+      ro.observe(child);
+    }
+    return () => ro.disconnect();
+  }, [layout?.positions.length, compute]);
+  const getItemStyle = useCallback(
+    (index) => {
+      const pos = layout?.positions[index];
+      if (!pos) return { visibility: "hidden" };
+      return {
+        position: "absolute",
+        top: 0,
+        left: 0,
+        transform: `translate3d(${pos.left}px, ${pos.top}px, 0)`,
+        width: pos.width,
+        willChange: "transform"
+      };
+    },
+    [layout]
+  );
+  const refresh = useCallback(() => {
+    itemHeights.current.clear();
+    compute();
+  }, [compute]);
+  return {
+    containerRef,
+    layout,
+    columnCount,
+    refresh,
+    getItemStyle
+  };
+}
+
+export { Masonry, VirtualMasonry, useMasonryGrid };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map