fui-fancyui
Version:
FancyUI Libary
73 lines (72 loc) • 2.36 kB
JavaScript
"use client";
import { jsx as g } from "react/jsx-runtime";
import { useRef as H, useState as f, useMemo as W, useEffect as p, useCallback as L } from "react";
import { Wrapper as j, Item as k } from "./FancyVirtualScroll.style.js";
function z(M) {
const {
children: u,
containerHeight: V = "300px",
itemHeight: r = 300,
preRenderCount: d = 1,
firstItemIndexInView: n = 0,
scrollSnap: v = "none",
itemGap: o = 0,
currentFirstItemsInViewHandler: m,
attributesContainer: w,
attributesItems: y,
onScrollingStateChange: c
} = M, s = H(null), [S, $] = f(n), [l, R] = f(!1), [b, x] = f(!1), [E, C] = f(n), i = H(null), B = W(() => {
const e = l ? n : S, t = Math.max(0, e - d), I = Math.min(u.length - 1, e + d);
return C(e), R(!1), u.slice(t, I + 1).map((T, G) => ({
content: T,
originalIndex: t + G
}));
}, [u, d, S, l]);
p(() => {
m == null || m(E);
}, [E, m]);
const a = L(() => {
const e = s.current;
if (!e || l)
return;
const t = e.scrollTop, I = r + o, T = Math.floor(t / I);
$(T);
}, [r, o]);
p(() => {
const e = s.current;
if (e)
return e.addEventListener("scroll", () => a()), () => {
i.current && clearTimeout(i.current), e.removeEventListener("scroll", () => a());
};
}, [a, l]), p(() => {
const e = s.current;
if (!e) return;
const t = n * (r + o);
e.scrollTop = t, R(!0), $(n), x(!1), a();
}, [n, r, o, a]);
const h = L(() => {
b || x(!0), c == null || c(!0), i.current && clearTimeout(i.current), i.current = setTimeout(() => {
x(!1), c == null || c(!1);
}, 200);
}, [b, c]);
return p(() => {
const e = s.current;
if (!(!e || l))
return e.addEventListener("scroll", h), () => {
i.current && clearTimeout(i.current), e.removeEventListener("scroll", h);
};
}, [h, n]), /* @__PURE__ */ g(j, { ref: s, $scrollSnap: v, $containerHeight: V, ...w, children: /* @__PURE__ */ g("div", { style: { position: "relative", height: `${u.length * (r + o) - o}px` }, children: B.map(({ content: e, originalIndex: t }) => /* @__PURE__ */ g(
k,
{
style: { top: `${t * (r + o)}px`, marginBottom: "24px" },
$itemHeight: `${r}px`,
$enableScrollSnap: !!v,
...y,
children: e
},
t
)) }) });
}
export {
z as default
};