@bothub-chat/ui
Version:
Bothub UI Components
2 lines (1 loc) • 1.48 kB
JavaScript
import{jsx as r}from"react/jsx-runtime";import{useState as t,useRef as e,useCallback as n}from"react";import{ZoommableImageContainer as c,ZoommableImageWrapper as o,ZoommableImageStyled as i}from"./styled.js";const a=({imageProps:a,className:u,onZoomStart:l,onZoomEnd:s})=>{const[x,m]=t(1),y=1!==x,[f,p]=t(!1),g=e({x:0,y:0}),h=e({x:0,y:0}),d=e(null),b=n((r,t)=>{if(!d.current)return{x:r,y:t};const e=d.current.getBoundingClientRect(),n=e.width*(x-1)/2,c=e.height*(x-1)/2;return{x:Math.max(-n,Math.min(n,r)),y:Math.max(-c,Math.min(c,t))}},[x]),v=n(r=>{if(d.current){const{x:t,y:e}=b(g.current.x,g.current.y);d.current.style.transform=1!==r?`translate(${t}px, ${e}px) scale(${r})`:""}},[b]),D=n(()=>{d.current&&(d.current.style.transition="transform 0.3s ease");const r=y?1:2;2===r?null==l||l():null==s||s(),m(r),g.current={x:0,y:0},v(r)},[y,l,s,v]),M=n(r=>{y&&(r.preventDefault(),p(!0),h.current={x:r.clientX,y:r.clientY})},[y]),P=n(r=>{if(!f||!y)return;r.preventDefault(),d.current&&(d.current.style.transition="none");const t=r.clientX-h.current.x,e=r.clientY-h.current.y,n={x:g.current.x+t,y:g.current.y+e};g.current=b(n.x,n.y),h.current={x:r.clientX,y:r.clientY},v(x)},[v,f,x,y,b]),j=n(r=>{y&&(r.preventDefault(),p(!1))},[y]);return r(c,{className:u,children:r(o,{ref:d,onDoubleClick:D,onPointerDown:M,onPointerMove:P,onPointerUp:j,onPointerLeave:j,style:{cursor:f?"grabbing":"grab"},children:r(i,Object.assign({},a,{draggable:"false"}))})})};export{a as ZoommableImage};