@lanaco/lnc-react-ui/dist/SwipeableDrawer.cjs

React component library

"use strict";const f=require("react/jsx-runtime"),a=require("react"),x=require("./emotion-styled.browser.esm-DwHBgTPn.cjs"),m=require("./utils-BK6B_Y9X.cjs"),U=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),V=(e,n,r,s,u)=>{if(e==="right"||e==="left"||n&&r)return"height: 100%;";if(!(n&&u===!0))return n?"height: "+s+";":"height: 0;"},X=(e,n,r,s,u)=>{if(e==="top"||e==="bottom"||n&&r)return"width: 100%;";if(!(n&&u===!0))return n?"width: "+s+";":"width: 0;"},Y=x.styled.div`
  touch-action: none;
  overflow: auto;
  max-height: ${e=>e.isOpen||e.unsetHeight===!1?"100dvh":0};
  ${e=>V(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetHeight)}
  max-width: ${e=>e.isOpen||e.unsetWidth===!1?"100vw":0};
  ${e=>X(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetWidth)}
  position: ${e=>e.position};
  z-index: ${e=>e.zIndex};
  ${e=>e.direction==="bottom"?"bottom: 0":"top: 0"};
  ${e=>e.direction==="right"?"right: 0":"left: 0"};
  -webkit-transition: ${e=>`all ${e.duration}s`};
  -moz-transition: ${e=>`all ${e.duration}s`};
  -ms-transition: ${e=>`all ${e.duration}s`};
  -o-transition: ${e=>`all ${e.duration}s`};
  transition: ${e=>`all ${e.duration}s`};
  padding: ${e=>e.isOpen===!0?"20px":0};

  box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.1);

  background-color: ${e=>m.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","background")};
  color: ${e=>m.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","text")};
  ${e=>m.getComponentTypographyCss(e.theme,"Drawer",e.size,"enabled")};
`,N=x.styled.div`
  z-index: ${e=>e.zIndex};
  position: ${e=>e.position};
  top: 0;
  left: 0;

  height: ${e=>e.isOpen===!0&&e.enableOverlay===!0?"100dvh":0};
  width: ${e=>e.isOpen===!0&&e.enableOverlay===!0?"100vw":0};
  background-color: ${e=>e.overlayColor};
`,A=a.forwardRef((e,n)=>{const{direction:r="right",duration:s=.8,enableOverlay:u=!0,zIndex:$=100,position:y="fixed",closeOnClickOutside:O=!0,closeOnSwipe:c=!0,isFullPage:z=!1,unsetHeight:D=!1,unsetWidth:S=!1,onClose:C=()=>{},onOpen:k=()=>{},className:T="",style:q={},color:E="neutral",overlayColor:F="rgba(123, 123, 123, 0.5)",size:H="small",drawerSize:I="12.5rem",children:j,...M}=e,W=U.useTheme(),i=a.useRef(),[g,w]=a.useState(!1);var h=null,d=null;function _(t){return t.touches||t.originalEvent.touches}function p(t){const l=_(t)[0];h=l.clientX,d=l.clientY}function P(t){if(!(!h||!d)){var l=t.touches[0].clientX,L=t.touches[0].clientY,b=h-l,v=d-L;Math.abs(b)>Math.abs(v)?b>0?c==!0&&r=="left"&&o():c==!0&&r=="right"&&o():v>0?c==!0&&r=="top"&&o():c==!0&&r=="bottom"&&o(),h=null,d=null}}a.useImperativeHandle(n,()=>({open(){R()},close(){o()},isOpen(){return g}}));const R=t=>{w(!0),k(t)},o=t=>{w(!1),C(t)};return a.useEffect(()=>{const t=l=>{i!=null&&i.current&&!(i!=null&&i.current.contains(l.target))&&O==!0&&o()};return document.addEventListener("click",t,!0),()=>{document.removeEventListener("click",t,!0)}},[]),f.jsx(f.Fragment,{children:f.jsx(N,{enableOverlay:u,overlayColor:F,isOpen:g,zIndex:$,position:y,children:f.jsx(Y,{ref:i,zIndex:$,isOpen:g,direction:r,isFullPage:z,unsetHeight:D,unsetWidth:S,duration:s,color:E,theme:W,className:T,style:q,size:H,drawerSize:I,onTouchStart:p,onTouchMove:P,...M,children:j})})})});module.exports=A;