vane-waterfall 1.0.5 → 2.0.0

package/dist/chunks/WaterfallCore-BSXw7bl_.js

@@ -0,0 +1,581 @@
+import { jsxs as Kt, jsx as $t } from "react/jsx-runtime";
+import { forwardRef as Xt, useRef as c, useMemo as lt, useState as ut, useCallback as j, useEffect as vt, useImperativeHandle as Zt } from "react";
+function Ot(r = 0) {
+  return typeof r == "number" ? { top: r, right: r, bottom: r, left: r } : {
+    top: r.top ?? 0,
+    right: r.right ?? 0,
+    bottom: r.bottom ?? 0,
+    left: r.left ?? 0
+  };
+}
+function te(r, i) {
+  return typeof r == "number" && Number.isFinite(r) && r > 0 ? r : i && i > 0 ? i : 0;
+}
+function ee(r) {
+  const {
+    heights: i,
+    columnGap: f,
+    rowGap: o,
+    alignmentMode: p = "shortest",
+    estimateHeight: C,
+    hooks: s
+  } = r, u = Ot(r.padding), b = r.containerWidth, g = s?.calculateColumns?.(r.columns), m = Math.max(
+    1,
+    Math.round(
+      typeof g == "number" && Number.isFinite(g) ? g : r.columns
+    )
+  ), I = (b - u.left - u.right - f * (m - 1)) / m, E = s?.calculateColumnWidth?.(
+    I,
+    m,
+    b
+  ), S = typeof E == "number" && Number.isFinite(E) ? E : I, H = Array(m).fill(u.top), N = Array(m).fill(0), Q = /* @__PURE__ */ new Map();
+  let F = 0;
+  if (i.length === 0)
+    return {
+      columns: m,
+      columnWidth: S,
+      padding: u,
+      columnHeights: H,
+      totalHeight: u.top + u.bottom,
+      positions: Q,
+      estimatedCount: 0
+    };
+  for (let L = 0; L < i.length; L++) {
+    const J = i[L], V = te(J, C);
+    if (V === 0) continue;
+    typeof J == "number" && J > 0 || (F += 1);
+    let k = 0;
+    if (p === "sequential")
+      k = L % m;
+    else if (p === "balanced") {
+      let T = N[0];
+      for (let R = 1; R < m; R++)
+        N[R] < T && (T = N[R], k = R);
+    } else {
+      let T = H[0];
+      for (let R = 1; R < H.length; R++)
+        H[R] < T && (T = H[R], k = R);
+    }
+    let z = {
+      x: u.left + k * (S + f),
+      y: H[k],
+      width: S,
+      height: V,
+      column: k,
+      row: Math.floor(L / m)
+    };
+    const P = s?.calculateItemPosition?.(L, V, z);
+    if (P) {
+      const T = { ...z, ...P };
+      P.column !== void 0 && P.x === void 0 && (T.x = u.left + Math.min(Math.max(0, T.column), m - 1) * (S + f)), z = T;
+    }
+    Q.set(L, z);
+    const K = Math.min(
+      Math.max(0, z.column),
+      H.length - 1
+    );
+    H[K] = z.y + z.height + o, N[K] += 1;
+  }
+  return {
+    columns: m,
+    columnWidth: S,
+    padding: u,
+    columnHeights: H,
+    totalHeight: Math.max(...H) + u.bottom,
+    positions: Q,
+    estimatedCount: F
+  };
+}
+function ne(r, i, f = "start", o = 0) {
+  let p = r.y + o;
+  return f === "center" ? p -= i / 2 - r.height / 2 : f === "end" && (p -= i - r.height), Math.max(0, p);
+}
+const re = 8;
+function oe(r, i, f = 0.5) {
+  const o = [];
+  for (const s of r)
+    Number.isFinite(s) && s > 0 && o.push(s);
+  if (o.length < re) return i;
+  o.sort((s, u) => s - u);
+  const p = Math.min(1, Math.max(0, f)), C = Math.min(o.length - 1, Math.round(p * (o.length - 1)));
+  return Math.max(1, Math.ceil(o[C]));
+}
+function ie(r, i, f, o, p = 1) {
+  if (i <= 0) return { start: 0, end: -1, hiddenCount: 0 };
+  if (r.size === 0) {
+    const v = Math.max(1, Math.ceil(o / 240) + 2);
+    return { start: 0, end: Math.min(i - 1, v - 1), hiddenCount: 0 };
+  }
+  const C = Math.max(0, o * p), s = f - C, u = f + Math.max(o, 1) + C;
+  let b = Number.POSITIVE_INFINITY, g = -1;
+  if (r.forEach((v, I) => {
+    const E = v.y;
+    v.y + v.height > s && E < u && (I < b && (b = I), I > g && (g = I));
+  }), g < 0) {
+    let v = 0, I = Number.POSITIVE_INFINITY;
+    r.forEach((S, H) => {
+      const N = Math.abs(S.y - f);
+      N < I && (I = N, v = H);
+    });
+    const E = Math.max(1, Math.ceil(o / 240) + 2);
+    b = Math.max(0, v - E), g = Math.min(i - 1, v + E);
+  }
+  b = Math.max(0, b), g = Math.min(i - 1, g), g < b && (g = b);
+  const m = g - b + 1;
+  return { start: b, end: g, hiddenCount: Math.max(0, i - m) };
+}
+function ce(r) {
+  return r ? r === !0 ? {
+    overscan: 1,
+    estimateHeight: 240,
+    dynamicHeights: !0,
+    adaptiveEstimate: !0,
+    estimateQuantile: 0.5
+  } : {
+    overscan: r.overscan ?? 1,
+    estimateHeight: r.estimateHeight ?? 240,
+    dynamicHeights: r.dynamicHeights ?? !0,
+    adaptiveEstimate: r.adaptiveEstimate ?? !0,
+    estimateQuantile: r.estimateQuantile ?? 0.5
+  } : null;
+}
+function kt(r, i, f, o) {
+  const p = i.y, C = i.y + i.height, s = f + o, u = Math.max(
+    0,
+    Math.min(s, C) - Math.max(f, p)
+  );
+  return {
+    index: r,
+    isVisible: u > 0,
+    visibleRatio: i.height > 0 ? Math.min(1, u / i.height) : 0,
+    isAboveViewport: C <= f,
+    isBelowViewport: p >= s
+  };
+}
+const ue = Xt(
+  function(i, f) {
+    const {
+      items: o = [],
+      renderItem: p,
+      keyExtractor: C = (t, e) => e,
+      columns: s = 3,
+      gap: u = 16,
+      rowGap: b,
+      columnGap: g,
+      alignmentMode: m = "shortest",
+      padding: v = 0,
+      containerStyle: I,
+      containerClassName: E,
+      itemStyle: S,
+      itemClassName: H,
+      useTransform: N = !0,
+      throttleDelay: Q = 16,
+      debounceDelay: F = 150,
+      reachBottomOffset: L = 100,
+      virtualize: J,
+      layoutHooks: V,
+      onMount: k,
+      onUnmount: z,
+      onBeforeLayout: P,
+      onLayout: K,
+      onLayoutComplete: T,
+      onItemMount: R,
+      onItemUnmount: At,
+      onItemEnterViewport: ht,
+      onItemLeaveViewport: ft,
+      onScroll: Rt,
+      onResize: It,
+      onReachBottom: mt,
+      onItemClick: Bt,
+      children: Ft,
+      containerRefExternal: Pt,
+      itemRefsExternal: Gt,
+      debug: gt = !1
+    } = i, _t = c(null), y = Pt ?? _t, xt = c(/* @__PURE__ */ new Map()), O = Gt ?? xt, $ = c(/* @__PURE__ */ new Map()), q = c(/* @__PURE__ */ new Map()), rt = c(null), X = c(), Z = c(), D = c(null), Tt = c(0), tt = c(!1), dt = c(0), pt = c(!1), Wt = c(""), Ct = c(void 0), ot = c(async () => {
+    }), et = c(!1), nt = c(!1), yt = c(/* @__PURE__ */ new Set()), bt = c(o);
+    bt.current = o;
+    const A = c(/* @__PURE__ */ new Map()), it = b ?? u, U = g ?? u, G = lt(() => Ot(v), [v]), Et = JSON.stringify(J ?? null), a = lt(
+      () => ce(JSON.parse(Et) ?? void 0),
+      [Et]
+    ), [_, Qt] = ut(() => ({
+      columns: s,
+      columnWidth: 0,
+      gap: U,
+      columnHeights: Array(s).fill(0),
+      totalHeight: 0,
+      containerWidth: 0,
+      containerHeight: 0
+    })), [ct, qt] = ut(
+      () => /* @__PURE__ */ new Map()
+    ), [B, St] = ut({
+      scrollTop: 0,
+      scrollLeft: 0,
+      scrollHeight: 0,
+      scrollWidth: 0,
+      clientHeight: 0,
+      clientWidth: 0,
+      isScrolling: !1,
+      direction: null
+    }), [, Dt] = ut({});
+    A.current = ct;
+    const Ht = c(_), Y = j(async () => {
+      const t = y.current;
+      if (!t) return;
+      const e = `${s}|${U}|${it}|${G.top},${G.right},${G.bottom},${G.left}|${m}|${a?.estimateHeight ?? ""}|${a?.adaptiveEstimate ?? ""}|${a?.estimateQuantile ?? ""}`;
+      if (tt.current) {
+        (e !== Wt.current || V !== Ct.current) && (pt.current = !0);
+        return;
+      }
+      if (tt.current = !0, Wt.current = e, Ct.current = V, nt.current = !1, await P?.() === !1) {
+        tt.current = !1;
+        return;
+      }
+      gt && console.time("[WaterfallCore] layout"), K?.();
+      const l = t.clientWidth, W = bt.current.map((M, at) => {
+        const Mt = O.current.get(at)?.offsetHeight ?? 0;
+        return Mt > 0 ? ($.current.set(at, Mt), Mt) : $.current.get(at) ?? 0;
+      });
+      let h;
+      if (a)
+        if (a.adaptiveEstimate === !1)
+          h = a.estimateHeight;
+        else {
+          const M = oe(
+            $.current.values(),
+            a.estimateHeight ?? 240,
+            a.estimateQuantile
+          );
+          Math.abs(M - dt.current) > 8 && (dt.current = M), h = dt.current || M;
+        }
+      const d = ee({
+        heights: W,
+        columns: s,
+        containerWidth: l,
+        columnGap: U,
+        rowGap: it,
+        padding: G,
+        alignmentMode: m,
+        estimateHeight: h,
+        hooks: V
+      }), w = {
+        columns: d.columns,
+        columnWidth: d.columnWidth,
+        gap: U,
+        columnHeights: d.columnHeights,
+        totalHeight: d.totalHeight,
+        containerWidth: l,
+        containerHeight: t.clientHeight
+      };
+      Ht.current = w, A.current = d.positions, Qt(w), qt(d.positions), et.current = !0, gt && (console.timeEnd("[WaterfallCore] layout"), d.estimatedCount > 0 && console.debug(
+        `[WaterfallCore] ${d.estimatedCount} 项按估值占位（estimateHeight=${h}）`
+      )), T?.(), tt.current = !1, pt.current && (pt.current = !1, ot.current());
+    }, [
+      s,
+      U,
+      it,
+      G,
+      m,
+      a?.estimateHeight,
+      V,
+      P,
+      K,
+      T,
+      gt,
+      y,
+      O
+    ]);
+    ot.current = Y;
+    const st = j(() => {
+      Z.current && window.clearTimeout(Z.current), Z.current = window.setTimeout(() => {
+        ot.current();
+      }, F);
+    }, [F]), Lt = j(() => {
+      D.current == null && (D.current = requestAnimationFrame(() => {
+        D.current = null, ot.current();
+      }));
+    }, []), Nt = j((t) => {
+      const e = y.current;
+      e && St((n) => {
+        const l = e.scrollTop, W = e.scrollLeft, h = l > n.scrollTop ? "down" : l < n.scrollTop ? "up" : W > n.scrollLeft ? "right" : W < n.scrollLeft ? "left" : n.direction;
+        return {
+          scrollTop: l,
+          scrollLeft: W,
+          scrollHeight: e.scrollHeight,
+          scrollWidth: e.scrollWidth,
+          clientHeight: e.clientHeight,
+          clientWidth: e.clientWidth,
+          isScrolling: t,
+          direction: h
+        };
+      });
+    }, [y]), Ut = j(() => {
+      const t = y.current;
+      if (!t) return;
+      const e = Date.now();
+      Nt(!0);
+      const n = t.scrollTop, { clientHeight: l, scrollHeight: W } = t;
+      if (Rt?.(n, t.scrollLeft), e - Tt.current >= Q) {
+        if (Tt.current = e, mt) {
+          const h = W - (n + l);
+          h < L && mt(h);
+        }
+        if (ht || ft) {
+          const h = A.current, d = /* @__PURE__ */ new Set();
+          h.forEach((w, M) => {
+            Math.max(
+              0,
+              Math.min(n + l, w.y + w.height) - Math.max(n, w.y)
+            ) > 0 && (d.add(M), yt.current.has(M) || ht?.(
+              M,
+              kt(M, w, n, l)
+            ));
+          }), yt.current.forEach((w) => {
+            if (d.has(w)) return;
+            const M = h.get(w);
+            M && ft?.(
+              w,
+              kt(w, M, n, l)
+            );
+          }), yt.current = d;
+        }
+      }
+      X.current && window.clearTimeout(X.current), X.current = window.setTimeout(() => {
+        St((h) => ({ ...h, isScrolling: !1 }));
+      }, F);
+    }, [
+      Nt,
+      Rt,
+      mt,
+      ht,
+      ft,
+      Q,
+      F,
+      L
+    ]), Yt = j(() => {
+      const t = y.current;
+      t && (It?.(t.clientWidth, t.clientHeight), st());
+    }, [It, st, y]);
+    vt(() => {
+      k?.(), et.current || Y();
+      const t = y.current;
+      return t && typeof ResizeObserver < "u" && (rt.current = new ResizeObserver(Yt), rt.current.observe(t)), () => {
+        z?.(), rt.current?.disconnect(), rt.current = null, q.current.forEach((e) => {
+          try {
+            e.disconnect();
+          } catch {
+          }
+        }), q.current.clear(), X.current && window.clearTimeout(X.current), Z.current && window.clearTimeout(Z.current), D.current != null && (cancelAnimationFrame(D.current), D.current = null);
+      };
+    }, []);
+    const wt = c(/* @__PURE__ */ new Map());
+    vt(() => {
+      et.current = !1, nt.current = !1, wt.current.clear(), st();
+    }, [o, st]), vt(() => {
+      et.current = !1, nt.current = !1, Y();
+    }, [
+      s,
+      U,
+      it,
+      G,
+      m,
+      a?.estimateHeight,
+      a?.adaptiveEstimate,
+      a?.estimateQuantile,
+      V
+    ]);
+    const Vt = c(
+      () => {
+      }
+    );
+    Vt.current = (t, e) => {
+      if (e) {
+        O.current.set(t, e);
+        const n = e.offsetHeight;
+        if (n > 0 && $.current.set(t, n), (a ? a.dynamicHeights !== !1 : !0) && !q.current.has(t) && typeof ResizeObserver < "u") {
+          const W = new ResizeObserver(() => {
+            const h = e.offsetHeight;
+            if (h <= 0) return;
+            $.current.set(t, h);
+            const d = A.current.get(t), w = d ? Math.abs(d.height - h) > 0.5 : !1, M = wt.current.get(t) === h;
+            d ? w && !M && (wt.current.set(t, h), Lt()) : Lt();
+          });
+          try {
+            W.observe(e), q.current.set(t, W);
+          } catch {
+          }
+        }
+        R?.(t, e), et.current && !A.current.has(t) && !tt.current && !nt.current && (nt.current = !0, requestAnimationFrame(() => void Y()));
+      } else {
+        O.current.delete(t);
+        const n = q.current.get(t);
+        if (n) {
+          try {
+            n.disconnect();
+          } catch {
+          }
+          q.current.delete(t);
+        }
+        At?.(t);
+      }
+    };
+    const zt = c(
+      /* @__PURE__ */ new Map()
+    ), jt = (t) => {
+      let e = zt.current.get(t);
+      return e || (e = (n) => Vt.current(t, n), zt.current.set(t, e)), e;
+    }, x = lt(
+      () => a ? ie(
+        ct,
+        o.length,
+        B.scrollTop,
+        B.clientHeight || _.containerHeight || 600,
+        a.overscan
+      ) : { start: 0, end: Math.max(0, o.length - 1), hiddenCount: 0 },
+      [
+        a,
+        ct,
+        o.length,
+        B.scrollTop,
+        B.clientHeight,
+        _.containerHeight
+      ]
+    );
+    Zt(
+      f,
+      () => ({
+        relayout: () => {
+          $.current.clear(), bt.current.forEach((t, e) => {
+            const n = O.current.get(e);
+            n && $.current.set(e, n.offsetHeight);
+          }), Y();
+        },
+        scrollToItem: (t, e = {}) => {
+          const n = y.current, l = A.current.get(t);
+          !n || !l || n.scrollTo({
+            top: ne(
+              l,
+              n.clientHeight,
+              e.block ?? "start",
+              e.offset ?? 0
+            ),
+            behavior: e.behavior ?? "auto"
+          });
+        },
+        scrollToTop: (t = {}) => {
+          y.current?.scrollTo({
+            top: t.offset ?? 0,
+            behavior: t.behavior ?? "auto"
+          });
+        },
+        scrollToBottom: (t = {}) => {
+          const e = y.current;
+          e && e.scrollTo({
+            top: e.scrollHeight - e.clientHeight + (t.offset ?? 0),
+            behavior: t.behavior ?? "auto"
+          });
+        },
+        getItemPosition: (t) => A.current.get(t) ?? null,
+        getAllItemPositions: () => A.current,
+        getColumnHeights: () => Ht.current.columnHeights,
+        getLayoutInfo: () => Ht.current,
+        getViewportInfo: () => {
+          const t = y.current;
+          return t ? {
+            scrollTop: t.scrollTop,
+            scrollLeft: t.scrollLeft,
+            scrollHeight: t.scrollHeight,
+            scrollWidth: t.scrollWidth,
+            clientHeight: t.clientHeight,
+            clientWidth: t.clientWidth,
+            isScrolling: B.isScrolling,
+            direction: B.direction
+          } : B;
+        },
+        getVisibleRange: () => ({ start: x.start, end: x.end }),
+        forceUpdate: () => Dt({}),
+        getContainer: () => y.current,
+        getItemElement: (t) => O.current.get(t) ?? null,
+        measureItem: async (t) => {
+          const e = O.current.get(t);
+          if (e) {
+            const l = { width: e.offsetWidth, height: e.offsetHeight };
+            return l.height > 0 && $.current.set(t, l.height), l;
+          }
+          const n = $.current.get(t);
+          return n ? { width: _.columnWidth, height: n } : { width: _.columnWidth, height: a?.estimateHeight ?? 0 };
+        }
+      }),
+      [Y, _, B, x, y, O, a?.estimateHeight]
+    );
+    const Jt = lt(() => {
+      if (!a) return o.map((e, n) => n);
+      const t = [];
+      for (let e = x.start; e <= x.end; e++) t.push(e);
+      return t;
+    }, [a, o, x.start, x.end]);
+    return /* @__PURE__ */ Kt(
+      "div",
+      {
+        ref: y,
+        style: {
+          position: "relative",
+          overflowX: "hidden",
+          overflowY: "auto",
+          ...I
+        },
+        className: E,
+        onScroll: Ut,
+        "data-vane-waterfall": "",
+        children: [
+          Ft,
+          /* @__PURE__ */ $t(
+            "div",
+            {
+              style: {
+                position: "relative",
+                width: "100%",
+                height: _.totalHeight,
+                minWidth: 0
+              },
+              children: Jt.map((t) => {
+                const e = o[t];
+                if (e === void 0) return null;
+                const n = ct.get(t), l = n ? N ? {
+                  position: "absolute",
+                  transform: `translate(${n.x}px, ${n.y}px)`,
+                  width: n.width,
+                  boxSizing: "border-box"
+                } : {
+                  position: "absolute",
+                  left: n.x,
+                  top: n.y,
+                  width: n.width,
+                  boxSizing: "border-box"
+                } : { position: "absolute", opacity: 0, pointerEvents: "none" };
+                return /* @__PURE__ */ $t(
+                  "div",
+                  {
+                    ref: jt(t),
+                    style: { ...l, ...S },
+                    className: H,
+                    onClick: (W) => Bt?.(t, e, W),
+                    "data-index": t,
+                    "data-column": n?.column,
+                    children: p(e, t)
+                  },
+                  C(e, t)
+                );
+              })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+export {
+  ue as W,
+  ne as a,
+  ie as b,
+  ee as c
+};

package/dist/chunks/doc-3Fpag2G8.js

@@ -0,0 +1,84 @@
+function g(o = {}) {
+  return {
+    name: "FilterPlugin",
+    priority: 40,
+    enabled: !0,
+    hooks: {
+      transformProps: (e) => {
+        const n = Array.isArray(e.items) ? e.items : [], t = e.filterFn || o.predicate;
+        if (typeof t != "function") return e;
+        const r = n.filter((a, i) => {
+          try {
+            return !!t(a, i);
+          } catch {
+            return !0;
+          }
+        });
+        return { ...e, items: r };
+      },
+      onPropsChange: (e, n, t) => {
+        const r = n?.filterFn, a = t?.filterFn;
+        if (((typeof t?.scrollToTopOnFilterChange == "boolean" ? t.scrollToTopOnFilterChange : void 0) ?? !!o.scrollToTop) && r !== a) {
+          const l = t?.scrollToTopBehavior ?? o.scrollBehavior ?? "auto";
+          e.scrollToTop?.({ behavior: l });
+        }
+      }
+    }
+  };
+}
+const s = "FilterPlugin", c = "用谓词函数过滤数据，优先读 `props.filterFn`，没有就用工厂里传入的 predicate。过滤条件变了可以自动滚回顶部（默认不开）。", u = "2.0.0", f = [
+  "data",
+  "数据管线"
+], d = [
+  {
+    name: "predicate",
+    type: "(item, index) => boolean",
+    default: "—",
+    description: "默认谓词，可被 props.filterFn 覆盖"
+  },
+  {
+    name: "scrollToTop",
+    type: "boolean",
+    default: "false",
+    description: "条件变化后回顶"
+  },
+  {
+    name: "scrollBehavior",
+    type: '"auto" | "smooth"',
+    default: '"auto"',
+    description: "回顶行为"
+  }
+], p = `// 按谓词过滤 items，参数变化可自动回顶。
+const Waterfall = withPlugins(WaterfallCore, [
+  createFilterPlugin({
+    scrollToTop: false,
+    scrollBehavior: "auto",
+  }),
+]);
+
+<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, m = [
+  "谓词抛错时按「保留」处理，不会整表消失",
+  "props.filterFn 优先，便于页面动态换过滤条件",
+  "可与 Sort / Search / Pagination 串联"
+], F = [
+  "分类 Tab 切换",
+  "只看有货 / 只看促销",
+  "价格区间筛选"
+], h = [
+  "数据管线的执行顺序由 priority 决定：Filter(40) → Sort(30) → Search(20) → Pagination(10)。",
+  "先过滤再分页，页码总数才是过滤后的总数——顺序反了会出现「第 2 页空」。"
+], y = {
+  name: s,
+  description: c,
+  since: u,
+  tags: f,
+  config: d,
+  example: p,
+  features: m,
+  useCases: F,
+  notes: h
+};
+export {
+  g as c,
+  y as d
+};