@wenghongtian/react-virtual-list
Version:
327 lines (326 loc) • 9.54 kB
JavaScript
import { jsx as r, jsxs as y, Fragment as X } from "react/jsx-runtime";
import { useRef as m, useLayoutEffect as L, useState as p, useEffect as q, useReducer as Y, useMemo as B } from "react";
var v = /* @__PURE__ */ ((i) => (i[i.eq = 0] = "eq", i[i.lt = 1] = "lt", i[i.gt = 2] = "gt", i))(v || {});
function Z(i, a, s) {
let c = 0, l = i.length;
for (; c < l; ) {
const u = c + l >> 1;
switch (s(i[u], a)) {
case 0:
return u;
case 2:
l = u - 1;
break;
case 1:
c = u + 1;
}
}
return c;
}
function _(i) {
const { offsetTop: a, onUpdate: s } = i, c = m(null);
return L(() => {
const l = {
childList: !0,
// 子节点的变动（新增、删除或者更改）
attributes: !0,
// 属性的变动
characterData: !0,
// 节点内容或节点文本的变动
subtree: !0,
// 是否将观察器应用于该节点的所有后代节点
attributeFilter: ["class", "style"],
// 观察特定属性
attributeOldValue: !0,
// 观察 attributes 变动时，是否需要记录变动前的属性值
characterDataOldValue: !0
// 观察 characterData 变动，是否需要记录变动前的值
}, u = new MutationObserver(function(M) {
M.forEach(function(b) {
if (b.type === "attributes" && b.attributeName === "style") {
const { height: S } = c.current.getBoundingClientRect();
s(S);
}
});
});
u.observe(c.current, l);
const { height: h } = c.current.getBoundingClientRect();
return s(h), () => {
u.disconnect();
};
}, []), /* @__PURE__ */ r(
"div",
{
className: "rvl-item",
ref: c,
style: { transform: `translate3d(0,${a}px, 0)` },
"data-index": i.index,
children: i.children
}
);
}
function ee(i, a) {
const s = m(!1), c = m();
return { run: (...h) => {
s.current && (clearTimeout(c.current), c.current = setTimeout(() => {
i(...h), s.current = !1;
}, a == null ? void 0 : a.wait)), s.current = !0, c.current = setTimeout(() => {
i(...h), s.current = !1;
}, a == null ? void 0 : a.wait);
}, cancel: () => {
clearTimeout(c.current);
} };
}
const te = () => /* @__PURE__ */ y("svg", { xmlns: "http://www.w3.org/2000/svg", viewBox: "0 0 32 32", width: 30, height: 30, fill: "#1677ff", children: [
/* @__PURE__ */ r("circle", { cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(45 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.125s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(90 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.25s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(135 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.375s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(180 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.5s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(225 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.625s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(270 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.75s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(315 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.875s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) }),
/* @__PURE__ */ r("circle", { transform: "rotate(180 16 16)", cx: "16", cy: "3", r: "0", children: /* @__PURE__ */ r(
"animate",
{
attributeName: "r",
values: "0;3;0;0",
dur: "1s",
repeatCount: "indefinite",
begin: "0.5s",
keySplines: "0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8;0.2 0.2 0.4 0.8",
calcMode: "spline"
}
) })
] });
function ie(i) {
var D;
const {
estimateHeight: a = 100,
empty: s = "暂无数据~",
bufferSize: c = 5,
itemOffset: l = 10,
renderItem: u,
rowKey: h,
pagination: { current: M = 1, pageSize: b = 20 } = {},
request: S,
noMoreRender: O = "---我也是有底线的---",
loadingRender: E = /* @__PURE__ */ y(X, { children: [
/* @__PURE__ */ r(te, {}),
/* @__PURE__ */ r("span", { children: "正在加载" })
] })
} = i, [w, F] = p(window.innerHeight), [I] = p(() => /* @__PURE__ */ new Map()), [k, C] = p(!1), [d, P] = p([]), x = m({
pageSize: b,
current: M,
noMore: !1
});
async function T() {
const t = x.current;
C(!0);
const { list: e, noMore: n } = await S({
current: t.current,
pageSize: t.pageSize
});
return C(!1), P(d.concat(e)), t.current++, t.pageSize++, t.noMore = n, g.current.endIndex = Math.min(
N + g.current.startIndex,
e.length + g.current.startIndex
), {
list: e,
noMore: n
};
}
q(() => {
T();
}, []);
const [, V] = Y((t) => t + 1, 0);
L(() => {
const { height: t } = R.current.getBoundingClientRect();
F(t);
}, []);
const N = B(() => w / a | 0, [w]), [j, A] = p(0), f = B(() => {
const t = new Array(d.length);
for (let e = 0; e < d.length; e++) {
const n = d[e];
if (I.has(n)) {
t[e] = I.get(n);
continue;
}
e == 0 ? t[e] = {
index: e,
top: 0,
bottom: a,
height: a
} : t[e] = {
index: e,
top: t[e - 1].bottom + l,
bottom: t[e - 1].bottom + l + a,
height: a
}, I.set(n, t[e]);
}
return t;
}, [d]);
q(() => {
z(f);
}, [f]);
const g = m({
startIndex: 0,
originIndex: 0,
endIndex: Math.min(d.length, N + c)
});
function K(t) {
const e = Z(
f,
t,
(n, o) => n.top === o ? v.eq : n.top > o ? v.gt : v.lt
);
return f[e].top === t ? e : e + 1;
}
const R = m(null), $ = (t) => {
var H, U;
if (t.target !== R.current)
return;
const e = t.target.scrollTop, n = K(e);
g.current.originIndex = n, g.current.startIndex = Math.max(0, n - c), g.current.endIndex = Math.min(
d.length,
n + N + c
), A(e), (H = i.onScroll) == null || H.call(i, t);
const o = ((U = f.at(-1)) == null ? void 0 : U.bottom) || 0;
e > j && e == o - w && !x.current.noMore && !k && T();
}, { run: G } = ee(z);
function z(t) {
for (let e = 1; e < t.length; e++) {
const n = t[e], o = t[e - 1];
n.top = o.bottom + l, n.bottom = n.top + n.height;
}
V();
}
function J(t, e) {
const n = f[t];
n.height = e, n.bottom = n.top + e, G(f);
}
function Q(t, e) {
const n = f[e];
return /* @__PURE__ */ r(
_,
{
offsetTop: n.top,
onUpdate: (o) => J(e, o),
index: e,
children: u(t, e)
},
h ? t[h] + "" : e
);
}
function W() {
const t = [], { startIndex: e, endIndex: n } = g.current;
for (let o = e; o < n; o++)
t.push(Q(d[o], o));
return t;
}
return /* @__PURE__ */ y("div", { className: "rvl-container", onScroll: $, ref: R, children: [
/* @__PURE__ */ y("div", { children: [
/* @__PURE__ */ r(
"div",
{
className: "rvl-placeholder",
style: { height: ((D = f.at(-1)) == null ? void 0 : D.bottom) || 0 }
}
),
x.current.noMore && !!d.length && /* @__PURE__ */ r("div", { className: "rvl-no-more", children: O }),
!d.length && x.current.noMore && /* @__PURE__ */ r("div", { className: "rvl-empty", children: s }),
k && /* @__PURE__ */ r("div", { className: "rvl-loading", children: E })
] }),
W()
] });
}
export {
ie as default
};