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