@xiping/react-components 1.0.12 → 1.0.13

package/dist/cjs/components/image-viewer/ImageViewer.d.ts

@@ -3,6 +3,7 @@ interface ImageViewerProps {
     imgSrc: string | string[];
     onClose: () => void;
     canDownload?: boolean;
+    wrapperClassName?: string;
 }
 declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageViewer;

package/dist/cjs/components/image-viewer/ImageViewer.js

@@ -1 +1 @@
-"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("@heroui/modal"),k=require("@heroui/spinner"),p=require("react-icons/io5"),S=require("../pinch-content/PinchContent.js"),z=require("@radix-ui/react-scroll-area"),f=require("react");function L(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const n in t)if(n!=="default"){const a=Object.getOwnPropertyDescriptor(t,n);Object.defineProperty(o,n,a.get?a:{enumerable:!0,get:()=>t[n]})}}return o.default=t,Object.freeze(o)}const i=L(z),x=t=>{t.preventDefault()},O=t=>{const{isOpen:o,onClose:n,imgSrc:a,canDownload:g=!1}=t,c=Array.isArray(a)?a:[a],[d,j]=f.useState(0),[w,u]=f.useState(!0),h=()=>{u(!0),n()},v=async()=>{const r=c[d];try{const C=await(await fetch(r)).blob(),b=window.URL.createObjectURL(C),l=document.createElement("a");l.href=b,l.download=r.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(b),document.body.removeChild(l)}catch(s){console.error("Error downloading image:",s)}},N=()=>{u(!1)},y=()=>{u(!1)};return f.useEffect(()=>{if(o)return document.addEventListener("touchmove",x,{passive:!1}),()=>{document.removeEventListener("touchmove",x)}},[o]),e.jsx(m.Modal,{isOpen:o,size:"full",onClose:h,className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(m.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:[g&&e.jsx(p.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:v}),e.jsx(p.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:h})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(S.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:c[d],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:N,onError:y})}),w&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(k.Spinner,{color:"white",size:"lg"})})]}),c.length>1&&e.jsx("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:e.jsxs(i.Root,{className:"h-24 w-screen",type:"auto",children:[e.jsx(i.Viewport,{className:"pppp h-full w-full",children:e.jsx("div",{className:"flex gap-2 p-2 h-24",children:c.map((r,s)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${s===d?"border-white":"border-transparent"}`,onClick:()=>j(s),children:e.jsx("img",{src:r,alt:"",className:"w-full h-full object-contain",draggable:"false"})},r))})}),e.jsx(i.Scrollbar,{className:"flex select-none touch-none p-0.5 bg-black/50 transition-colors duration-150 ease-out hover:bg-black/80 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col",orientation:"horizontal",children:e.jsx(i.Thumb,{className:"flex-1 bg-white/50 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"})})]})})]})})})};exports.default=O;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),m=require("@heroui/modal"),S=require("@heroui/spinner"),p=require("react-icons/io5"),z=require("../pinch-content/PinchContent.js"),L=require("@radix-ui/react-scroll-area"),f=require("react"),O=require("clsx");function q(t){const o=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(t){for(const s in t)if(s!=="default"){const a=Object.getOwnPropertyDescriptor(t,s);Object.defineProperty(o,s,a.get?a:{enumerable:!0,get:()=>t[s]})}}return o.default=t,Object.freeze(o)}const i=q(L),x=t=>{t.preventDefault()},I=t=>{const{isOpen:o,onClose:s,imgSrc:a,canDownload:g=!1,wrapperClassName:j}=t,c=Array.isArray(a)?a:[a],[d,w]=f.useState(0),[v,u]=f.useState(!0),h=()=>{u(!0),s()},N=async()=>{const r=c[d];try{const k=await(await fetch(r)).blob(),b=window.URL.createObjectURL(k),l=document.createElement("a");l.href=b,l.download=r.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(b),document.body.removeChild(l)}catch(n){console.error("Error downloading image:",n)}},y=()=>{u(!1)},C=()=>{u(!1)};return f.useEffect(()=>{if(o)return document.addEventListener("touchmove",x,{passive:!1}),()=>{document.removeEventListener("touchmove",x)}},[o]),e.jsx(m.Modal,{isOpen:o,size:"full",onClose:h,classNames:{wrapper:O("",j)},className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(m.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:[g&&e.jsx(p.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:N}),e.jsx(p.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:h})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(z.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:c[d],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:y,onError:C})}),v&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(S.Spinner,{color:"white",size:"lg"})})]}),c.length>1&&e.jsx("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:e.jsxs(i.Root,{className:"h-24 w-screen",type:"auto",children:[e.jsx(i.Viewport,{className:"pppp h-full w-full",children:e.jsx("div",{className:"flex gap-2 p-2 h-24",children:c.map((r,n)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${n===d?"border-white":"border-transparent"}`,onClick:()=>w(n),children:e.jsx("img",{src:r,alt:"",className:"w-full h-full object-contain",draggable:"false"})},r))})}),e.jsx(i.Scrollbar,{className:"flex select-none touch-none p-0.5 bg-black/50 transition-colors duration-150 ease-out hover:bg-black/80 data-[orientation=horizontal]:h-2.5 data-[orientation=vertical]:w-2.5 data-[orientation=horizontal]:flex-col",orientation:"horizontal",children:e.jsx(i.Thumb,{className:"flex-1 bg-white/50 rounded-[10px] relative before:content-[''] before:absolute before:top-1/2 before:left-1/2 before:-translate-x-1/2 before:-translate-y-1/2 before:w-full before:h-full before:min-w-[44px] before:min-h-[44px]"})})]})})]})})})};exports.default=I;

package/dist/es/components/image-viewer/ImageViewer.d.ts

@@ -3,6 +3,7 @@ interface ImageViewerProps {
     imgSrc: string | string[];
     onClose: () => void;
     canDownload?: boolean;
+    wrapperClassName?: string;
 }
 declare const ImageViewer: (props: ImageViewerProps) => import("react/jsx-runtime").JSX.Element;
 export default ImageViewer;

package/dist/es/components/image-viewer/ImageViewer.js

@@ -1,30 +1,37 @@
 "use client";
 import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import { Modal as k, ModalContent as L } from "@heroui/modal";
-import { Spinner as z } from "@heroui/spinner";
-import { IoDownloadOutline as j, IoCloseSharp as I } from "react-icons/io5";
-import E from "../pinch-content/PinchContent.js";
+import { Modal as L, ModalContent as z } from "@heroui/modal";
+import { Spinner as j } from "@heroui/spinner";
+import { IoDownloadOutline as I, IoCloseSharp as E } from "react-icons/io5";
+import R from "../pinch-content/PinchContent.js";
 import * as n from "@radix-ui/react-scroll-area";
-import { useState as p, useEffect as R } from "react";
+import { useState as p, useEffect as S } from "react";
+import D from "clsx";
 const u = (s) => {
   s.preventDefault();
-}, V = (s) => {
-  const { isOpen: i, onClose: b, imgSrc: c, canDownload: g = !1 } = s, r = Array.isArray(c) ? c : [c], [d, w] = p(0), [v, f] = p(!0), m = () => {
-    f(!0), b();
-  }, x = async () => {
-    const o = r[d];
+}, G = (s) => {
+  const {
+    isOpen: i,
+    onClose: b,
+    imgSrc: c,
+    canDownload: g = !1,
+    wrapperClassName: w
+  } = s, r = Array.isArray(c) ? c : [c], [f, v] = p(0), [x, d] = p(!0), m = () => {
+    d(!0), b();
+  }, N = async () => {
+    const o = r[f];
     try {
-      const y = await (await fetch(o)).blob(), h = window.URL.createObjectURL(y), a = document.createElement("a");
+      const k = await (await fetch(o)).blob(), h = window.URL.createObjectURL(k), a = document.createElement("a");
       a.href = h, a.download = o.split("/").pop() || "image", document.body.appendChild(a), a.click(), window.URL.revokeObjectURL(h), document.body.removeChild(a);
     } catch (t) {
       console.error("Error downloading image:", t);
     }
-  }, N = () => {
-    f(!1);
   }, C = () => {
-    f(!1);
+    d(!1);
+  }, y = () => {
+    d(!1);
   };
-  return R(() => {
+  return S(() => {
     if (i)
       return document.addEventListener("touchmove", u, {
         passive: !1
@@ -32,26 +39,29 @@ const u = (s) => {
         document.removeEventListener("touchmove", u);
       };
   }, [i]), /* @__PURE__ */ e(
-    k,
+    L,
     {
       isOpen: i,
       size: "full",
       onClose: m,
+      classNames: {
+        wrapper: D("", w)
+      },
       className: "bg-black bg-opacity-70",
       hideCloseButton: !0,
       portalContainer: document.body,
-      children: /* @__PURE__ */ e(L, { className: "overflow-hidden", children: /* @__PURE__ */ l("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
+      children: /* @__PURE__ */ e(z, { className: "overflow-hidden", children: /* @__PURE__ */ l("div", { className: "w-screen h-screen relative flex flex-col pt-safe-offset-0", children: [
         /* @__PURE__ */ l("div", { className: "absolute top-2 right-2 flex gap-4 z-10", children: [
           g && /* @__PURE__ */ e(
-            j,
+            I,
             {
               size: 24,
               className: "text-white cursor-pointer",
-              onClick: x
+              onClick: N
             }
           ),
           /* @__PURE__ */ e(
-            I,
+            E,
             {
               size: 24,
               className: "text-white cursor-pointer",
@@ -60,25 +70,25 @@ const u = (s) => {
           )
         ] }),
         /* @__PURE__ */ l("div", { className: "flex-1 min-h-0 relative flex items-center justify-center", children: [
-          /* @__PURE__ */ e(E, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(
+          /* @__PURE__ */ e(R, { canRotate: !1, className: "w-full h-full", children: /* @__PURE__ */ e(
             "img",
             {
               draggable: "false",
-              src: r[d],
+              src: r[f],
               alt: "",
               className: "w-screen h-full object-contain pointer-events-none",
-              onLoad: N,
-              onError: C
+              onLoad: C,
+              onError: y
             }
           ) }),
-          v && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(z, { color: "white", size: "lg" }) })
+          x && /* @__PURE__ */ e("div", { className: "absolute inset-0 flex items-center justify-center bg-black bg-opacity-50", children: /* @__PURE__ */ e(j, { color: "white", size: "lg" }) })
         ] }),
         r.length > 1 && /* @__PURE__ */ e("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__ */ l(n.Root, { className: "h-24 w-screen", type: "auto", children: [
           /* @__PURE__ */ e(n.Viewport, { className: "pppp h-full w-full", children: /* @__PURE__ */ e("div", { className: "flex gap-2 p-2 h-24", children: r.map((o, t) => /* @__PURE__ */ e(
             "div",
             {
-              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${t === d ? "border-white" : "border-transparent"}`,
-              onClick: () => w(t),
+              className: `h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${t === f ? "border-white" : "border-transparent"}`,
+              onClick: () => v(t),
               children: /* @__PURE__ */ e(
                 "img",
                 {
@@ -105,5 +115,5 @@ const u = (s) => {
   );
 };
 export {
-  V as default
+  G as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@xiping/react-components",
   "private": false,
-  "version": "1.0.12",
+  "version": "1.0.13",
   "type": "module",
   "main": "./dist/cjs/index.js",
   "module": "./dist/es/index.js",
@@ -102,5 +102,5 @@
   "engines": {
     "node": ">=20"
   },
-  "gitHead": "94b9351a8cb37cbfca40d528f06e1513243fe6b8"
+  "gitHead": "2241fd579443d54339afba75c192a73d68f9043e"
 }