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

React component library

"use strict";const g=require("react/jsx-runtime"),u=require("react"),t=require("./index-BPVoEhTF.cjs"),v=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),y=require("./utils-NZLCh-J5.cjs"),V=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),X=(e,o,n,c,a)=>{if(e==="right"||e==="left"||o&&n)return"height: 100%;";if(!(o&&a===!0))return o?"height: "+c+";":"height: 0;"},Y=(e,o,n,c,a)=>{if(e==="top"||e==="bottom"||o&&n)return"width: 100%;";if(!(o&&a===!0))return o?"width: "+c+";":"width: 0;"},A=v.newStyled.div`
  touch-action: none;
  overflow: auto;
  max-height: ${e=>e.isOpen||e.unsetHeight===!1?"100dvh":0};
  ${e=>X(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetHeight)}
  max-width: ${e=>e.isOpen||e.unsetWidth===!1?"100vw":0};
  ${e=>Y(e.direction,e.isOpen,e.isFullPage,e.drawerSize,e.unsetWidth)}
  position: fixed;
  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=>y.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","background")};
  color: ${e=>y.getColorRgbaValue(e.theme,"Drawer",e.color,"enabled","text")};
  ${e=>y.getComponentTypographyCss(e.theme,"Drawer",e.size,"enabled")};
`,B=v.newStyled.div`
  z-index: ${e=>e.zIndex};
  position: fixed;
  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};
`,$=u.forwardRef((e,o)=>{const{direction:n="right",open:c=!1,duration:a=.8,enableOverlay:x=!0,zIndex:m=100,closeOnClickOutside:O=!0,closeOnSwipe:d=!0,isFullPage:P=!1,unsetHeight:S=!1,unsetWidth:z=!1,onClose:C=()=>{},onOpen:D=()=>{},className:k="",style:q={},color:F="neutral",overlayColor:H="rgba(123, 123, 123, 0.5)",size:I="small",drawerSize:j="12.5rem",children:E,...W}=e,M=V.useTheme(),i=u.useRef(),[p,b]=u.useState(!1);var h=null,f=null;function _(r){return r.touches||r.originalEvent.touches}function R(r){const l=_(r)[0];h=l.clientX,f=l.clientY}function L(r){if(!(!h||!f)){var l=r.touches[0].clientX,U=r.touches[0].clientY,w=h-l,T=f-U;Math.abs(w)>Math.abs(T)?w>0?d==!0&&n=="left"&&s():d==!0&&n=="right"&&s():T>0?d==!0&&n=="top"&&s():d==!0&&n=="bottom"&&s(),h=null,f=null}}u.useImperativeHandle(o,()=>({open(){N()},close(){s()},isOpen(){return p}}));const N=r=>{b(!0),D(r)},s=r=>{b(!1),C(r)};return u.useEffect(()=>{const r=l=>{i!=null&&i.current&&!(i!=null&&i.current.contains(l.target))&&O==!0&&s()};return document.addEventListener("click",r,!0),()=>{document.removeEventListener("click",r,!0)}},[]),g.jsx(g.Fragment,{children:g.jsx(B,{enableOverlay:x,overlayColor:H,isOpen:p,zIndex:m,children:g.jsx(A,{ref:i,zIndex:m,isOpen:p,direction:n,isFullPage:P,unsetHeight:S,unsetWidth:z,duration:a,color:F,theme:M,className:k,style:q,size:I,drawerSize:j,onTouchStart:R,onTouchMove:L,...W,children:E})})})});$.propTypes={direction:t.PropTypes.oneOf(["top","right","left","bottom"]),open:t.PropTypes.bool,duration:t.PropTypes.number,enableOverlay:t.PropTypes.bool,zIndex:t.PropTypes.number,closeOnClickOutside:t.PropTypes.bool,closeOnSwipe:t.PropTypes.bool,isFullPage:t.PropTypes.bool,unsetHeight:t.PropTypes.bool,unsetWidth:t.PropTypes.bool,onClose:t.PropTypes.func,onOpen:t.PropTypes.func,className:t.PropTypes.string,style:t.PropTypes.object,overlayColor:t.PropTypes.string,drawerSize:t.PropTypes.string,size:t.PropTypes.oneOf(["small","medium","large"]),color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"])};module.exports=$;