@xiping/react-components 0.0.62 → 0.0.64

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

@@ -1,7 +1,8 @@
 interface ImageViewerProps {
     isOpen: boolean;
-    imgSrc: string;
+    imgSrc: string | string[];
     onClose: () => void;
+    canDownload?: boolean;
 }
 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 strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),l=require("@nextui-org/modal"),o=require("react-icons/io5"),r=require("../pinch-content/PinchContent.js"),i=t=>{const{isOpen:n,onClose:s,imgSrc:a}=t;return e.jsx(l.Modal,{isOpen:n,size:"full",onClose:s,className:"pppp bg-black bg-opacity-70",hideCloseButton:!0,children:e.jsx(l.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative",children:[e.jsx(o.IoCloseSharp,{size:24,className:"absolute top-2 right-2 text-white z-10",onClick:s}),e.jsx("div",{className:"w-full h-full",children:e.jsx(r.default,{canRotate:!1,children:e.jsx("img",{draggable:"false",src:a,alt:"",className:"w-screen h-screen object-contain pointer-events-none"})})})]})})})};exports.default=i;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),d=require("@nextui-org/modal"),N=require("@nextui-org/spinner"),u=require("react-icons/io5"),y=require("../pinch-content/PinchContent.js"),h=require("react"),k=m=>{const{isOpen:f,onClose:g,imgSrc:n,canDownload:b=!1}=m,l=Array.isArray(n)?n:[n],[a,x]=h.useState(0),[p,r]=h.useState(!0),c=()=>{r(!0),g()},j=async()=>{const s=l[a];try{const C=await(await fetch(s)).blob(),i=window.URL.createObjectURL(C),t=document.createElement("a");t.href=i,t.download=s.split("/").pop()||"image",document.body.appendChild(t),t.click(),window.URL.revokeObjectURL(i),document.body.removeChild(t)}catch(o){console.error("Error downloading image:",o)}},w=()=>{r(!1)},v=()=>{r(!1)};return e.jsx(d.Modal,{isOpen:f,size:"full",onClose:c,className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(d.ModalContent,{className:"overflow-hidden",children:e.jsxs("div",{className:"w-screen h-screen relative flex flex-col",children:[e.jsxs("div",{className:"absolute top-2 right-2 flex gap-4 z-10",children:[b&&e.jsx(u.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:j}),e.jsx(u.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:c})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center",children:[e.jsx(y.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:l[a],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:w,onError:v})}),p&&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"})})]}),l.length>1&&e.jsx("div",{className:"h-24 bg-black bg-opacity-50 shrink-0 z-10",children:e.jsx("div",{className:"w-full h-full overflow-x-auto flex gap-2 p-2",children:l.map((s,o)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${o===a?"border-white":"border-transparent"}`,onClick:()=>x(o),children:e.jsx("img",{src:s,alt:"",className:"w-full h-full object-contain",draggable:"false"})},s))})})]})})})};exports.default=k;

package/dist/cjs/components/pinch-content/PinchContent.d.ts

@@ -1,5 +1,6 @@
 import { ReactNode } from 'react';
 export interface PinchContentProps {
+    className?: string;
     children?: ReactNode;
     canDrag?: boolean;
     canPinch?: boolean;

package/dist/cjs/components/pinch-content/PinchContent.js

@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const f=require("react/jsx-runtime"),v=require("@react-spring/web"),d=require("@use-gesture/react"),w=require("react"),h=require("ahooks"),A=d.createUseGesture([d.dragAction,d.pinchAction]),c=a=>a.preventDefault(),B=a=>{const{children:x,canPinch:y=!0,canDrag:p=!0,canRotate:b=!0,scaleBounds:E={min:.3,max:8}}=a,t=w.useRef(null);h.useMount(()=>{var r,e,n;(r=t.current)==null||r.addEventListener("gesturestart",c),(e=t.current)==null||e.addEventListener("gesturechange",c),(n=t.current)==null||n.addEventListener("gestureend",c)}),h.useUnmount(()=>{var r,e,n;(r=t.current)==null||r.removeEventListener("gesturestart",c),(e=t.current)==null||e.removeEventListener("gesturechange",c),(n=t.current)==null||n.removeEventListener("gestureend",c)});const[u,g]=v.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return A({onDrag:({pinching:r,cancel:e,offset:[n,o],...i})=>{if(console.log(i),!p||r)return e();g.start({x:n,y:o})},onPinch:({origin:[r,e],first:n,movement:[o],offset:[i,L],memo:s,cancel:q})=>{if(!y)return q();if(n){const{width:R,height:m,x:D,y:M}=t.current.getBoundingClientRect(),S=r-(D+R/2),Z=e-(M+m/2);s=[u.x.get(),u.y.get(),S,Z]}const j=s[0]-(o-1)*s[2],P=s[1]-(o-1)*s[3],l={scale:i,rotateZ:0,x:j,y:P};return b&&(l.rotateZ=L),g.start(l),s}},{target:t,drag:{from:()=>[u.x.get(),u.y.get()]},pinch:{scaleBounds:E,rubberband:!0}}),f.jsx("div",{className:"flex fill center",children:f.jsx(v.animated.div,{className:"select-none",ref:t,style:u,children:x})})};exports.default=B;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const w=require("react/jsx-runtime"),f=require("@react-spring/web"),g=require("@use-gesture/react"),A=require("react"),v=require("ahooks"),B=require("clsx"),C=g.createUseGesture([g.dragAction,g.pinchAction]),u=a=>a.preventDefault(),G=a=>{const{className:h,children:x,canPinch:y=!0,canDrag:p=!0,canRotate:b=!0,scaleBounds:q={min:.3,max:10}}=a,t=A.useRef(null);v.useMount(()=>{var r,e,n;(r=t.current)==null||r.addEventListener("gesturestart",u),(e=t.current)==null||e.addEventListener("gesturechange",u),(n=t.current)==null||n.addEventListener("gestureend",u)}),v.useUnmount(()=>{var r,e,n;(r=t.current)==null||r.removeEventListener("gesturestart",u),(e=t.current)==null||e.removeEventListener("gesturechange",u),(n=t.current)==null||n.removeEventListener("gestureend",u)});const[c,d]=f.useSpring(()=>({x:0,y:0,scale:1,rotateZ:0}));return C({onDrag:({pinching:r,cancel:e,offset:[n,o],...i})=>{if(console.log(i),!p||r)return e();d.start({x:n,y:o})},onPinch:({origin:[r,e],first:n,movement:[o],offset:[i,E],memo:s,cancel:L})=>{if(!y)return L();if(n){const{width:j,height:m,x:D,y:M}=t.current.getBoundingClientRect(),S=r-(D+j/2),Z=e-(M+m/2);s=[c.x.get(),c.y.get(),S,Z]}const P=s[0]-(o-1)*s[2],R=s[1]-(o-1)*s[3],l={scale:i,rotateZ:0,x:P,y:R};return b&&(l.rotateZ=E),d.start(l),s}},{target:t,drag:{from:()=>[c.x.get(),c.y.get()]},pinch:{scaleBounds:q,rubberband:!0}}),w.jsx(f.animated.div,{className:B("select-none",h),ref:t,style:c,children:x})};exports.default=G;