+"use strict";const C=require("react/jsx-runtime"),s=require("react");function V(t,o){s.useEffect(()=>{const e=getComputedStyle(document.body).overflow||"auto";return t?document.body.style.overflow="hidden":document.body.style.overflow=e,()=>{document.body.style.overflow=e}},[t]),s.useEffect(()=>{if(!o)return;const e=n=>{t&&n.touches.length===1&&n.preventDefault()};return t&&o.addEventListener("touchmove",e,{passive:!1}),()=>{o.removeEventListener("touchmove",e)}},[t,o])}function X(t,o,e,n){return s.useMemo(()=>{if(!o||!e)return`${t}%`;const r=(n==null?void 0:n.clientWidth)||0;if(!r)return`${t}%`;const l=e/r*100;return`${l<100?t:l}%`},[t,o,e,n])}function Y(t){return s.useCallback(o=>{if(!t)return;const e=t.getBoundingClientRect();let n,r;if((i=>"touches"in i)(o)){const i=o.touches[0];n=(i.clientX-e.x)/e.width*100,r=(i.clientY-e.y)/e.height*100}else n=(o.clientX-e.x)/e.width*100,r=(o.clientY-e.y)/e.height*100;return`${Math.max(0,Math.min(n,100))}% ${Math.max(0,Math.min(r,100))}%`},[t])}function O(t,o){const[e,n]=s.useState({imgData:null,error:!1,naturalWidth:0,naturalHeight:0});return s.useEffect(()=>{if(n({imgData:null,error:!1,naturalWidth:0,naturalHeight:0}),!t){n(g=>({...g,error:!0}));return}const r=new Image,l=()=>{n({imgData:r.src,error:!1,naturalWidth:r.naturalWidth,naturalHeight:r.naturalHeight})},i=g=>{n(c=>({...c,error:!0})),o==null||o(g)};return r.addEventListener("load",l),r.addEventListener("error",i),r.src=t,()=>{r.removeEventListener("load",l),r.removeEventListener("error",i)}},[t,o]),e}function A({zoom:t="200",fullWidth:o=!1,alt:e="This is an imageZoom image",width:n="100%",height:r="auto",src:l,id:i,className:g,theme:c,onError:$,errorContent:S}){const[u,y]=s.useState(!1),[p,h]=s.useState("50% 50%"),v=s.useRef(null),d=Y(v.current),m=s.useRef(!1);V(u,v.current);const{imgData:f,error:D,naturalWidth:j}=O(l,$),E=X(t,o,j,v.current),L=(a,M,k,x,b,q)=>{M&&(m.current=!0);const I=!k;x(I);const Z=I?q(a):"50% 50%";Z&&b(Z)},T=(a,M,k,x)=>{if(M){const b=x(a);b&&k(b)}},z=s.useCallback(a=>{if(m.current){m.current=!1;return}L(a,!1,u,y,h,d)},[u,d]),w=s.useCallback(a=>{a.touches.length===1&&L(a,!0,u,y,h,d)},[u,d]),H=s.useCallback(a=>{T(a,u,h,d)},[u,d]),W=s.useCallback(a=>{a.touches.length===1&&(a.preventDefault(),m.current=!0,u?T(a,u,h,d):w(a))},[w,u,d]),P=s.useCallback(()=>{m.current=!1,y(!1),h("50% 50%")},[]),B=s.useMemo(()=>({backgroundImage:`url(${u&&f?f:""})`,backgroundSize:E,backgroundPosition:p}),[u,f,E,p]);if(D)return s.isValidElement(S)?S:C.jsx("p",{className:"image-zooom-error",children:"There was a problem loading your image"});const N=[f?"loaded":"loading",u?"zoomed":"fullView","image-zooom",c==null?void 0:c.root,g].filter(Boolean).join(" ");return C.jsx("figure",{ref:v,id:i,className:N,style:B,onClick:z,onMouseMove:H,onMouseLeave:P,onTouchStart:w,onTouchMove:W,onTouchEnd:P,role:"button","aria-label":`Zoomable image: ${e}`,tabIndex:0,children:f&&C.jsx("img",{loading:"lazy",id:"imageZoom",className:c==null?void 0:c.image,src:f,alt:e,width:n,height:r})})}module.exports=A;
0 commit comments