ono-react-element 0.0.7 → 0.0.9
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/es/AutoSliderList-Dy-otnYu.js +30 -0
- package/dist/es/AvatarCrop-DrA-SARP.js +65 -0
- package/dist/es/Button-C89izu2m.js +26 -0
- package/dist/es/Card3D-DMvCSUhe.js +18 -0
- package/dist/es/Checkbox-daBabj14.js +19 -0
- package/dist/es/InjunctiveBox-D0V-K9Pn.js +11 -0
- package/dist/es/Input-Z3uL5-nj.js +80 -0
- package/dist/es/List-UAKCMuGC.js +19 -0
- package/dist/es/MenuButton-DHkU5Bq7.js +17 -0
- package/dist/es/Message-GvTC61N0.js +68 -0
- package/dist/es/Modal-C-c_S_VM.js +32 -0
- package/dist/es/Pagination-m71H2tfS.js +17 -0
- package/dist/es/PortalRenderer-CDAzQJgm.js +19 -0
- package/dist/es/Radio-D_GKVoOC.js +25 -0
- package/dist/es/Select-y-aAIqxg.js +23 -0
- package/dist/es/SvgImg-CZwq2D7J.js +14 -0
- package/dist/es/Switch-CN3M5pXb.js +34 -0
- package/dist/es/TemplateDialog-fX7Ie-xU.js +45 -0
- package/dist/es/Toast-BadlA1yD.js +42 -0
- package/dist/es/Tooltip-C5OFmxWo.js +29 -0
- package/dist/es/VirtualList-BeDq637Z.js +65 -0
- package/dist/es/Waterfall-a_c3urjB.js +55 -0
- package/dist/es/dependencies-CbQbPZZ-.js +15524 -0
- package/dist/es/hooks-Dew3_cmY.js +103 -0
- package/dist/es/index.js +102 -233
- package/dist/es/style/AutoSliderList.css +1 -0
- package/dist/es/style/AvatarCrop.css +1 -0
- package/dist/es/style/Button.css +1 -0
- package/dist/es/style/Card3D.css +1 -0
- package/dist/es/style/Checkbox.css +1 -0
- package/dist/es/style/Input.css +1 -0
- package/dist/es/style/MenuButton.css +1 -0
- package/dist/es/style/Message.css +1 -0
- package/dist/es/style/Modal.css +1 -0
- package/dist/es/style/Pagination.css +1 -0
- package/dist/es/style/Radio.css +1 -0
- package/dist/es/style/Select.css +1 -0
- package/dist/es/style/SvgImg.css +1 -0
- package/dist/es/style/Switch.css +1 -0
- package/dist/es/style/TemplateDialog.css +1 -0
- package/dist/es/style/Toast.css +1 -0
- package/dist/es/style/Tooltip.css +1 -0
- package/dist/es/style/Waterfall.css +1 -0
- package/dist/es/style/index.css +1 -0
- package/dist/es/utils-BxXROOPY.js +394 -0
- package/dist/index.css +1 -1
- package/dist/types/index.d.ts +2 -2
- package/dist/types/utils/common.d.ts +36 -20
- package/dist/umd/index.css +1 -1
- package/dist/umd/index.css.br +0 -0
- package/dist/umd/index.css.gz +0 -0
- package/dist/umd/index.umd.cjs +16578 -295
- package/dist/umd/index.umd.cjs.br +0 -0
- package/dist/umd/index.umd.cjs.gz +0 -0
- package/package.json +56 -49
- package/dist/es/AutoSliderList-DN4Sec6L.js +0 -106
- package/dist/es/AvatarCrop-DzGw2FVQ.js +0 -225
- package/dist/es/Button-CdxyXFF4.js +0 -72
- package/dist/es/Card3D-sf3zmiHk.js +0 -41
- package/dist/es/Checkbox-BN7rT73n.js +0 -62
- package/dist/es/InjunctiveBox-CGpy0PxH.js +0 -39
- package/dist/es/Input-DoY3kR7J.js +0 -301
- package/dist/es/List-B9mP7VjN.js +0 -35
- package/dist/es/MenuButton-CuOdVlg0.js +0 -62
- package/dist/es/Message-TfweOOpK.js +0 -219
- package/dist/es/Modal-CHgTYu-I.js +0 -154
- package/dist/es/Pagination-BtmtUkVw.js +0 -110
- package/dist/es/PortalRenderer-8Iur-eZp.js +0 -38
- package/dist/es/Radio-BmSpqdK8.js +0 -113
- package/dist/es/SvgImg-Bcmzdjzl.js +0 -38
- package/dist/es/Switch-DwDBR0sG.js +0 -110
- package/dist/es/TemplateDialog-SXrElzoR.js +0 -75
- package/dist/es/Toast-C7ybVNyd.js +0 -174
- package/dist/es/Tooltip-BtzG0TSW.js +0 -94
- package/dist/es/VirtualList-OG7kqLe0.js +0 -160
- package/dist/es/Waterfall-GHdJxww4.js +0 -131
- package/dist/es/dependencies-DWmdjl5u.js +0 -25491
- package/dist/es/hooks-CQN6qu4t.js +0 -159
- package/dist/es/utils-BLV_TQU3.js +0 -585
|
@@ -1,174 +0,0 @@
|
|
|
1
|
-
import { j as s } from "./dependencies-DWmdjl5u.js";
|
|
2
|
-
import { useEffect as y, useRef as L } from "react";
|
|
3
|
-
import { i as T } from "./InjunctiveBox-CGpy0PxH.js";
|
|
4
|
-
const b = "_container_3s92l_1", m = "_base_3s92l_15", z = "_promise_3s92l_15", M = "_enter_3s92l_32", C = "_leave_3s92l_36", B = "_icon_3s92l_40", i = {
|
|
5
|
-
container: b,
|
|
6
|
-
base: m,
|
|
7
|
-
promise: z,
|
|
8
|
-
enter: M,
|
|
9
|
-
leave: C,
|
|
10
|
-
icon: B
|
|
11
|
-
};
|
|
12
|
-
let t = [];
|
|
13
|
-
const E = {
|
|
14
|
-
success: { light: "#52c41a", dark: "#49aa19" },
|
|
15
|
-
error: { light: "#ff4d4f", dark: "#a61d24" },
|
|
16
|
-
warning: { light: "#faad14", dark: "#d89614" },
|
|
17
|
-
promise: { light: "", dark: "" }
|
|
18
|
-
}, v = (e, r) => E[e][r], I = (e) => {
|
|
19
|
-
switch (e) {
|
|
20
|
-
case "success":
|
|
21
|
-
return /* @__PURE__ */ s.jsx(
|
|
22
|
-
"svg",
|
|
23
|
-
{
|
|
24
|
-
viewBox: "0 0 1024 1024",
|
|
25
|
-
focusable: "false",
|
|
26
|
-
"data-icon": "check-circle",
|
|
27
|
-
width: "24px",
|
|
28
|
-
height: "24px",
|
|
29
|
-
fill: v(e, "light"),
|
|
30
|
-
"aria-hidden": "true",
|
|
31
|
-
children: /* @__PURE__ */ s.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z" })
|
|
32
|
-
}
|
|
33
|
-
);
|
|
34
|
-
case "error":
|
|
35
|
-
return /* @__PURE__ */ s.jsx(
|
|
36
|
-
"svg",
|
|
37
|
-
{
|
|
38
|
-
viewBox: "0 0 1024 1024",
|
|
39
|
-
focusable: "false",
|
|
40
|
-
"data-icon": "close-circle",
|
|
41
|
-
width: "24px",
|
|
42
|
-
height: "24px",
|
|
43
|
-
fill: v(e, "light"),
|
|
44
|
-
"aria-hidden": "true",
|
|
45
|
-
children: /* @__PURE__ */ s.jsx("path", { d: "M512 64c247.4 0 448 200.6 448 448S759.4 960 512 960 64 759.4 64 512 264.6 64 512 64zm127.98 274.82h-.04l-.08.06L512 466.75 384.14 338.88c-.04-.05-.06-.06-.08-.06a.12.12 0 00-.07 0c-.03 0-.05.01-.09.05l-45.02 45.02a.2.2 0 00-.05.09.12.12 0 000 .07v.02a.27.27 0 00.06.06L466.75 512 338.88 639.86c-.05.04-.06.06-.06.08a.12.12 0 000 .07c0 .03.01.05.05.09l45.02 45.02a.2.2 0 00.09.05.12.12 0 00.07 0c.02 0 .04-.01.08-.05L512 557.25l127.86 127.87c.04.04.06.05.08.05a.12.12 0 00.07 0c.03 0 .05-.01.09-.05l45.02-45.02a.2.2 0 00.05-.09.12.12 0 000-.07v-.02a.27.27 0 00-.05-.06L557.25 512l127.87-127.86c.04-.04.05-.06.05-.08a.12.12 0 000-.07c0-.03-.01-.05-.05-.09l-45.02-45.02a.2.2 0 00-.09-.05.12.12 0 00-.07 0z" })
|
|
46
|
-
}
|
|
47
|
-
);
|
|
48
|
-
case "warning":
|
|
49
|
-
return /* @__PURE__ */ s.jsx(
|
|
50
|
-
"svg",
|
|
51
|
-
{
|
|
52
|
-
viewBox: "0 0 1024 1024",
|
|
53
|
-
focusable: "false",
|
|
54
|
-
"data-icon": "exclamation-circle",
|
|
55
|
-
width: "24px",
|
|
56
|
-
height: "24px",
|
|
57
|
-
fill: v(e, "light"),
|
|
58
|
-
"aria-hidden": "true",
|
|
59
|
-
children: /* @__PURE__ */ s.jsx("path", { d: "M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm-32 232c0-4.4 3.6-8 8-8h48c4.4 0 8 3.6 8 8v272c0 4.4-3.6 8-8 8h-48c-4.4 0-8-3.6-8-8V296zm32 440a48.01 48.01 0 010-96 48.01 48.01 0 010 96z" })
|
|
60
|
-
}
|
|
61
|
-
);
|
|
62
|
-
}
|
|
63
|
-
}, P = ({
|
|
64
|
-
type: e,
|
|
65
|
-
speed: r = 200,
|
|
66
|
-
message: l,
|
|
67
|
-
duration: f = 2e3,
|
|
68
|
-
className: x,
|
|
69
|
-
style: g,
|
|
70
|
-
isUseEnterAnimation: _ = !0,
|
|
71
|
-
promiseOptions: c,
|
|
72
|
-
toastList: h,
|
|
73
|
-
handleDestroy: o
|
|
74
|
-
}) => {
|
|
75
|
-
const a = L(null), j = () => {
|
|
76
|
-
a.current && (a.current.style.setProperty("--speed", `${r / 1e3}s`), _ && a.current.classList.add(i.enter), e !== "promise" && setTimeout(() => {
|
|
77
|
-
var d, u;
|
|
78
|
-
(d = a.current) == null || d.classList.remove(i.enter), (u = a.current) == null || u.classList.add(i.leave);
|
|
79
|
-
}, f - r));
|
|
80
|
-
}, w = () => typeof l == "string" ? l : c && c.loading, k = () => {
|
|
81
|
-
(typeof l == "function" ? l() : l).then(
|
|
82
|
-
(u) => setTimeout(() => {
|
|
83
|
-
o(), n({
|
|
84
|
-
type: "success",
|
|
85
|
-
message: typeof (c == null ? void 0 : c.success) == "function" ? c.success(u) : (c == null ? void 0 : c.success) || "",
|
|
86
|
-
isUseEnterAnimation: !1,
|
|
87
|
-
toastList: h
|
|
88
|
-
});
|
|
89
|
-
}, r)
|
|
90
|
-
).catch(
|
|
91
|
-
(u) => setTimeout(() => {
|
|
92
|
-
o(), n({
|
|
93
|
-
type: "error",
|
|
94
|
-
message: typeof (c == null ? void 0 : c.error) == "function" ? c.error(u) : (c == null ? void 0 : c.error) || "",
|
|
95
|
-
isUseEnterAnimation: !1,
|
|
96
|
-
toastList: h
|
|
97
|
-
});
|
|
98
|
-
}, r)
|
|
99
|
-
);
|
|
100
|
-
};
|
|
101
|
-
return y(() => {
|
|
102
|
-
j();
|
|
103
|
-
}, [a]), y(() => {
|
|
104
|
-
e === "promise" ? k() : setTimeout(() => o(() => h = []), f);
|
|
105
|
-
}, [e]), /* @__PURE__ */ s.jsxs(
|
|
106
|
-
"div",
|
|
107
|
-
{
|
|
108
|
-
ref: a,
|
|
109
|
-
className: [
|
|
110
|
-
e === "promise" ? i.promise : i.base,
|
|
111
|
-
x
|
|
112
|
-
].join(" "),
|
|
113
|
-
style: g,
|
|
114
|
-
onClick: () => console.log("click"),
|
|
115
|
-
children: [
|
|
116
|
-
/* @__PURE__ */ s.jsx("div", { className: i.icon, children: I(e) }),
|
|
117
|
-
/* @__PURE__ */ s.jsx("p", { children: w() })
|
|
118
|
-
]
|
|
119
|
-
}
|
|
120
|
-
);
|
|
121
|
-
}, n = ({
|
|
122
|
-
type: e,
|
|
123
|
-
speed: r = 200,
|
|
124
|
-
message: l,
|
|
125
|
-
duration: f = 2e3,
|
|
126
|
-
zIndex: x = 9999,
|
|
127
|
-
className: g,
|
|
128
|
-
style: _,
|
|
129
|
-
isUseEnterAnimation: c = !0,
|
|
130
|
-
promiseOptions: h,
|
|
131
|
-
toastList: o
|
|
132
|
-
}) => T({
|
|
133
|
-
className: i.container,
|
|
134
|
-
isSingle: !0,
|
|
135
|
-
style: { zIndex: x },
|
|
136
|
-
content: (a) => (y(() => {
|
|
137
|
-
console.log(o);
|
|
138
|
-
}, [o]), /* @__PURE__ */ s.jsx(
|
|
139
|
-
P,
|
|
140
|
-
{
|
|
141
|
-
className: g,
|
|
142
|
-
style: _,
|
|
143
|
-
type: e,
|
|
144
|
-
message: l,
|
|
145
|
-
speed: r,
|
|
146
|
-
duration: f,
|
|
147
|
-
isUseEnterAnimation: c,
|
|
148
|
-
promiseOptions: h,
|
|
149
|
-
handleDestroy: a,
|
|
150
|
-
toastList: o
|
|
151
|
-
}
|
|
152
|
-
))
|
|
153
|
-
}), A = {
|
|
154
|
-
success: (e) => {
|
|
155
|
-
t.push({ type: "success", message: e }), n(typeof e == "string" ? { type: "success", message: e, toastList: t } : { type: "success", ...e, toastList: t });
|
|
156
|
-
},
|
|
157
|
-
error: (e) => {
|
|
158
|
-
t.push({ type: "error", message: e }), n(typeof e == "string" ? { type: "error", message: e, toastList: t } : { type: "error", ...e, toastList: t });
|
|
159
|
-
},
|
|
160
|
-
warning: (e) => {
|
|
161
|
-
t.push({ type: "warning", message: e }), n(typeof e == "string" ? { type: "warning", message: e, toastList: t } : { type: "warning", ...e, toastList: t });
|
|
162
|
-
},
|
|
163
|
-
promise: (e, r) => {
|
|
164
|
-
t.push({ type: "promise", message: e }), n({
|
|
165
|
-
type: "promise",
|
|
166
|
-
message: e,
|
|
167
|
-
promiseOptions: r,
|
|
168
|
-
toastList: t
|
|
169
|
-
});
|
|
170
|
-
}
|
|
171
|
-
};
|
|
172
|
-
export {
|
|
173
|
-
A as t
|
|
174
|
-
};
|
|
@@ -1,94 +0,0 @@
|
|
|
1
|
-
import { j as n } from "./dependencies-DWmdjl5u.js";
|
|
2
|
-
import { createPopper as E } from "@popperjs/core";
|
|
3
|
-
import { useState as S, useRef as d, useEffect as x } from "react";
|
|
4
|
-
import { c as F } from "./hooks-CQN6qu4t.js";
|
|
5
|
-
let f = null, u = null;
|
|
6
|
-
const $ = ({
|
|
7
|
-
children: i,
|
|
8
|
-
content: p,
|
|
9
|
-
onOpenChange: l,
|
|
10
|
-
trigger: o = "hover",
|
|
11
|
-
placement: m = "top",
|
|
12
|
-
popperOptions: a = {},
|
|
13
|
-
className: h,
|
|
14
|
-
style: v,
|
|
15
|
-
isShowArrow: w = !0,
|
|
16
|
-
sameWidth: y,
|
|
17
|
-
autoAdjustOverflow: j = !0
|
|
18
|
-
}) => {
|
|
19
|
-
const [s, T] = S(!1), c = d(null), e = d(null), r = (t) => {
|
|
20
|
-
l == null || l(t), T(t);
|
|
21
|
-
}, b = () => {
|
|
22
|
-
e.current && (o === "hover" ? (e.current.onmouseenter = () => r(!0), e.current.onmouseleave = () => r(!1)) : o === "click" ? e.current.onclick = () => r(!s) : o === "focus" ? (e.current.onfocus = () => r(!0), e.current.onblur = () => r(!1)) : e.current.oncontextmenu = () => r(!s));
|
|
23
|
-
}, k = () => {
|
|
24
|
-
if (!e.current) return;
|
|
25
|
-
const t = Array.from(e.current.children);
|
|
26
|
-
if (t.length > 1) throw new Error("Tooltip only support one child");
|
|
27
|
-
e.current.style.width = t[0].getBoundingClientRect().width + "px";
|
|
28
|
-
}, R = () => {
|
|
29
|
-
s && e.current && c.current ? u = E(e.current, c.current, {
|
|
30
|
-
placement: m,
|
|
31
|
-
modifiers: [
|
|
32
|
-
{
|
|
33
|
-
name: "offset",
|
|
34
|
-
options: {
|
|
35
|
-
offset: [0, 6]
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
y ? {
|
|
39
|
-
name: "sameWidth",
|
|
40
|
-
enabled: !0,
|
|
41
|
-
phase: "beforeWrite",
|
|
42
|
-
requires: ["computeStyles"],
|
|
43
|
-
fn({ state: t }) {
|
|
44
|
-
t.styles.popper.width = `${t.rects.reference.width}px`;
|
|
45
|
-
},
|
|
46
|
-
effect({ state: t }) {
|
|
47
|
-
t.elements.popper.style.width = `${t.elements.reference.offsetWidth}px`;
|
|
48
|
-
}
|
|
49
|
-
} : {},
|
|
50
|
-
j ? {
|
|
51
|
-
name: "flip",
|
|
52
|
-
enabled: !0
|
|
53
|
-
} : {}
|
|
54
|
-
// {
|
|
55
|
-
// name: 'preventOverflow',
|
|
56
|
-
// options: { enabled: autoAdjustOverflow }
|
|
57
|
-
// }
|
|
58
|
-
],
|
|
59
|
-
...a
|
|
60
|
-
}) : u && (u.destroy(), u = null, f && f.remove(), f = null);
|
|
61
|
-
};
|
|
62
|
-
return F(
|
|
63
|
-
e,
|
|
64
|
-
() => {
|
|
65
|
-
(o === "click" || o === "contextmenu") && r(!1);
|
|
66
|
-
},
|
|
67
|
-
{
|
|
68
|
-
event: ["click", "contextmenu"],
|
|
69
|
-
deps: [o, l]
|
|
70
|
-
}
|
|
71
|
-
), x(() => {
|
|
72
|
-
k();
|
|
73
|
-
}, [e, i]), x(() => {
|
|
74
|
-
b(), R();
|
|
75
|
-
}, [s, e, c]), /* @__PURE__ */ n.jsxs(n.Fragment, { children: [
|
|
76
|
-
s && /* @__PURE__ */ n.jsxs(
|
|
77
|
-
"div",
|
|
78
|
-
{
|
|
79
|
-
ref: c,
|
|
80
|
-
style: v,
|
|
81
|
-
className: ["ono-tooltip-popper", h].join(" "),
|
|
82
|
-
"data-popper-placement": a.placement || m,
|
|
83
|
-
children: [
|
|
84
|
-
/* @__PURE__ */ n.jsx("div", { children: p instanceof Function ? p() : p }),
|
|
85
|
-
w && /* @__PURE__ */ n.jsx("div", { className: "ono-tooltip-popper-arrow", "data-popper-arrow": !0 })
|
|
86
|
-
]
|
|
87
|
-
}
|
|
88
|
-
),
|
|
89
|
-
/* @__PURE__ */ n.jsx("div", { ref: e, children: i instanceof Function ? i() : i })
|
|
90
|
-
] });
|
|
91
|
-
};
|
|
92
|
-
export {
|
|
93
|
-
$ as T
|
|
94
|
-
};
|
|
@@ -1,160 +0,0 @@
|
|
|
1
|
-
import { j as L } from "./dependencies-DWmdjl5u.js";
|
|
2
|
-
import { memo as q, useState as R, useMemo as g, useRef as M, useEffect as y } from "react";
|
|
3
|
-
import { a as F } from "./hooks-CQN6qu4t.js";
|
|
4
|
-
const Q = q(
|
|
5
|
-
({
|
|
6
|
-
containerClassName: z,
|
|
7
|
-
dataSource: a,
|
|
8
|
-
containerStyle: I = {},
|
|
9
|
-
onEndCallback: m,
|
|
10
|
-
refreshSpeed: $ = 50,
|
|
11
|
-
wrapperClassName: b,
|
|
12
|
-
wrapperStyle: A = {},
|
|
13
|
-
estimatedSize: w = 35,
|
|
14
|
-
updateDataSourceScroll2Top: E,
|
|
15
|
-
direction: i = "vertical"
|
|
16
|
-
}) => {
|
|
17
|
-
const [c, C] = R({
|
|
18
|
-
viewSize: 0,
|
|
19
|
-
startIndex: 0,
|
|
20
|
-
listSize: 0,
|
|
21
|
-
renderCount: 0,
|
|
22
|
-
prevLen: 0
|
|
23
|
-
}), [l, D] = R([]), h = typeof w == "number" ? w : w(), j = g(
|
|
24
|
-
() => Math.min(a.length, c.startIndex + c.renderCount),
|
|
25
|
-
[a, c]
|
|
26
|
-
), x = g(
|
|
27
|
-
() => {
|
|
28
|
-
var e;
|
|
29
|
-
return c.startIndex > 0 ? (e = l[c.startIndex - 1]) == null ? void 0 : e.end : 0;
|
|
30
|
-
},
|
|
31
|
-
[c.startIndex, l]
|
|
32
|
-
), H = g(
|
|
33
|
-
() => a.slice(c.startIndex, j).map(({ id: e, data: n }) => /* @__PURE__ */ L.jsx(
|
|
34
|
-
"li",
|
|
35
|
-
{
|
|
36
|
-
"data-virtual-id": e,
|
|
37
|
-
style: i === "vertical" ? { width: "100%" } : { height: "100%" },
|
|
38
|
-
children: n
|
|
39
|
-
},
|
|
40
|
-
e
|
|
41
|
-
)),
|
|
42
|
-
[j, a, c.startIndex, i]
|
|
43
|
-
), N = g(
|
|
44
|
-
() => ({
|
|
45
|
-
display: "flex",
|
|
46
|
-
listStyle: "none",
|
|
47
|
-
flexDirection: i === "vertical" ? "column" : "row",
|
|
48
|
-
height: i === "vertical" ? `${c.listSize - x}px` : "100%",
|
|
49
|
-
width: i === "vertical" ? "auto" : `${c.listSize - x}px`,
|
|
50
|
-
transform: i === "vertical" ? `translate3d(0, ${x}px, 0)` : `translate3d(${x}px, 0, 0)`
|
|
51
|
-
}),
|
|
52
|
-
[c.listSize, x, i]
|
|
53
|
-
), f = M(null), u = M(null), p = (e) => C((n) => ({ ...n, ...e })), W = () => {
|
|
54
|
-
if (!f.current) return;
|
|
55
|
-
const e = (i === "vertical" ? f.current.offsetHeight : f.current.offsetWidth) || 0;
|
|
56
|
-
p({
|
|
57
|
-
viewSize: e,
|
|
58
|
-
renderCount: Math.ceil(e / h) + 1
|
|
59
|
-
});
|
|
60
|
-
}, P = () => {
|
|
61
|
-
var r;
|
|
62
|
-
const e = [], n = a.length - c.prevLen, o = n > 0 ? l.length : 0, s = o > 0 ? l[o - 1].end : 0;
|
|
63
|
-
for (let t = 0; t < (n > 0 ? n : a.length); t++) {
|
|
64
|
-
const d = a[(n > 0 ? c.prevLen : 0) + t];
|
|
65
|
-
e.push({
|
|
66
|
-
index: d.id,
|
|
67
|
-
size: h,
|
|
68
|
-
start: s ? s + t * h : d.id * h,
|
|
69
|
-
end: s ? s + (t + 1) * h : (d.id + 1) * h,
|
|
70
|
-
dSize: 0
|
|
71
|
-
});
|
|
72
|
-
}
|
|
73
|
-
D((t) => [...n > 0 ? t : [], ...e]), p({ prevLen: a.length }), E && ((r = f.current) == null || r.scrollTo(0, 0));
|
|
74
|
-
}, T = () => {
|
|
75
|
-
if (!u.current || l.length === 0) return;
|
|
76
|
-
const e = Array.from(u.current.childNodes);
|
|
77
|
-
if (!e.length) return;
|
|
78
|
-
e.forEach((r) => {
|
|
79
|
-
const t = r.getBoundingClientRect(), d = +r.getAttribute("data-virtual-id"), v = l[d], S = v.size - (i === "vertical" ? t.height : t.width);
|
|
80
|
-
S && (v.size = i === "vertical" ? t.height : t.width, v.end = v.end - S, v.dSize = S);
|
|
81
|
-
});
|
|
82
|
-
const n = +e[0].getAttribute("data-virtual-id"), o = l.length;
|
|
83
|
-
let s = l[n].dSize;
|
|
84
|
-
l[n].dSize = 0;
|
|
85
|
-
for (let r = n + 1; r < o; r++) {
|
|
86
|
-
const t = l[r];
|
|
87
|
-
t.start = l[r - 1].end, t.end = t.end - s, t.dSize && (s += t.dSize, t.dSize = 0);
|
|
88
|
-
}
|
|
89
|
-
p({ listSize: l[o - 1].end });
|
|
90
|
-
}, V = ((e, n = 300) => {
|
|
91
|
-
let o = 0;
|
|
92
|
-
return () => {
|
|
93
|
-
const s = Date.now();
|
|
94
|
-
s - o >= n && (e(), o = s);
|
|
95
|
-
};
|
|
96
|
-
})(() => {
|
|
97
|
-
const {
|
|
98
|
-
scrollTop: e,
|
|
99
|
-
clientHeight: n,
|
|
100
|
-
scrollHeight: o,
|
|
101
|
-
scrollLeft: s,
|
|
102
|
-
clientWidth: r,
|
|
103
|
-
scrollWidth: t
|
|
104
|
-
} = f.current, d = i === "vertical" ? o - n - e : t - r - s;
|
|
105
|
-
p({
|
|
106
|
-
startIndex: B(
|
|
107
|
-
l,
|
|
108
|
-
i === "vertical" ? e : s
|
|
109
|
-
)
|
|
110
|
-
}), (i === "vertical" ? e === h / 2 : s === h / 2) && p({ startIndex: 0 }), d <= 20 && m && m();
|
|
111
|
-
}, $), B = (e, n) => {
|
|
112
|
-
let o = 0, s = e.length - 1, r = -1;
|
|
113
|
-
for (; o <= s; ) {
|
|
114
|
-
const t = o + Math.floor((s - o) / 2), d = e[t].end;
|
|
115
|
-
if (d === n)
|
|
116
|
-
return t + 1;
|
|
117
|
-
d < n ? o = t + 1 : ((r === -1 || r > t) && (r = t), s = t - 1);
|
|
118
|
-
}
|
|
119
|
-
return r;
|
|
120
|
-
};
|
|
121
|
-
return F("scroll", V, {
|
|
122
|
-
target: f.current,
|
|
123
|
-
deps: [l, i]
|
|
124
|
-
}), y(() => {
|
|
125
|
-
W();
|
|
126
|
-
}, [f, i]), y(() => {
|
|
127
|
-
a.length && u && P();
|
|
128
|
-
}, [u, a, E]), y(() => {
|
|
129
|
-
T();
|
|
130
|
-
}, [u, l, c.startIndex, i]), /* @__PURE__ */ L.jsx(
|
|
131
|
-
"div",
|
|
132
|
-
{
|
|
133
|
-
ref: f,
|
|
134
|
-
className: z,
|
|
135
|
-
style: {
|
|
136
|
-
width: "100%",
|
|
137
|
-
height: "100%",
|
|
138
|
-
overflow: "auto",
|
|
139
|
-
...I
|
|
140
|
-
},
|
|
141
|
-
children: /* @__PURE__ */ L.jsx(
|
|
142
|
-
"ul",
|
|
143
|
-
{
|
|
144
|
-
ref: u,
|
|
145
|
-
className: b,
|
|
146
|
-
style: { ...N, ...A },
|
|
147
|
-
children: H
|
|
148
|
-
}
|
|
149
|
-
)
|
|
150
|
-
}
|
|
151
|
-
);
|
|
152
|
-
}
|
|
153
|
-
), U = (z, a) => z.map((I, m) => ({
|
|
154
|
-
id: m,
|
|
155
|
-
data: a(I, m)
|
|
156
|
-
}));
|
|
157
|
-
export {
|
|
158
|
-
Q as E,
|
|
159
|
-
U as c
|
|
160
|
-
};
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import { j as m } from "./dependencies-DWmdjl5u.js";
|
|
2
|
-
import { useState as W, useRef as b, useCallback as v, useEffect as I } from "react";
|
|
3
|
-
import { a as z } from "./hooks-CQN6qu4t.js";
|
|
4
|
-
const K = ({
|
|
5
|
-
options: a,
|
|
6
|
-
pageSize: h,
|
|
7
|
-
children: M,
|
|
8
|
-
request: F,
|
|
9
|
-
reloadData: o,
|
|
10
|
-
className: H,
|
|
11
|
-
style: P,
|
|
12
|
-
updateData: L,
|
|
13
|
-
loading: l = !0,
|
|
14
|
-
bottomThreshold: T = 50
|
|
15
|
-
}) => {
|
|
16
|
-
const [t, d] = W({
|
|
17
|
-
page: 1,
|
|
18
|
-
reloadData: o,
|
|
19
|
-
loading: !1,
|
|
20
|
-
isFinish: !1,
|
|
21
|
-
gap: typeof a == "number" ? 0 : a.gap,
|
|
22
|
-
imageWidth: typeof a == "number" ? a : 0,
|
|
23
|
-
columns: typeof a == "number" ? 0 : a.columns,
|
|
24
|
-
imageList: []
|
|
25
|
-
}), [p, j] = W([]), [x, E] = W([]), w = b(null), g = b(null), u = b(null), f = (n) => d((e) => ({ ...e, ...n })), $ = (n) => {
|
|
26
|
-
let e = 0, s = 0;
|
|
27
|
-
return e = n.indexOf(Math.min(...n)), s = n[e], { index: e, height: s };
|
|
28
|
-
}, y = async (n, e) => {
|
|
29
|
-
const s = o && t.reloadData !== o;
|
|
30
|
-
if (t.isFinish) return;
|
|
31
|
-
f({ loading: !0 });
|
|
32
|
-
const i = await F(n, e);
|
|
33
|
-
S(i), f({
|
|
34
|
-
isFinish: !i.length,
|
|
35
|
-
imageList: s ? [...i] : [...t.imageList, ...i],
|
|
36
|
-
page: n + 1,
|
|
37
|
-
loading: !1
|
|
38
|
-
});
|
|
39
|
-
}, S = (n) => d((e) => {
|
|
40
|
-
const s = o && t.reloadData !== o, i = s ? [] : [...x], c = s ? Array(e.columns).fill(0) : [
|
|
41
|
-
...JSON.stringify(p) !== "[]" ? p : Array(e.columns).fill(0)
|
|
42
|
-
];
|
|
43
|
-
return n.forEach((C) => {
|
|
44
|
-
const r = $(c), k = Math.floor(
|
|
45
|
-
C.height * e.imageWidth / C.width
|
|
46
|
-
);
|
|
47
|
-
i.push({
|
|
48
|
-
x: r.index % e.columns !== 0 ? r.index * e.imageWidth + e.gap * r.index : r.index * e.imageWidth,
|
|
49
|
-
y: r.height
|
|
50
|
-
}), c[r.index] += k + e.gap, j(c);
|
|
51
|
-
}), E(i), e;
|
|
52
|
-
}), A = () => {
|
|
53
|
-
d({
|
|
54
|
-
page: 1,
|
|
55
|
-
reloadData: o,
|
|
56
|
-
loading: !1,
|
|
57
|
-
isFinish: !1,
|
|
58
|
-
gap: typeof a == "number" ? 0 : a.gap,
|
|
59
|
-
imageWidth: typeof a == "number" ? a : 0,
|
|
60
|
-
columns: typeof a == "number" ? 0 : a.columns,
|
|
61
|
-
imageList: []
|
|
62
|
-
}), j([]), E([]);
|
|
63
|
-
}, R = v(() => {
|
|
64
|
-
if (!u.current) return;
|
|
65
|
-
const n = u.current.clientWidth;
|
|
66
|
-
let e = 0, s = t.page;
|
|
67
|
-
if (o && t.reloadData !== o && (A(), s = 1), typeof a == "number") {
|
|
68
|
-
const i = Math.floor(n / t.imageWidth);
|
|
69
|
-
e = i - 1;
|
|
70
|
-
const c = e ? (n - i * t.imageWidth) / e : 0;
|
|
71
|
-
f({ columns: i, gap: c });
|
|
72
|
-
} else {
|
|
73
|
-
e = t.columns - 1;
|
|
74
|
-
const i = (n - e * t.gap) / t.columns;
|
|
75
|
-
f({ imageWidth: i });
|
|
76
|
-
}
|
|
77
|
-
y(s, h);
|
|
78
|
-
}, [t, o]), N = () => {
|
|
79
|
-
w.current && clearTimeout(w.current), w.current = setTimeout(R, 50);
|
|
80
|
-
}, O = ((n, e = 50) => {
|
|
81
|
-
let s = 0;
|
|
82
|
-
return () => {
|
|
83
|
-
const i = Date.now();
|
|
84
|
-
i - s >= e && (n(), s = i);
|
|
85
|
-
};
|
|
86
|
-
})(() => {
|
|
87
|
-
const { scrollTop: n, clientHeight: e, scrollHeight: s } = g.current;
|
|
88
|
-
s - e - n > T || !t.loading && y(t.page, h);
|
|
89
|
-
});
|
|
90
|
-
return z("scroll", O, {
|
|
91
|
-
target: g.current,
|
|
92
|
-
deps: [t.loading, t.page]
|
|
93
|
-
}), I(() => (R(), window.addEventListener("resize", N), () => {
|
|
94
|
-
window.removeEventListener("resize", N);
|
|
95
|
-
}), [u, o]), I(() => {
|
|
96
|
-
L && y(t.page, h);
|
|
97
|
-
}, [L, t.loading, t.page, g.current]), /* @__PURE__ */ m.jsxs("div", { className: "ono-waterfall-container", children: [
|
|
98
|
-
/* @__PURE__ */ m.jsx(
|
|
99
|
-
"div",
|
|
100
|
-
{
|
|
101
|
-
ref: g,
|
|
102
|
-
className: [H, "ono-waterfall-content"].join(" ").trim(),
|
|
103
|
-
style: P,
|
|
104
|
-
children: /* @__PURE__ */ m.jsx(
|
|
105
|
-
"div",
|
|
106
|
-
{
|
|
107
|
-
ref: u,
|
|
108
|
-
className: "ono-waterfall-wrapper",
|
|
109
|
-
style: { height: `${Math.max(...p) - t.gap}px` },
|
|
110
|
-
children: t.imageList.map((n, e) => /* @__PURE__ */ m.jsx(
|
|
111
|
-
"div",
|
|
112
|
-
{
|
|
113
|
-
className: "ono-waterfall-item",
|
|
114
|
-
style: {
|
|
115
|
-
width: `${t.imageWidth}px`,
|
|
116
|
-
transform: `translate(${x[e].x}px,${x[e].y}px)`
|
|
117
|
-
},
|
|
118
|
-
children: M(n, e)
|
|
119
|
-
},
|
|
120
|
-
n.id
|
|
121
|
-
))
|
|
122
|
-
}
|
|
123
|
-
)
|
|
124
|
-
}
|
|
125
|
-
),
|
|
126
|
-
t.loading && (typeof l == "function" ? l() : l && typeof l == "boolean" ? /* @__PURE__ */ m.jsx("div", { className: "ono-waterfall-loading", children: "loading..." }) : l)
|
|
127
|
-
] });
|
|
128
|
-
};
|
|
129
|
-
export {
|
|
130
|
-
K as W
|
|
131
|
-
};
|