@lanaco/lnc-react-ui
Version:
React component library
7 lines (6 loc) • 2.98 kB
JavaScript
;const $=require("react/jsx-runtime"),o=require("react"),q=require("./emotion-react.browser.esm-Cvnp-zmB.cjs"),k=require("./utils-BK6B_Y9X.cjs"),j=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs");function N(){return N=Object.assign||function(n){for(var e=1;e<arguments.length;e++){var r=arguments[e];for(var t in r)Object.prototype.hasOwnProperty.call(r,t)&&(n[t]=r[t])}return n},N.apply(this,arguments)}var B=function(e,r){var t={left:{top:0,left:0,transform:"translate3d(-100%, 0, 0)",width:r,height:"100vh"},right:{top:0,right:0,transform:"translate3d(100%, 0, 0)",width:r,height:"100vh"},bottom:{left:0,right:0,bottom:0,transform:"translate3d(0, 100%, 0)",width:"100%",height:r},top:{left:0,right:0,top:0,transform:"translate3d(0, -100%, 0)",width:"100%",height:r}};return t[e]},P=function(e){var r=e.open,t=e.onClose,_=t===void 0?function(){}:t,b=e.children,p=e.style,l=e.enableOverlay,x=l===void 0?!0:l,u=e.overlayColor,C=u===void 0?"#000":u,s=e.overlayOpacity,D=s===void 0?.4:s,v=e.zIndex,m=v===void 0?100:v,y=e.duration,E=y===void 0?500:y,i=e.direction,h=e.size,c=h===void 0?250:h,S=e.className,f=e.customIdSuffix,g=e.lockBackgroundScroll,a=g===void 0?!1:g,w=e.overlayClassName,Z=w===void 0?"":w,O=o.useRef(null);o.useEffect(function(){var R=function(){O.current=window.document.querySelector("body"),O.current&&a&&(O.current.style.overflow=r?"hidden":"")};R()},[r]);var d=o.useMemo(function(){return f||(Math.random()+1).toString(36).substring(7)},[f]),I={backgroundColor:C.toString(),opacity:D,zIndex:m},z=N({zIndex:m+1,transitionDuration:E+"ms"},B(i,c),p);return o.createElement("div",{id:"EZDrawer"+d,className:"EZDrawer"},o.createElement("input",{type:"checkbox",id:"EZDrawer__checkbox"+d,className:"EZDrawer__checkbox",onChange:_,checked:r}),o.createElement("nav",{role:"navigation",id:"EZDrawer__container"+d,style:z,className:"EZDrawer__container "+S},b),x&&o.createElement("label",{htmlFor:"EZDrawer__checkbox"+d,id:"EZDrawer__overlay"+d,className:"EZDrawer__overlay "+Z,style:I}))};const F=o.forwardRef((n,e)=>{const{direction:r="right",duration:t=300,overlayOpacity:_=.4,enableOverlay:b=!0,zIndex:p=100,onClose:l=()=>{},onOpen:x=()=>{},className:u="",style:C={},color:s="neutral",size:D="small",overlayColor:v,width:m="unset",children:y,...E}=n,i=j.useTheme(),[h,c]=o.useState(!1);o.useImperativeHandle(e,()=>({open(){S()},close(){f()}}));const S=a=>{c(!0),x(a)},f=a=>{c(!1),l(a)},g=()=>{c(!1),l()};return $.jsx(q.ClassNames,{children:({css:a,cx:w})=>$.jsx(P,{open:h,onClose:g,direction:r,zIndex:p,duration:t,overlayOpacity:_,enableOverlay:b,size:m,className:w("drawer-lnc "+u,a`
padding: 20px;
background-color: ${k.getColorRgbaValue(i,"Drawer",s,"enabled","background")} !important;
color: ${k.getColorRgbaValue(i,"Drawer",s,"enabled","text")};
${k.getComponentTypographyCss(i,"Drawer",D,"enabled")};
`),style:C,overlayColor:v,...E,children:y})})});module.exports=F;