@lanaco/lnc-react-ui
Version:
React component library
85 lines (81 loc) • 6.64 kB
JavaScript
"use strict";const t=require("react/jsx-runtime"),y=require("react"),o=require("./index-BPVoEhTF.cjs"),C=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),D=require("./Icon.cjs"),j=require("./utils-NZLCh-J5.cjs"),V=require("./index-EeoArxOx.cjs"),L=require("./motion-B_VPZaJq.cjs"),G=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),I=require("./index-DZoWlChs.cjs"),x="5rem",h="3.8rem",i="1.5rem",W=(e,r,n)=>r&&n?e=="FULL"?`calc(100dvh - ${h} - ${x})`:`calc(100dvh - ${h} - ${x} - ${i})`:r?e=="FULL"?`calc(100dvh - ${h})`:`calc(100dvh - ${h} - ${i})`:n?e=="FULL"?`calc(100dvh - ${x})`:`calc(100dvh - ${x} - ${i})`:e=="FULL"?"100dvh":`calc(100dvh - ${i})`,X=e=>e=="FULL"?"100vw":`calc(100vw - ${i})`,J=(e,r,n)=>e=="FULL"?"0":`${r?"0":"16px"} 0 ${n?"0":"16px"} 0`,K=C.newStyled(L.motion.div)`
position: ${e=>e.scrollOverlay==!0?"absolute":"fixed"};
top: 0;
left: 0;
width: 100%;
height: 100%;
background: ${e=>e.scrollOverlay===!0?"transparent":e.overlayColor};
z-index: ${e=>e.zIndex};
display: flex;
`,Q=C.newStyled(L.motion.div)`
position: relative;
width: 50%;
background-color: white;
${e=>e.scrollOverlay==!1?"position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);":"height: fit-content; margin-right: auto; margin-left: auto;"}
background-color: ${e=>j.getColorRgbaValue(e.theme,"Modal","default","enabled","bg")};
z-index: ${e=>e.zIndex};
width: ${e=>ee[e.size.toUpperCase()]};
max-width: ${e=>X(e.size.toUpperCase())};
box-shadow: 0px 20px 25px -5px rgba(0, 0, 0, 0.1),
0px 10px 10px -5px rgba(0, 0, 0, 0.04);
border-radius: ${e=>e.size.toUpperCase()!="FULL"?"16px":"0"};
display: flex;
flex-direction: column;
gap: 0.5rem;
& .lnc-modal-header {
max-height: ${h};
overflow: hidden;
padding: ${i} ${i} 0 ${i};
}
& .lnc-modal-header > h1,
h2,
h3 {
margin: 0;
}
& .lnc-modal-footer {
max-height: ${x};
overflow: hidden;
padding-top: 1rem;
}
${e=>e.size.toUpperCase()=="FULL"&&"height: 100dvh"};
& .lnc-modal-content {
display: flex;
flex-direction: column;
justify-content: space-between;
scrollbar-width: thin;
${e=>e.scrollOverlay==!1&&`max-height: ${W(e.size.toUpperCase(),e.header,e.footer)};`}
overflow: auto;
margin: ${e=>J(e.size,e.header,e.footer)};
padding: 0 ${i} 0 ${i};
}
`,Y=C.newStyled.div`
position: absolute;
cursor: pointer;
top: 1.375rem;
right: 1.375rem;
color: ${e=>j.getColorRgbaValue(e.theme,"Modal","primary","enabled","cancelButton")};
height: 1.5rem;
width: 1.5rem;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
& i {
font-size: 1.125rem;
}
&:hover {
background-color: ${e=>j.getColorRgbaValue(e.theme,"Modal","primary","hover","cancelBtnBg","cancelBtnBgOpacity")};
}
&:focus {
background-color: ${e=>j.getColorRgbaValue(e.theme,"Modal","primary","focus","cancelBtnBg","cancelBtnBgOpacity")};
}
`,Z=C.newStyled(L.motion.div)`
display: ${e=>e.scrollOverlay===!0?"block":"none"};
position: fixed;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: ${e=>e.overlayColor};
z-index: 3;
`,N=y.forwardRef((e,r)=>{const{portalElement:n=document.body,isOpen:s=!1,header:d,footer:l,scrollOverlay:a=!1,overlay:c=!0,overlayColor:p="rgba(0, 0, 0, 0.3)",showCloseButton:u=!0,onOpen:f=()=>{},onClose:g=()=>{},zIndex:O=1e3,size:$="fluid",clickOutsideToClose:v=!0,className:b="",style:A={},overlayProps:P,overlayAnimation:F={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},modalAnimation:U={animate:{opacity:1},exit:{opacity:0},initial:{opacity:0},transition:{type:"spring",duration:.6}},onFinishOpen:H=()=>{},children:z,rest:M}=e,R=y.useRef(),[T,k]=y.useState(s);let B={theme:G.useTheme(),size:$,zIndex:O,className:b,style:A};const S=m=>{m.target===m.currentTarget&&v&&w(m)};y.useImperativeHandle(r,()=>({open(){_()},close(){w()},isOpen(){return T}}));const _=m=>{k(!0),f(m)},w=m=>{k(!1),g(m)};return y.useEffect(()=>{T===!0&&H()},[T]),t.jsx(t.Fragment,{children:T&&t.jsx(t.Fragment,{children:n?t.jsx(t.Fragment,{children:V.reactDomExports.createPortal(t.jsx(q,{ref:R,overlay:c,scrollOverlay:a,onClickOutsideModal:S,overlayColor:p,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:u,close:w,header:d,footer:l,isOpen:s,...M,children:z}),n)}):t.jsx(q,{ref:R,overlay:c,scrollOverlay:a,onClickOutsideModal:S,overlayColor:p,overlayProps:P,overlayAnimation:F,modalAnimation:U,themeProps:B,showCloseButton:u,close:w,header:d,footer:l,isOpen:s,...M,children:z})})})}),q=y.forwardRef(({overlay:e,scrollOverlay:r,onClickOutsideModal:n,overlayColor:s,overlayProps:d,overlayAnimation:l,modalAnimation:a,themeProps:c,showCloseButton:p,header:u,footer:f,close:g,isOpen:O,children:$,...v},b)=>t.jsx(I.AnimatePresence,{children:e?t.jsxs(t.Fragment,{children:[t.jsx(Z,{scrollOverlay:r,onClick:n,overlayColor:s,...d,...l}),t.jsx(K,{...c,onClick:n,scrollOverlay:r,overlayColor:s,isOpen:O,...d,...l,children:t.jsx(E,{ref:b,themeProps:c,scrollOverlay:r,modalAnimation:a,showCloseButton:p,close:g,header:u,footer:f,...v,children:$})})]}):t.jsx(E,{ref:b,themeProps:c,modalAnimation:a,showCloseButton:p,close:g,header:u,footer:f,...v,children:$})})),E=y.forwardRef(({themeProps:e,scrollOverlay:r,modalAnimation:n,showCloseButton:s,close:d,header:l,footer:a,children:c,...p},u)=>t.jsx(I.AnimatePresence,{children:t.jsxs(Q,{ref:u,...e,...n,header:l,footer:a,scrollOverlay:r,...p,className:`modal-lnc-container ${e==null?void 0:e.className}`,children:[s&&t.jsx(Y,{...e,className:"modal-lnc-times",onClick:d,children:t.jsx(D,{icon:"times"})}),l&&t.jsx("div",{className:"lnc-modal-header",children:l}),t.jsx("div",{className:"lnc-modal-content",children:c}),a&&t.jsx("div",{className:"lnc-modal-footer",children:a})]})}));N.propTypes={portalElement:o.PropTypes.any,isOpen:o.PropTypes.bool,header:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),footer:o.PropTypes.oneOfType([o.PropTypes.string,o.PropTypes.element]),showCloseButton:o.PropTypes.bool,overlay:o.PropTypes.bool,scrollOverlay:o.PropTypes.bool,onOpen:o.PropTypes.func,onClose:o.PropTypes.func,zIndex:o.PropTypes.number,clickOutsideToClose:o.PropTypes.bool,overlayColor:o.PropTypes.string,overlayAnimation:o.PropTypes.object,modalAnimation:o.PropTypes.object,className:o.PropTypes.string,style:o.PropTypes.object,size:o.PropTypes.oneOf(["fluid","xs","s","m","l","xl","full"]),overlayProps:o.PropTypes.any};const ee={FLUID:"max-content",XS:"320px",S:"412px",M:"672px",L:"1112px",XL:"1376px",FULL:"100vw"};module.exports=N;