vane-waterfall 2.0.2 → 2.0.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/chunks/doc-BAhVW3g8.js +150 -0
- package/dist/chunks/{doc-BXaJl1By.js → doc-BU0CKW63.js} +64 -35
- package/dist/chunks/{doc-D_ozEn0Q.js → doc-BrEd0oZB.js} +41 -32
- package/dist/chunks/{doc-bTHwfIVb.js → doc-Bud0hbaz.js} +39 -25
- package/dist/chunks/{doc-DukOmDCo.js → doc-C-B3zK2o.js} +52 -23
- package/dist/chunks/{doc-DElLNjIc.js → doc-C206ZwYC.js} +33 -24
- package/dist/chunks/{doc-BSnWbrkH.js → doc-C2L8kkeI.js} +49 -25
- package/dist/chunks/{doc-a0MK2S3n.js → doc-CE1DGMBV.js} +62 -38
- package/dist/chunks/{doc-BXSy2aPP.js → doc-CHbQXLwY.js} +33 -19
- package/dist/chunks/{doc-BfWnfTst.js → doc-CInpKZNU.js} +38 -24
- package/dist/chunks/{doc-gTAsLjVx.js → doc-CYxwSuG6.js} +30 -16
- package/dist/chunks/{doc-DzvTrZ13.js → doc-CaJ02INP.js} +25 -16
- package/dist/chunks/{doc-BXElhF2h.js → doc-CiCso5Ti.js} +44 -30
- package/dist/chunks/{doc-BCmEnh39.js → doc-CkuMr8Ca.js} +49 -25
- package/dist/chunks/{doc-3Fpag2G8.js → doc-D7m1OFCW.js} +38 -24
- package/dist/chunks/doc-DEN2WTDh.js +153 -0
- package/dist/chunks/{doc-C5xrHNoC.js → doc-DhICh9S2.js} +37 -23
- package/dist/chunks/{doc-DAieSXLy.js → doc-DlJICsyN.js} +41 -27
- package/dist/chunks/{doc-CN4edvn_.js → doc-DtxS1-P0.js} +32 -23
- package/dist/chunks/{doc-BIzjYAZW.js → doc-DudYCn_-.js} +25 -16
- package/dist/chunks/{doc-BmoijI6q.js → doc-HoyAFR_m.js} +43 -24
- package/dist/chunks/doc-RlBMCMNs.js +170 -0
- package/dist/chunks/doc-RwKQqySd.js +102 -0
- package/dist/chunks/{doc-CTUoMe7o.js → doc-eYhNJy97.js} +31 -22
- package/dist/chunks/{doc-CcPFavOs.js → doc-i6FY1We1.js} +27 -13
- package/dist/chunks/doc-skPl6ZMP.js +101 -0
- package/dist/chunks/index-8gEIzUxi.js +15 -0
- package/dist/chunks/index-B96I5CKE.js +21 -0
- package/dist/chunks/index-Bjmhy8jW.js +11 -0
- package/dist/chunks/index-Cuq0ofv-.js +13 -0
- package/dist/chunks/{index-BAWlVYr3.js → index-Cz4YEqRF.js} +1 -1
- package/dist/chunks/{index-CF0tYRop.js → index-FBJVUYmH.js} +1 -1
- package/dist/chunks/withPlugins-BOeDFhof.js +743 -0
- package/dist/custom-plugins/A11yPlugin/doc.json.d.ts +64 -40
- package/dist/custom-plugins/A11yPlugin/index.js +1 -1
- package/dist/custom-plugins/AlignmentPlugin/doc.json.d.ts +42 -28
- package/dist/custom-plugins/AlignmentPlugin/index.js +1 -1
- package/dist/custom-plugins/AutoColumnPlugin/doc.json.d.ts +53 -44
- package/dist/custom-plugins/AutoColumnPlugin/index.js +1 -1
- package/dist/custom-plugins/BookmarkPlugin/doc.json.d.ts +44 -35
- package/dist/custom-plugins/BookmarkPlugin/index.js +1 -1
- package/dist/custom-plugins/ClickAnalyticsPlugin/doc.json.d.ts +29 -0
- package/dist/custom-plugins/ClickAnalyticsPlugin/index.js +1 -1
- package/dist/custom-plugins/DebounceLayoutPlugin/doc.json.d.ts +37 -28
- package/dist/custom-plugins/DebounceLayoutPlugin/index.js +1 -1
- package/dist/custom-plugins/DragReorderPlugin/doc.json.d.ts +14 -0
- package/dist/custom-plugins/DragReorderPlugin/index.js +1 -1
- package/dist/custom-plugins/FilterPlugin/doc.json.d.ts +53 -39
- package/dist/custom-plugins/FilterPlugin/index.js +1 -1
- package/dist/custom-plugins/FixedHeightPlugin/doc.json.d.ts +42 -28
- package/dist/custom-plugins/FixedHeightPlugin/index.js +1 -1
- package/dist/custom-plugins/GapPlugin/doc.json.d.ts +61 -37
- package/dist/custom-plugins/GapPlugin/index.js +1 -1
- package/dist/custom-plugins/GroupingPlugin/doc.json.d.ts +61 -32
- package/dist/custom-plugins/GroupingPlugin/index.js +1 -1
- package/dist/custom-plugins/HeatmapAnalyticsPlugin/doc.json.d.ts +24 -0
- package/dist/custom-plugins/HeatmapAnalyticsPlugin/index.js +1 -1
- package/dist/custom-plugins/InfiniteScrollPlugin/doc.json.d.ts +55 -36
- package/dist/custom-plugins/InfiniteScrollPlugin/index.js +1 -1
- package/dist/custom-plugins/PaginationPlugin/doc.json.d.ts +56 -42
- package/dist/custom-plugins/PaginationPlugin/index.js +1 -1
- package/dist/custom-plugins/PinItemPlugin/doc.json.d.ts +49 -35
- package/dist/custom-plugins/PinItemPlugin/index.js +1 -1
- package/dist/custom-plugins/RecyclePlugin/doc.json.d.ts +57 -28
- package/dist/custom-plugins/RecyclePlugin/index.js +1 -1
- package/dist/custom-plugins/ReducedMotionPlugin/doc.json.d.ts +29 -0
- package/dist/custom-plugins/ReducedMotionPlugin/index.js +1 -1
- package/dist/custom-plugins/ResponsiveColumnsPlugin/doc.json.d.ts +40 -31
- package/dist/custom-plugins/ResponsiveColumnsPlugin/index.js +1 -1
- package/dist/custom-plugins/ScrollAnchorPlugin/doc.json.d.ts +42 -28
- package/dist/custom-plugins/ScrollAnchorPlugin/index.js +1 -1
- package/dist/custom-plugins/SearchPlugin/doc.json.d.ts +53 -39
- package/dist/custom-plugins/SearchPlugin/index.js +1 -1
- package/dist/custom-plugins/SortPlugin/doc.json.d.ts +52 -38
- package/dist/custom-plugins/SortPlugin/index.js +1 -1
- package/dist/custom-plugins/StatePersistencePlugin/doc.json.d.ts +71 -37
- package/dist/custom-plugins/StatePersistencePlugin/index.js +1 -1
- package/dist/custom-plugins/StickyHeaderPlugin/doc.json.d.ts +43 -34
- package/dist/custom-plugins/StickyHeaderPlugin/index.js +1 -1
- package/dist/custom-plugins/ThrottlePlugin/doc.json.d.ts +43 -34
- package/dist/custom-plugins/ThrottlePlugin/index.js +1 -1
- package/dist/custom-plugins/TransitionPlugin/doc.json.d.ts +49 -35
- package/dist/custom-plugins/TransitionPlugin/index.js +1 -1
- package/dist/custom-plugins/URLSyncPlugin/doc.json.d.ts +57 -33
- package/dist/custom-plugins/URLSyncPlugin/index.js +1 -1
- package/dist/custom-plugins/index.js +6 -6
- package/dist/entries/plugins.js +7 -7
- package/dist/index.js +1 -1
- package/dist/presets/dashboard/index.js +2 -2
- package/dist/presets/photo-feed/index.js +3 -3
- package/dist/presets/product-feed/index.js +2 -2
- package/package.json +26 -26
- package/dist/chunks/doc-BQQoKNto.js +0 -126
- package/dist/chunks/doc-BindRMfO.js +0 -72
- package/dist/chunks/doc-CBHjiDG7.js +0 -88
- package/dist/chunks/doc-CkU5GtLw.js +0 -136
- package/dist/chunks/doc-KN6Bvmty.js +0 -124
- package/dist/chunks/index-B8o6R4RZ.js +0 -15
- package/dist/chunks/index-BFyYpEY_.js +0 -11
- package/dist/chunks/index-CJR0Buju.js +0 -21
- package/dist/chunks/index-DHTB3QEP.js +0 -13
- package/dist/chunks/withPlugins-DG3YpSgL.js +0 -655
|
@@ -0,0 +1,153 @@
|
|
|
1
|
+
import { jsxs as g, jsx as h } from "react/jsx-runtime";
|
|
2
|
+
function W(u = {}) {
|
|
3
|
+
const { log: m = !1, showOverlay: p = !1 } = u, n = /* @__PURE__ */ new Map(), c = /* @__PURE__ */ new Map();
|
|
4
|
+
let i = null;
|
|
5
|
+
const l = () => Array.from(n.values()).reduce((e, t) => e + t, 0), y = (e, t, s) => {
|
|
6
|
+
try {
|
|
7
|
+
const o = e.props?.keyExtractor?.(t, s);
|
|
8
|
+
if (o != null) return String(o);
|
|
9
|
+
} catch {
|
|
10
|
+
}
|
|
11
|
+
return `#${s}`;
|
|
12
|
+
}, d = (e) => {
|
|
13
|
+
const t = e.items;
|
|
14
|
+
(i === null || t !== i) && (i = t, n.clear(), c.clear(), e.sharedData?.set("click-count", 0));
|
|
15
|
+
};
|
|
16
|
+
return {
|
|
17
|
+
name: "ClickAnalyticsPlugin",
|
|
18
|
+
enabled: !0,
|
|
19
|
+
getStats: () => ({
|
|
20
|
+
total: l(),
|
|
21
|
+
byIndex: Array.from(n.entries()).map(([e, t]) => ({
|
|
22
|
+
index: c.get(e) ?? 0,
|
|
23
|
+
key: e,
|
|
24
|
+
clicks: t
|
|
25
|
+
})).sort((e, t) => e.index - t.index || e.key.localeCompare(t.key))
|
|
26
|
+
}),
|
|
27
|
+
hooks: {
|
|
28
|
+
onMount: (e) => {
|
|
29
|
+
e.sharedData?.set("click-count", l());
|
|
30
|
+
},
|
|
31
|
+
onLayoutComplete: (e) => {
|
|
32
|
+
d(e);
|
|
33
|
+
},
|
|
34
|
+
onItemClick: (e, t, s, o) => {
|
|
35
|
+
d(e);
|
|
36
|
+
const a = y(e, s, t);
|
|
37
|
+
c.set(a, t);
|
|
38
|
+
const f = (n.get(a) ?? 0) + 1;
|
|
39
|
+
n.set(a, f);
|
|
40
|
+
const r = l();
|
|
41
|
+
e.sharedData?.set("click-count", r), e.bus?.emit("analytics:click", { index: t, key: a, item: s, event: o, total: r }), e.forceUpdate?.(), m && console.log(`[ClickAnalytics] item=${t} total=${r}`);
|
|
42
|
+
},
|
|
43
|
+
renderOverlay: (e) => {
|
|
44
|
+
if (!p) return null;
|
|
45
|
+
const t = e.sharedData?.get("click-count") || 0;
|
|
46
|
+
return /* @__PURE__ */ g(
|
|
47
|
+
"div",
|
|
48
|
+
{
|
|
49
|
+
style: {
|
|
50
|
+
position: "absolute",
|
|
51
|
+
top: 12,
|
|
52
|
+
right: 12,
|
|
53
|
+
padding: "10px 12px",
|
|
54
|
+
background: "#222",
|
|
55
|
+
color: "#fff",
|
|
56
|
+
borderRadius: 8,
|
|
57
|
+
fontSize: 14,
|
|
58
|
+
fontWeight: 600,
|
|
59
|
+
boxShadow: "0 4px 12px rgba(0,0,0,0.25)",
|
|
60
|
+
border: "1px solid rgba(255,255,255,0.15)",
|
|
61
|
+
pointerEvents: "none",
|
|
62
|
+
zIndex: 99
|
|
63
|
+
},
|
|
64
|
+
children: [
|
|
65
|
+
"点击次数:",
|
|
66
|
+
t,
|
|
67
|
+
/* @__PURE__ */ h("div", { style: { fontSize: 12, fontWeight: 400, opacity: 0.85, marginTop: 4 }, children: "提示:点击任意卡片观察计数变化" })
|
|
68
|
+
]
|
|
69
|
+
}
|
|
70
|
+
);
|
|
71
|
+
}
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
}
|
|
75
|
+
const k = "ClickAnalyticsPlugin", x = "统计每次项点击并累计总数,向 bus 发 `analytics:click`(带 index / item / total),`getStats()` 可随时取出按 index 的计数。默认只上报不显示角标,接入真实版式时不会被调试面板盖住内容。", b = "2.0.0", C = [
|
|
76
|
+
"interaction",
|
|
77
|
+
"埋点"
|
|
78
|
+
], v = [
|
|
79
|
+
{
|
|
80
|
+
name: "onMount",
|
|
81
|
+
when: "瀑布流挂载完成",
|
|
82
|
+
description: "初始化观察器与滚动监听,返回清理函数"
|
|
83
|
+
},
|
|
84
|
+
{
|
|
85
|
+
name: "onItemClick",
|
|
86
|
+
when: "单个卡片被点击",
|
|
87
|
+
description: "卡片级跳转与点击埋点"
|
|
88
|
+
},
|
|
89
|
+
{
|
|
90
|
+
name: "onLayoutComplete",
|
|
91
|
+
when: "DOM 落位完成(可安全测量)",
|
|
92
|
+
description: "测量真实高度、懒加载判定、曝光上报"
|
|
93
|
+
},
|
|
94
|
+
{
|
|
95
|
+
name: "renderOverlay",
|
|
96
|
+
when: "每次渲染,滚动容器内的内容层之上",
|
|
97
|
+
description: "回到顶部、加载提示、浮层工具"
|
|
98
|
+
},
|
|
99
|
+
{
|
|
100
|
+
name: "analytics:click",
|
|
101
|
+
when: "卡片点击后",
|
|
102
|
+
description: "广播 { index, key, item, event, total } 点击埋点"
|
|
103
|
+
}
|
|
104
|
+
], w = [], S = "只读取 context 字段(props / state / data),不调用上下文方法", A = [
|
|
105
|
+
{
|
|
106
|
+
name: "log",
|
|
107
|
+
type: "boolean",
|
|
108
|
+
default: "false",
|
|
109
|
+
description: "是否在控制台打印每次点击"
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
name: "showOverlay",
|
|
113
|
+
type: "boolean",
|
|
114
|
+
default: "false",
|
|
115
|
+
description: "是否显示右上角计数角标"
|
|
116
|
+
}
|
|
117
|
+
], D = `// 统计项点击次数,发 \`analytics:click\` 事件,可选角标与日志。
|
|
118
|
+
const Waterfall = withPlugins(WaterfallCore, [
|
|
119
|
+
createClickAnalyticsPlugin({
|
|
120
|
+
log: false,
|
|
121
|
+
showOverlay: false,
|
|
122
|
+
}),
|
|
123
|
+
]);
|
|
124
|
+
|
|
125
|
+
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, O = [
|
|
126
|
+
"点击总量 + 按 index 明细(getStats)",
|
|
127
|
+
"bus 事件可被外部订阅上报",
|
|
128
|
+
"角标默认关闭"
|
|
129
|
+
], I = [
|
|
130
|
+
"内容流点击率统计",
|
|
131
|
+
"AB 实验埋点",
|
|
132
|
+
"调试点击行为"
|
|
133
|
+
], M = [
|
|
134
|
+
"生产环境请把数据从 bus 事件或 getStats() 接到自己的埋点 SDK,不要让插件直接打日志。",
|
|
135
|
+
"计数只在内存里,刷新即清零 —— 想持久化要自己定时取 getStats() 上报。"
|
|
136
|
+
], z = {
|
|
137
|
+
name: k,
|
|
138
|
+
description: x,
|
|
139
|
+
since: b,
|
|
140
|
+
tags: C,
|
|
141
|
+
events: v,
|
|
142
|
+
methods: w,
|
|
143
|
+
methodsNote: S,
|
|
144
|
+
config: A,
|
|
145
|
+
example: D,
|
|
146
|
+
features: O,
|
|
147
|
+
useCases: I,
|
|
148
|
+
notes: M
|
|
149
|
+
};
|
|
150
|
+
export {
|
|
151
|
+
W as c,
|
|
152
|
+
z as d
|
|
153
|
+
};
|
|
@@ -1,25 +1,36 @@
|
|
|
1
|
-
function
|
|
2
|
-
const
|
|
1
|
+
function P(s = {}) {
|
|
2
|
+
const t = s.duration ?? 300, n = s.easing ?? "ease";
|
|
3
3
|
return {
|
|
4
4
|
name: "TransitionPlugin",
|
|
5
5
|
priority: 65,
|
|
6
6
|
enabled: !0,
|
|
7
7
|
hooks: {
|
|
8
|
-
onItemMount: (o, e,
|
|
9
|
-
|
|
8
|
+
onItemMount: (o, e, a) => {
|
|
9
|
+
a.style.transition = `transform ${t}ms ${n}, opacity ${t}ms ${n}`;
|
|
10
10
|
},
|
|
11
11
|
onLayout: (o) => {
|
|
12
12
|
o.itemRefs.forEach((e) => {
|
|
13
|
-
e && (e.style.transition = `transform ${
|
|
13
|
+
e && (e.style.transition = `transform ${t}ms ${n}, opacity ${t}ms ${n}`);
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
17
|
};
|
|
18
18
|
}
|
|
19
|
-
const
|
|
19
|
+
const i = "TransitionPlugin", r = "给每个项挂上 transform + opacity 的 CSS 过渡,布局重排、分页切换、筛选后重新排列时位置变化是滑过去的,不是瞬移。", c = "2.0.0", m = [
|
|
20
20
|
"perf",
|
|
21
21
|
"动效"
|
|
22
|
-
],
|
|
22
|
+
], d = [
|
|
23
|
+
{
|
|
24
|
+
name: "onItemMount",
|
|
25
|
+
when: "单个卡片挂载并拿到 DOM 元素时",
|
|
26
|
+
description: "按卡片绑定监听、观察器、埋点"
|
|
27
|
+
},
|
|
28
|
+
{
|
|
29
|
+
name: "onLayout",
|
|
30
|
+
when: "布局计算完成、结果已确定",
|
|
31
|
+
description: "读取每列高度、做二次修正或上报"
|
|
32
|
+
}
|
|
33
|
+
], u = [], l = "只读取 context 字段(props / state / data),不调用上下文方法", f = [
|
|
23
34
|
{
|
|
24
35
|
name: "duration",
|
|
25
36
|
type: "number",
|
|
@@ -32,7 +43,7 @@ const a = "TransitionPlugin", r = "给每个项挂上 transform + opacity 的 CS
|
|
|
32
43
|
default: "ease",
|
|
33
44
|
description: "缓动函数"
|
|
34
45
|
}
|
|
35
|
-
],
|
|
46
|
+
], p = `// 布局变化时给项加 transform/opacity 过渡,插入新数据不「闪现」。
|
|
36
47
|
const Waterfall = withPlugins(WaterfallCore, [
|
|
37
48
|
createTransitionPlugin({
|
|
38
49
|
duration: 300,
|
|
@@ -40,31 +51,34 @@ const Waterfall = withPlugins(WaterfallCore, [
|
|
|
40
51
|
}),
|
|
41
52
|
]);
|
|
42
53
|
|
|
43
|
-
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`,
|
|
54
|
+
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, g = [
|
|
44
55
|
"ReducedMotionPlugin"
|
|
45
|
-
],
|
|
56
|
+
], y = [
|
|
46
57
|
"项位置变化平滑过渡",
|
|
47
58
|
"挂载时即生效(onItemMount)",
|
|
48
59
|
"与 ReducedMotionPlugin 互斥"
|
|
49
|
-
],
|
|
60
|
+
], h = [
|
|
50
61
|
"筛选 / 排序后重排",
|
|
51
62
|
"分页切换",
|
|
52
63
|
"动态插入卡片"
|
|
53
|
-
],
|
|
64
|
+
], $ = [
|
|
54
65
|
"首屏大量项同时过渡会有一次「整体滑入」,想要更克制可以把 duration 降到 150ms。"
|
|
55
|
-
],
|
|
56
|
-
name:
|
|
66
|
+
], x = {
|
|
67
|
+
name: i,
|
|
57
68
|
description: r,
|
|
58
69
|
since: c,
|
|
59
|
-
tags:
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
70
|
+
tags: m,
|
|
71
|
+
events: d,
|
|
72
|
+
methods: u,
|
|
73
|
+
methodsNote: l,
|
|
74
|
+
config: f,
|
|
75
|
+
example: p,
|
|
76
|
+
conflicts: g,
|
|
77
|
+
features: y,
|
|
78
|
+
useCases: h,
|
|
79
|
+
notes: $
|
|
66
80
|
};
|
|
67
81
|
export {
|
|
68
|
-
|
|
69
|
-
|
|
82
|
+
P as c,
|
|
83
|
+
x as d
|
|
70
84
|
};
|
|
@@ -1,35 +1,46 @@
|
|
|
1
|
-
function
|
|
1
|
+
function v(r = {}) {
|
|
2
2
|
return {
|
|
3
3
|
name: "PaginationPlugin",
|
|
4
4
|
priority: 10,
|
|
5
5
|
enabled: !0,
|
|
6
6
|
hooks: {
|
|
7
|
-
transformProps: (
|
|
8
|
-
const a = Number(
|
|
7
|
+
transformProps: (o) => {
|
|
8
|
+
const a = Number(o.pageIndex ?? 1), e = Math.max(
|
|
9
9
|
1,
|
|
10
10
|
Math.floor(Number.isFinite(a) ? a : 1)
|
|
11
|
-
), t = Number(
|
|
11
|
+
), t = Number(o.pageSize ?? r.pageSize ?? 20), n = Math.max(1, Math.floor(Number.isFinite(t) ? t : 20)), c = Array.isArray(o.items) ? o.items : [], s = Math.max(1, Math.ceil(c.length / n)), i = Math.min(e, s);
|
|
12
12
|
e > s && console.warn(
|
|
13
13
|
`[vane-waterfall] PaginationPlugin:pageIndex=${e} 超出总页数 ${s},已钳制到第 ${i} 页`
|
|
14
14
|
);
|
|
15
|
-
const
|
|
16
|
-
return { ...
|
|
15
|
+
const l = (i - 1) * n, p = c.slice(l, l + n);
|
|
16
|
+
return { ...o, items: p };
|
|
17
17
|
},
|
|
18
|
-
onPropsChange: (
|
|
19
|
-
const t = Math.max(1, Number(a?.pageIndex ?? 1)),
|
|
20
|
-
if (((typeof e?.scrollToTopOnPageChange == "boolean" ? e.scrollToTopOnPageChange : void 0) ?? !!r.scrollToTop) && t !==
|
|
18
|
+
onPropsChange: (o, a, e) => {
|
|
19
|
+
const t = Math.max(1, Number(a?.pageIndex ?? 1)), n = Math.max(1, Number(e?.pageIndex ?? 1));
|
|
20
|
+
if (((typeof e?.scrollToTopOnPageChange == "boolean" ? e.scrollToTopOnPageChange : void 0) ?? !!r.scrollToTop) && t !== n) {
|
|
21
21
|
const i = e?.scrollToTopBehavior ?? r.scrollBehavior ?? "auto";
|
|
22
|
-
|
|
22
|
+
o.scrollToTop?.({ behavior: i });
|
|
23
23
|
}
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
};
|
|
27
27
|
}
|
|
28
|
-
const g = "PaginationPlugin", m = "读 `props.pageIndex`(1 基)与 `props.pageSize` 切片。放在数据管线最末端,保证切的是「过滤 + 排序 + 搜索」之后的结果。",
|
|
28
|
+
const g = "PaginationPlugin", m = "读 `props.pageIndex`(1 基)与 `props.pageSize` 切片。放在数据管线最末端,保证切的是「过滤 + 排序 + 搜索」之后的结果。", d = "2.0.0", u = [
|
|
29
29
|
"data",
|
|
30
30
|
"数据管线",
|
|
31
31
|
"分页"
|
|
32
32
|
], h = [
|
|
33
|
+
{
|
|
34
|
+
name: "onPropsChange",
|
|
35
|
+
when: "props 变化后",
|
|
36
|
+
description: "数据或配置变化时请求重排"
|
|
37
|
+
},
|
|
38
|
+
{
|
|
39
|
+
name: "transformProps",
|
|
40
|
+
when: "渲染前链式改写瀑布流 props",
|
|
41
|
+
description: "补 gap / columns 默认值、按断点覆盖配置"
|
|
42
|
+
}
|
|
43
|
+
], f = [], P = "只读取 context 字段(props / state / data),不调用上下文方法", x = [
|
|
33
44
|
{
|
|
34
45
|
name: "pageSize",
|
|
35
46
|
type: "number",
|
|
@@ -48,7 +59,7 @@ const g = "PaginationPlugin", m = "读 `props.pageIndex`(1 基)与 `props.pa
|
|
|
48
59
|
default: '"auto"',
|
|
49
60
|
description: "回顶行为"
|
|
50
61
|
}
|
|
51
|
-
],
|
|
62
|
+
], S = `// 按 props.pageIndex / pageSize 切片,页码从 1 开始。
|
|
52
63
|
const Waterfall = withPlugins(WaterfallCore, [
|
|
53
64
|
createPaginationPlugin({
|
|
54
65
|
scrollToTop: false,
|
|
@@ -56,31 +67,34 @@ const Waterfall = withPlugins(WaterfallCore, [
|
|
|
56
67
|
}),
|
|
57
68
|
]);
|
|
58
69
|
|
|
59
|
-
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`,
|
|
70
|
+
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, I = [
|
|
60
71
|
"InfiniteScrollPlugin"
|
|
61
|
-
],
|
|
72
|
+
], T = [
|
|
62
73
|
"1 基页码(与 UI 分页器一致)",
|
|
63
74
|
"pageIndex 非法值自动夹到 1",
|
|
64
75
|
"翻页自动回顶可选"
|
|
65
|
-
],
|
|
76
|
+
], b = [
|
|
66
77
|
"后台列表分页",
|
|
67
78
|
"搜索结果分页",
|
|
68
79
|
"与 URLSyncPlugin 配合做可分享链接"
|
|
69
|
-
],
|
|
80
|
+
], z = [
|
|
70
81
|
"pageSize 优先级:props.pageSize > 工厂 config.pageSize > 20。"
|
|
71
|
-
],
|
|
82
|
+
], C = {
|
|
72
83
|
name: g,
|
|
73
84
|
description: m,
|
|
74
|
-
since:
|
|
75
|
-
tags:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
85
|
+
since: d,
|
|
86
|
+
tags: u,
|
|
87
|
+
events: h,
|
|
88
|
+
methods: f,
|
|
89
|
+
methodsNote: P,
|
|
90
|
+
config: x,
|
|
91
|
+
example: S,
|
|
92
|
+
conflicts: I,
|
|
93
|
+
features: T,
|
|
94
|
+
useCases: b,
|
|
95
|
+
notes: z
|
|
82
96
|
};
|
|
83
97
|
export {
|
|
84
|
-
|
|
85
|
-
|
|
98
|
+
v as c,
|
|
99
|
+
C as d
|
|
86
100
|
};
|
|
@@ -1,12 +1,12 @@
|
|
|
1
|
-
import { jsxs as c, jsx as
|
|
2
|
-
function
|
|
3
|
-
const
|
|
1
|
+
import { jsxs as c, jsx as d } from "react/jsx-runtime";
|
|
2
|
+
function H(t = {}) {
|
|
3
|
+
const o = t.title || "分组标题", i = t.showHint ?? !1;
|
|
4
4
|
return {
|
|
5
5
|
name: "StickyHeaderPlugin",
|
|
6
6
|
enabled: !0,
|
|
7
7
|
hooks: {
|
|
8
|
-
renderOverlay: (
|
|
9
|
-
const n =
|
|
8
|
+
renderOverlay: (e) => {
|
|
9
|
+
const n = e.sharedData?.get("GROUPS") || /* @__PURE__ */ new Map(), a = e.sharedData?.get("GROUP_INDEX"), r = e.visibleRange?.start ?? 0, s = a?.get(r) ?? (n.size > 0 ? Array.from(n.keys())[0] : void 0);
|
|
10
10
|
return /* @__PURE__ */ c(
|
|
11
11
|
"div",
|
|
12
12
|
{
|
|
@@ -23,10 +23,10 @@ function b(e = {}) {
|
|
|
23
23
|
fontWeight: 600
|
|
24
24
|
},
|
|
25
25
|
children: [
|
|
26
|
-
|
|
26
|
+
o,
|
|
27
27
|
" ",
|
|
28
28
|
s !== void 0 ? `:${String(s)}` : "",
|
|
29
|
-
|
|
29
|
+
i ? /* @__PURE__ */ d("span", { style: { marginLeft: 8, fontSize: 12, opacity: 0.8 }, children: "向下滚动观察吸顶" }) : null
|
|
30
30
|
]
|
|
31
31
|
}
|
|
32
32
|
);
|
|
@@ -34,10 +34,16 @@ function b(e = {}) {
|
|
|
34
34
|
}
|
|
35
35
|
};
|
|
36
36
|
}
|
|
37
|
-
const
|
|
37
|
+
const l = "StickyHeaderPlugin", p = "在滚动容器内渲染一条 `position: sticky` 的标题条,始终贴住容器顶部。装了 GroupingPlugin 时自动显示第一个分组名,也可用 title 写死。", g = "2.0.0", m = [
|
|
38
38
|
"ui",
|
|
39
39
|
"吸顶"
|
|
40
|
-
],
|
|
40
|
+
], f = [
|
|
41
|
+
{
|
|
42
|
+
name: "renderOverlay",
|
|
43
|
+
when: "每次渲染,滚动容器内的内容层之上",
|
|
44
|
+
description: "回到顶部、加载提示、浮层工具"
|
|
45
|
+
}
|
|
46
|
+
], u = [], y = "只读取 context 字段(props / state / data),不调用上下文方法", h = [
|
|
41
47
|
{
|
|
42
48
|
name: "title",
|
|
43
49
|
type: "string",
|
|
@@ -50,7 +56,7 @@ const d = "StickyHeaderPlugin", p = "在滚动容器内渲染一条 `position: s
|
|
|
50
56
|
default: "false",
|
|
51
57
|
description: "是否显示「向下滚动观察」提示"
|
|
52
58
|
}
|
|
53
|
-
],
|
|
59
|
+
], x = `// 滚动容器内的吸顶标题条,可与分组联动显示当前组。
|
|
54
60
|
const Waterfall = withPlugins(WaterfallCore, [
|
|
55
61
|
createStickyHeaderPlugin({
|
|
56
62
|
title: "分组标题",
|
|
@@ -58,28 +64,31 @@ const Waterfall = withPlugins(WaterfallCore, [
|
|
|
58
64
|
}),
|
|
59
65
|
]);
|
|
60
66
|
|
|
61
|
-
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`,
|
|
67
|
+
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, k = [
|
|
62
68
|
"sticky 吸顶,不依赖额外容器",
|
|
63
69
|
"与 Grouping 联动显示当前组",
|
|
64
70
|
"提示文案默认关闭"
|
|
65
|
-
],
|
|
71
|
+
], v = [
|
|
66
72
|
"分组信息流",
|
|
67
73
|
"按日期分组的时间线",
|
|
68
74
|
"长列表的上下文提示"
|
|
69
|
-
],
|
|
75
|
+
], S = [
|
|
70
76
|
"sticky 生效要求它作为滚动容器的直接子元素——由 composeSlots 保证,单测已锁。"
|
|
71
|
-
],
|
|
72
|
-
name:
|
|
77
|
+
], P = {
|
|
78
|
+
name: l,
|
|
73
79
|
description: p,
|
|
74
80
|
since: g,
|
|
75
|
-
tags:
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
+
tags: m,
|
|
82
|
+
events: f,
|
|
83
|
+
methods: u,
|
|
84
|
+
methodsNote: y,
|
|
85
|
+
config: h,
|
|
86
|
+
example: x,
|
|
87
|
+
features: k,
|
|
88
|
+
useCases: v,
|
|
89
|
+
notes: S
|
|
81
90
|
};
|
|
82
91
|
export {
|
|
83
|
-
|
|
84
|
-
|
|
92
|
+
H as c,
|
|
93
|
+
P as d
|
|
85
94
|
};
|
|
@@ -1,50 +1,59 @@
|
|
|
1
|
-
function
|
|
1
|
+
function f(e) {
|
|
2
2
|
return {
|
|
3
3
|
name: "DebounceLayoutPlugin",
|
|
4
4
|
priority: 75,
|
|
5
5
|
enabled: !0,
|
|
6
6
|
hooks: {
|
|
7
|
-
transformProps: (
|
|
7
|
+
transformProps: (t) => ({ ...t, debounceDelay: e.delay })
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
10
|
}
|
|
11
|
-
const
|
|
11
|
+
const n = "DebounceLayoutPlugin", o = "只调 debounceDelay:容器宽度连续变化(抽屉展开、分栏拖拽)时,等变化停下来再算一次布局,避免每帧重排。", s = "2.0.0", a = [
|
|
12
12
|
"perf",
|
|
13
13
|
"性能"
|
|
14
14
|
], c = [
|
|
15
|
+
{
|
|
16
|
+
name: "transformProps",
|
|
17
|
+
when: "渲染前链式改写瀑布流 props",
|
|
18
|
+
description: "补 gap / columns 默认值、按断点覆盖配置"
|
|
19
|
+
}
|
|
20
|
+
], r = [], u = "只读取 context 字段(props / state / data),不调用上下文方法", i = [
|
|
15
21
|
{
|
|
16
22
|
name: "delay",
|
|
17
23
|
type: "number",
|
|
18
24
|
default: "—",
|
|
19
25
|
description: "布局防抖 ms(必填)"
|
|
20
26
|
}
|
|
21
|
-
],
|
|
27
|
+
], l = `// 单独放大布局防抖,容器频繁变宽时(抽屉/侧栏动画)不抖。
|
|
22
28
|
const Waterfall = withPlugins(WaterfallCore, [
|
|
23
29
|
createDebounceLayoutPlugin(),
|
|
24
30
|
]);
|
|
25
31
|
|
|
26
|
-
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`,
|
|
32
|
+
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, m = [
|
|
27
33
|
"只影响布局时机,不影响渲染",
|
|
28
34
|
"可被 ThrottlePlugin 覆盖",
|
|
29
35
|
"对移动端软键盘弹出也有效"
|
|
30
|
-
],
|
|
36
|
+
], d = [
|
|
31
37
|
"可折叠侧栏",
|
|
32
38
|
"分栏宽度拖拽",
|
|
33
39
|
"横竖屏切换"
|
|
34
|
-
],
|
|
40
|
+
], p = [
|
|
35
41
|
"delay 过大会让「展开后布局」明显滞后,建议 120–250ms。"
|
|
36
|
-
],
|
|
37
|
-
name:
|
|
42
|
+
], g = {
|
|
43
|
+
name: n,
|
|
38
44
|
description: o,
|
|
39
45
|
since: s,
|
|
40
46
|
tags: a,
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
47
|
+
events: c,
|
|
48
|
+
methods: r,
|
|
49
|
+
methodsNote: u,
|
|
50
|
+
config: i,
|
|
51
|
+
example: l,
|
|
52
|
+
features: m,
|
|
53
|
+
useCases: d,
|
|
54
|
+
notes: p
|
|
46
55
|
};
|
|
47
56
|
export {
|
|
48
|
-
|
|
49
|
-
|
|
57
|
+
f as c,
|
|
58
|
+
g as d
|
|
50
59
|
};
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
function
|
|
2
|
-
const s = Math.max(1, t.threshold ?? 300), n = /* @__PURE__ */ new WeakMap(),
|
|
1
|
+
function x(t = {}) {
|
|
2
|
+
const s = Math.max(1, t.threshold ?? 300), n = /* @__PURE__ */ new WeakMap(), a = (e) => e.containerRef?.current ?? e.bus;
|
|
3
3
|
return {
|
|
4
4
|
name: "InfiniteScrollPlugin",
|
|
5
5
|
priority: 35,
|
|
@@ -10,28 +10,44 @@ function y(t = {}) {
|
|
|
10
10
|
reachBottomOffset: s
|
|
11
11
|
}),
|
|
12
12
|
onReachBottom: async (e, i) => {
|
|
13
|
-
const o =
|
|
13
|
+
const o = a(e);
|
|
14
14
|
if (n.get(o) || e.hasMore === !1 || i > s) return;
|
|
15
|
-
const
|
|
16
|
-
if (typeof
|
|
15
|
+
const r = t.onLoadMore ?? e.props.onLoadMore;
|
|
16
|
+
if (typeof r == "function") {
|
|
17
17
|
n.set(o, !0);
|
|
18
18
|
try {
|
|
19
|
-
await Promise.resolve(
|
|
19
|
+
await Promise.resolve(r());
|
|
20
20
|
} finally {
|
|
21
21
|
n.delete(o);
|
|
22
22
|
}
|
|
23
23
|
}
|
|
24
24
|
},
|
|
25
25
|
onUnmount: (e) => {
|
|
26
|
-
n.delete(
|
|
26
|
+
n.delete(a(e));
|
|
27
27
|
}
|
|
28
28
|
}
|
|
29
29
|
};
|
|
30
30
|
}
|
|
31
|
-
const c = "InfiniteScrollPlugin", l = "监听 Core 的 onReachBottom,在距底部 `threshold` 像素内触发 onLoadMore。自带并发锁:上一次还没结束不会重复触发。", d = "2.0.0",
|
|
31
|
+
const c = "InfiniteScrollPlugin", l = "监听 Core 的 onReachBottom,在距底部 `threshold` 像素内触发 onLoadMore。自带并发锁:上一次还没结束不会重复触发。", d = "2.0.0", m = [
|
|
32
32
|
"data",
|
|
33
33
|
"加载更多"
|
|
34
|
-
],
|
|
34
|
+
], f = [
|
|
35
|
+
{
|
|
36
|
+
name: "onUnmount",
|
|
37
|
+
when: "瀑布流卸载前",
|
|
38
|
+
description: "断开观察器、移除滚动监听"
|
|
39
|
+
},
|
|
40
|
+
{
|
|
41
|
+
name: "onReachBottom",
|
|
42
|
+
when: "滚动触底(distance 为距底像素)",
|
|
43
|
+
description: "加载更多、预取下一页"
|
|
44
|
+
},
|
|
45
|
+
{
|
|
46
|
+
name: "transformProps",
|
|
47
|
+
when: "渲染前链式改写瀑布流 props",
|
|
48
|
+
description: "补 gap / columns 默认值、按断点覆盖配置"
|
|
49
|
+
}
|
|
50
|
+
], p = [], u = "只读取 context 字段(props / state / data),不调用上下文方法", h = [
|
|
35
51
|
{
|
|
36
52
|
name: "threshold",
|
|
37
53
|
type: "number",
|
|
@@ -44,39 +60,42 @@ const c = "InfiniteScrollPlugin", l = "监听 Core 的 onReachBottom,在距底
|
|
|
44
60
|
default: "props.onLoadMore",
|
|
45
61
|
description: "加载回调"
|
|
46
62
|
}
|
|
47
|
-
],
|
|
63
|
+
], g = `// 滚动到距底部阈值内触发加载更多,带并发锁防重复请求。
|
|
48
64
|
const Waterfall = withPlugins(WaterfallCore, [
|
|
49
65
|
createInfiniteScrollPlugin({
|
|
50
66
|
threshold: 300,
|
|
51
67
|
}),
|
|
52
68
|
]);
|
|
53
69
|
|
|
54
|
-
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`,
|
|
70
|
+
<Waterfall items={items} renderItem={(item) => <Card data={item} />} />;`, P = [
|
|
55
71
|
"PaginationPlugin"
|
|
56
|
-
],
|
|
72
|
+
], y = [
|
|
57
73
|
"距底 300px 预加载,滚到底时数据已就位",
|
|
58
74
|
"并发锁:加载中不重复触发",
|
|
59
75
|
"context.hasMore 为 false 时自动停"
|
|
60
|
-
],
|
|
76
|
+
], M = [
|
|
61
77
|
"信息流无限滚动",
|
|
62
78
|
"画廊继续加载",
|
|
63
79
|
"搜索结果瀑布流"
|
|
64
|
-
],
|
|
80
|
+
], w = [
|
|
65
81
|
"阈值不要小于一屏(约 600px),否则用户滚到底会看到空白等待。",
|
|
66
82
|
"翻页类场景请用 PaginationPlugin,两者不要同装。"
|
|
67
|
-
],
|
|
83
|
+
], I = {
|
|
68
84
|
name: c,
|
|
69
85
|
description: l,
|
|
70
86
|
since: d,
|
|
71
|
-
tags:
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
87
|
+
tags: m,
|
|
88
|
+
events: f,
|
|
89
|
+
methods: p,
|
|
90
|
+
methodsNote: u,
|
|
91
|
+
config: h,
|
|
92
|
+
example: g,
|
|
93
|
+
conflicts: P,
|
|
94
|
+
features: y,
|
|
95
|
+
useCases: M,
|
|
96
|
+
notes: w
|
|
78
97
|
};
|
|
79
98
|
export {
|
|
80
|
-
|
|
81
|
-
|
|
99
|
+
x as c,
|
|
100
|
+
I as d
|
|
82
101
|
};
|