pkg-components
Version:
2 lines (1 loc) • 3.26 kB
JavaScript
import{a as h,F as x,j as c}from"./jsx-runtime-DI8_P1Ft.js";import{P as e}from"./index-B3IC6ylx.js";import{r as q}from"./index-DPzuYzxM.js";const D="_draggable__fullScreen_1nqnc_1",L="_draggable__container_1nqnc_23",E="_drop__container_1nqnc_51",C="_draggable_button_1nqnc_65",d={draggable__fullScreen:D,draggable__container:L,drop__container:E,draggable_button:C},g=({children:p,isOpen:y,dragRatio:b=.5,halfScreen:v=!1,minFullscreenTranslation:o=0,modalRef:a=null,onClose:u,...Y})=>{const n=q.useRef(),S=t=>{t.preventDefault(),document.body.style.overflowY="hidden";const{clientX:s,clientY:r}=t.touches[0],{offsetTop:f,offsetLeft:l}=a.current,{left:i,top:w}=a.current.getBoundingClientRect();n.current={dragStartLeft:i-l,dragStartTop:w-f,dragStartX:s,dragStartY:r,transalteY:0},window.addEventListener("touchmove",_,!1),window.addEventListener("touchend",m,!1)},m=()=>{document.body.style.overflowY="scroll";const t=n.current.transalteY,s=v?document.body.clientHeight/4:document.body.clientHeight,r=b*s;if(o&&t>r){const l=o!==0?t:o,i=a.current.animate([{transform:`translateY(${l}px)`},{transform:`translateY(${o}px)`}],{duration:200});i.addEventListener("finish",()=>{n.current.transalteY=o,a.current.style.transform=`translateY(${o}px)`}),i.addEventListener("finish",()=>{u()})}t<r&&t>0&&a.current.animate([{transform:`translateY(${t}px)`},{transform:"translateY(0px)"}],{duration:200}).addEventListener("finish",()=>{n.current.transalteY=0,a.current.style.transform="translateY(0px)"});const f=window.screen.height-window.screen.height*.3;t>f&&u(),window.removeEventListener("touchmove",_,!1),window.removeEventListener("touchend",m,!1)},_=t=>{var r;if(t.preventDefault(),!((r=t.touches)!=null&&r.length))return;const{clientY:s}=t.touches[0];n.current.transalteY=n.current.dragStartTop+s-n.current.dragStartY,n.current.transalteY<0&&(n.current.transalteY=0),a.current.style.transform=`translateY(${n.current.transalteY}px)`};return y?h(x,{children:[c("div",{className:d.draggable__fullScreen,onClick:()=>u()}),h("div",{className:d.draggable__container,onTouchStart:S,ref:a,style:{padding:Y.padding},children:[c("div",{className:d.drop__container,children:c("div",{className:d.draggable_button})}),p]})]}):c("div",{ref:a})};g.propTypes={children:e.any,dragRatio:e.number,halfScreen:e.bool,isOpen:e.any,minFullscreenTranslation:e.number,modalRef:e.shape({current:e.shape({animate:e.func,getBoundingClientRect:e.func,offsetLeft:e.any,offsetTop:e.any,style:e.shape({transform:e.any})})}),onClose:e.func};try{g.displayName="DraggableContainer",g.__docgenInfo={description:"",displayName:"DraggableContainer",props:{isOpen:{defaultValue:null,description:"",name:"isOpen",required:!0,type:{name:"any"}},dragRatio:{defaultValue:{value:"0.5"},description:"",name:"dragRatio",required:!1,type:{name:"number"}},halfScreen:{defaultValue:{value:"false"},description:"",name:"halfScreen",required:!1,type:{name:"boolean"}},minFullscreenTranslation:{defaultValue:{value:"0"},description:"",name:"minFullscreenTranslation",required:!1,type:{name:"number"}},modalRef:{defaultValue:{value:"null"},description:"",name:"modalRef",required:!1,type:{name:"null"}},onClose:{defaultValue:null,description:"",name:"onClose",required:!0,type:{name:"any"}}}}}catch{}export{g as D};