@xiping/react-components 1.0.14 → 1.0.16

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

@@ -1 +1,9 @@
-"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;
+"use client";"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const e=require("react/jsx-runtime"),v=require("@heroui/modal"),O=require("@heroui/spinner"),x=require("react-icons/io5"),z=require("../pinch-content/PinchContent.js"),o=require("motion/react"),u=require("react"),D=require("clsx"),$=n=>{n.target.closest(".image-viewer-main-content")&&n.preventDefault()},j="0%",U="100%",y="20%",g="80%",i="#0000",s="#000";function P(n){const t=o.useMotionValue(`linear-gradient(90deg, ${s}, ${s} ${j}, ${s} ${g}, ${i})`);return o.useMotionValueEvent(n,"change",c=>{c===0?o.animate(t,`linear-gradient(90deg, ${s}, ${s} ${j}, ${s} ${g}, ${i})`):c===1?o.animate(t,`linear-gradient(90deg, ${i}, ${s} ${y}, ${s} ${U}, ${s})`):(n.getPrevious()===0||n.getPrevious()===1)&&o.animate(t,`linear-gradient(90deg, ${i}, ${s} ${y}, ${s} ${g}, ${i})`)}),t}const V=n=>{const{isOpen:t,onClose:c,imgSrc:m,canDownload:C=!1,wrapperClassName:N}=n,d=Array.isArray(m)?m:[m],[f,k]=u.useState(0),[I,h]=u.useState(!0),p=u.useRef(null),b=()=>{h(!0),c()},S=async()=>{const a=d[f];try{const M=await(await fetch(a)).blob(),w=window.URL.createObjectURL(M),l=document.createElement("a");l.href=w,l.download=a.split("/").pop()||"image",document.body.appendChild(l),l.click(),window.URL.revokeObjectURL(w),document.body.removeChild(l)}catch(r){console.error("Error downloading image:",r)}},q=()=>{h(!1)},E=()=>{h(!1)};u.useEffect(()=>{if(t)return document.addEventListener("touchmove",$,{passive:!1}),()=>{document.removeEventListener("touchmove",$)}},[t]);const{scrollXProgress:L}=o.useScroll({container:p}),R=P(L);return e.jsx(v.Modal,{isOpen:t,size:"full",onClose:b,classNames:{wrapper:D("",N)},className:"bg-black bg-opacity-70",hideCloseButton:!0,portalContainer:document.body,children:e.jsx(v.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:[C&&e.jsx(x.IoDownloadOutline,{size:24,className:"text-white cursor-pointer",onClick:S}),e.jsx(x.IoCloseSharp,{size:24,className:"text-white cursor-pointer",onClick:b})]}),e.jsxs("div",{className:"flex-1 min-h-0 relative flex items-center justify-center image-viewer-main-content",children:[e.jsx(z.default,{canRotate:!1,className:"w-full h-full",children:e.jsx("img",{draggable:"false",src:d[f],alt:"",className:"w-screen h-full object-contain pointer-events-none",onLoad:q,onError:E})}),I&&e.jsx("div",{className:"absolute inset-0 flex items-center justify-center bg-black bg-opacity-50",children:e.jsx(O.Spinner,{color:"white",size:"lg"})})]}),d.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.jsx(o.motion.div,{ref:p,style:{maskImage:R,WebkitOverflowScrolling:"touch",scrollbarWidth:"none",msOverflowStyle:"none"},className:"h-24 w-screen overflow-x-auto overflow-y-hidden scrollbar-hide",children:e.jsx("div",{className:"flex gap-2 p-2 h-24 min-w-max",children:d.map((a,r)=>e.jsx("div",{className:`h-full aspect-square flex-shrink-0 cursor-pointer border-2 transition-all ${r===f?"border-white":"border-transparent"}`,onClick:()=>k(r),children:e.jsx("img",{src:a,alt:"",className:"w-full h-full object-contain",draggable:"false"})},a))})})})]})})})},_=`
+  .scrollbar-hide {
+    -ms-overflow-style: none;
+    scrollbar-width: none;
+  }
+  .scrollbar-hide::-webkit-scrollbar {
+    display: none;
+  }
+`;if(typeof document<"u"){const n="image-viewer-scrollbar-hide";if(!document.getElementById(n)){const t=document.createElement("style");t.id=n,t.textContent=_,document.head.appendChild(t)}}exports.default=V;