@xiping/react-components 1.0.14 → 1.0.16
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.
|
@@ -1,119 +1,157 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { jsx as
|
|
3
|
-
import { Modal as
|
|
4
|
-
import { Spinner as
|
|
5
|
-
import { IoDownloadOutline as
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
import { useState as
|
|
9
|
-
import
|
|
10
|
-
const
|
|
11
|
-
|
|
12
|
-
},
|
|
2
|
+
import { jsx as t, jsxs as u } from "react/jsx-runtime";
|
|
3
|
+
import { Modal as z, ModalContent as M } from "@heroui/modal";
|
|
4
|
+
import { Spinner as D } from "@heroui/spinner";
|
|
5
|
+
import { IoDownloadOutline as U, IoCloseSharp as V } from "react-icons/io5";
|
|
6
|
+
import q from "../pinch-content/PinchContent.js";
|
|
7
|
+
import { useScroll as A, motion as B, useMotionValue as P, useMotionValueEvent as W, animate as h } from "motion/react";
|
|
8
|
+
import { useState as v, useRef as H, useEffect as T } from "react";
|
|
9
|
+
import _ from "clsx";
|
|
10
|
+
const $ = (o) => {
|
|
11
|
+
o.target.closest(".image-viewer-main-content") && o.preventDefault();
|
|
12
|
+
}, y = "0%", F = "100%", x = "20%", g = "80%", l = "#0000", n = "#000";
|
|
13
|
+
function G(o) {
|
|
14
|
+
const e = P(
|
|
15
|
+
`linear-gradient(90deg, ${n}, ${n} ${y}, ${n} ${g}, ${l})`
|
|
16
|
+
);
|
|
17
|
+
return W(o, "change", (i) => {
|
|
18
|
+
i === 0 ? h(
|
|
19
|
+
e,
|
|
20
|
+
`linear-gradient(90deg, ${n}, ${n} ${y}, ${n} ${g}, ${l})`
|
|
21
|
+
) : i === 1 ? h(
|
|
22
|
+
e,
|
|
23
|
+
`linear-gradient(90deg, ${l}, ${n} ${x}, ${n} ${F}, ${n})`
|
|
24
|
+
) : (o.getPrevious() === 0 || o.getPrevious() === 1) && h(
|
|
25
|
+
e,
|
|
26
|
+
`linear-gradient(90deg, ${l}, ${n} ${x}, ${n} ${g}, ${l})`
|
|
27
|
+
);
|
|
28
|
+
}), e;
|
|
29
|
+
}
|
|
30
|
+
const ne = (o) => {
|
|
13
31
|
const {
|
|
14
|
-
isOpen:
|
|
15
|
-
onClose:
|
|
16
|
-
imgSrc:
|
|
17
|
-
canDownload:
|
|
18
|
-
wrapperClassName:
|
|
19
|
-
} =
|
|
20
|
-
|
|
21
|
-
},
|
|
22
|
-
const
|
|
32
|
+
isOpen: e,
|
|
33
|
+
onClose: i,
|
|
34
|
+
imgSrc: d,
|
|
35
|
+
canDownload: C = !1,
|
|
36
|
+
wrapperClassName: N
|
|
37
|
+
} = o, c = Array.isArray(d) ? d : [d], [m, k] = v(0), [I, f] = v(!0), p = H(null), b = () => {
|
|
38
|
+
f(!0), i();
|
|
39
|
+
}, E = async () => {
|
|
40
|
+
const r = c[m];
|
|
23
41
|
try {
|
|
24
|
-
const
|
|
25
|
-
a.href =
|
|
26
|
-
} catch (
|
|
27
|
-
console.error("Error downloading image:",
|
|
42
|
+
const R = await (await fetch(r)).blob(), w = window.URL.createObjectURL(R), a = document.createElement("a");
|
|
43
|
+
a.href = w, a.download = r.split("/").pop() || "image", document.body.appendChild(a), a.click(), window.URL.revokeObjectURL(w), document.body.removeChild(a);
|
|
44
|
+
} catch (s) {
|
|
45
|
+
console.error("Error downloading image:", s);
|
|
28
46
|
}
|
|
29
|
-
},
|
|
30
|
-
|
|
31
|
-
},
|
|
32
|
-
|
|
47
|
+
}, L = () => {
|
|
48
|
+
f(!1);
|
|
49
|
+
}, S = () => {
|
|
50
|
+
f(!1);
|
|
33
51
|
};
|
|
34
|
-
|
|
35
|
-
if (
|
|
36
|
-
return document.addEventListener("touchmove",
|
|
52
|
+
T(() => {
|
|
53
|
+
if (e)
|
|
54
|
+
return document.addEventListener("touchmove", $, {
|
|
37
55
|
passive: !1
|
|
38
56
|
}), () => {
|
|
39
|
-
document.removeEventListener("touchmove",
|
|
57
|
+
document.removeEventListener("touchmove", $);
|
|
40
58
|
};
|
|
41
|
-
}, [
|
|
42
|
-
|
|
59
|
+
}, [e]);
|
|
60
|
+
const { scrollXProgress: j } = A({ container: p }), O = G(j);
|
|
61
|
+
return /* @__PURE__ */ t(
|
|
62
|
+
z,
|
|
43
63
|
{
|
|
44
|
-
isOpen:
|
|
64
|
+
isOpen: e,
|
|
45
65
|
size: "full",
|
|
46
|
-
onClose:
|
|
66
|
+
onClose: b,
|
|
47
67
|
classNames: {
|
|
48
|
-
wrapper:
|
|
68
|
+
wrapper: _("", N)
|
|
49
69
|
},
|
|
50
70
|
className: "bg-black bg-opacity-70",
|
|
51
71
|
hideCloseButton: !0,
|
|
52
72
|
portalContainer: document.body,
|
|
53
|
-
children: /* @__PURE__ */
|
|
54
|
-
/* @__PURE__ */
|
|
55
|
-
|
|
56
|
-
|
|
73
|
+
children: /* @__PURE__ */ t(M, { className: "overflow-hidden", children: /* @__PURE__ */ u("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
|
|
74
|
+
/* @__PURE__ */ u("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
|
|
75
|
+
C && /* @__PURE__ */ t(
|
|
76
|
+
U,
|
|
57
77
|
{
|
|
58
78
|
size: 24,
|
|
59
79
|
className: "text-white cursor-pointer",
|
|
60
|
-
onClick:
|
|
80
|
+
onClick: E
|
|
61
81
|
}
|
|
62
82
|
),
|
|
63
|
-
/* @__PURE__ */
|
|
64
|
-
|
|
83
|
+
/* @__PURE__ */ t(
|
|
84
|
+
V,
|
|
65
85
|
{
|
|
66
86
|
size: 24,
|
|
67
87
|
className: "text-white cursor-pointer",
|
|
68
|
-
onClick:
|
|
88
|
+
onClick: b
|
|
69
89
|
}
|
|
70
90
|
)
|
|
71
91
|
] }),
|
|
72
|
-
/* @__PURE__ */
|
|
73
|
-
/* @__PURE__ */
|
|
92
|
+
/* @__PURE__ */ u("div", { className: "flex-1 min-h-0 relative flex items-center justify-center image-viewer-main-content", children: [
|
|
93
|
+
/* @__PURE__ */ t(q, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ t(
|
|
74
94
|
"img",
|
|
75
95
|
{
|
|
76
96
|
draggable: "false",
|
|
77
|
-
src:
|
|
97
|
+
src: c[m],
|
|
78
98
|
alt: "",
|
|
79
99
|
className: "w-screen h-full object-contain pointer-events-none",
|
|
80
|
-
onLoad:
|
|
81
|
-
onError:
|
|
100
|
+
onLoad: L,
|
|
101
|
+
onError: S
|
|
82
102
|
}
|
|
83
103
|
) }),
|
|
84
|
-
|
|
104
|
+
I && /* @__PURE__ */ t("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ t(D, { color: "white", size: "lg" }) })
|
|
85
105
|
] }),
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
src: o,
|
|
96
|
-
alt: "",
|
|
97
|
-
className: "w-full h-full object-contain",
|
|
98
|
-
draggable: "false"
|
|
99
|
-
}
|
|
100
|
-
)
|
|
106
|
+
c.length > 1 && /* @__PURE__ */ t("div", { className: "h-24 bg-black bg-opacity-50 shrink-0 z-10 pb-safe-offset-0 pl-safe-offset-0 pr-safe-offset-0", children: /* @__PURE__ */ t(
|
|
107
|
+
B.div,
|
|
108
|
+
{
|
|
109
|
+
ref: p,
|
|
110
|
+
style: {
|
|
111
|
+
maskImage: O,
|
|
112
|
+
WebkitOverflowScrolling: "touch",
|
|
113
|
+
scrollbarWidth: "none",
|
|
114
|
+
msOverflowStyle: "none"
|
|
101
115
|
},
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
116
|
+
className: "h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",
|
|
117
|
+
children: /* @__PURE__ */ t("div", { className: "flex gap-2 p-2 h-24 min-w-max", children: c.map((r, s) => /* @__PURE__ */ t(
|
|
118
|
+
"div",
|
|
119
|
+
{
|
|
120
|
+
className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${s === m ? "border-white" : "border-transparent"}`,
|
|
121
|
+
onClick: () => k(s),
|
|
122
|
+
children: /* @__PURE__ */ t(
|
|
123
|
+
"img",
|
|
124
|
+
{
|
|
125
|
+
src: r,
|
|
126
|
+
alt: "",
|
|
127
|
+
className: "w-full h-full object-contain",
|
|
128
|
+
draggable: "false"
|
|
129
|
+
}
|
|
130
|
+
)
|
|
131
|
+
},
|
|
132
|
+
r
|
|
133
|
+
)) })
|
|
134
|
+
}
|
|
135
|
+
) })
|
|
113
136
|
] }) })
|
|
114
137
|
}
|
|
115
138
|
);
|
|
116
|
-
}
|
|
139
|
+
}, J = `
|
|
140
|
+
.scrollbar-hide {
|
|
141
|
+
-ms-overflow-style: none;
|
|
142
|
+
scrollbar-width: none;
|
|
143
|
+
}
|
|
144
|
+
.scrollbar-hide::-webkit-scrollbar {
|
|
145
|
+
display: none;
|
|
146
|
+
}
|
|
147
|
+
`;
|
|
148
|
+
if (typeof document < "u") {
|
|
149
|
+
const o = "image-viewer-scrollbar-hide";
|
|
150
|
+
if (!document.getElementById(o)) {
|
|
151
|
+
const e = document.createElement("style");
|
|
152
|
+
e.id = o, e.textContent = J, document.head.appendChild(e);
|
|
153
|
+
}
|
|
154
|
+
}
|
|
117
155
|
export {
|
|
118
|
-
|
|
156
|
+
ne as default
|
|
119
157
|
};
|