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