@lanaco/lnc-react-ui
Version:
React component library
41 lines (39 loc) • 2.78 kB
JavaScript
;const o=require("react/jsx-runtime"),c=require("react"),r=require("./index-BPVoEhTF.cjs"),x=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),T=require("./ThemeProvider.cjs"),t=require("./utils-NZLCh-J5.cjs"),s=require("./Icon.cjs"),P=x.newStyled.div`
min-height: 3rem;
${e=>t.getComponentTypographyCss(e.theme,"Alert",e.size,"enabled")};
line-height: 1.25rem;
border-radius: ${e=>t.getBorderRadiusValueWithUnits(e.theme,"regular")};
background-color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","background","backgroundOpacity")};
color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","text")};
word-wrap: break-word;
box-sizing: border-box;
padding: 0.875rem 1rem;
display: flex;
gap: 1rem;
& .alert-content {
display: flex;
flex-direction: column;
gap: 0.25rem;
}
& .alert-icon {
align-items: flex-start;
& i {
font-size: 1.25rem;
}
}
& .alert-title {
font-weight: ${e=>t.getComponentPropValue(e.theme,"Alert",e.color,"enabled","fontWeightTitle")};
color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","title")};
}
& .alert-actions {
display: ${e=>e.actions?"flex":"none"};
flex-wrap: wrap;
gap: 1rem;
padding-top: 0.5rem;
}
& .alert-actions > * {
font-weight: ${e=>t.getComponentPropValue(e.theme,"Alert",e.color,"enabled","fontWeightAction")};
color: ${e=>t.getColorRgbaValue(e.theme,"Alert",e.color,"enabled","action")};
cursor: pointer;
}
`,w=e=>e=="danger"?"times-circle":e=="warning"?"exclamation-triangle":e=="success"?"check-circle":"exclamation-circle",C=({statusIcon:e,color:n})=>typeof e=="boolean"&&e==!0?o.jsx(s,{className:"alert-icon",icon:w(n)}):typeof e=="string"&&e!==""?o.jsx(s,{className:"alert-icon",icon:e}):c.cloneElement(e,{className:"alert-icon "+(e==null?void 0:e.className)}),m=c.forwardRef((e,n)=>{const{className:d="",size:p="small",color:l="primary",title:g,actions:i,noIcon:u=!1,statusIcon:a=!0,children:y,...h}=e,{theme:f}=T.useTheme(),b={theme:f,size:p,color:l};return o.jsxs(P,{ref:n,...b,className:"lnc-ui-alert "+d,actions:i,...h,children:[u==!1&&a&&o.jsx(C,{color:l,statusIcon:a}),o.jsxs("div",{className:"alert-content",children:[o.jsx("div",{className:"alert-title",children:g}),y,o.jsx("div",{className:"alert-actions",children:i})]})]})});m.propTypes={title:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element]),actions:r.PropTypes.element,statusIcon:r.PropTypes.oneOfType([r.PropTypes.string,r.PropTypes.element,r.PropTypes.bool]),noIcon:r.PropTypes.bool,className:r.PropTypes.string,size:r.PropTypes.oneOf(["small","medium","large"]),color:r.PropTypes.oneOf(["primary","secondary","success","danger","warning","information","neutral","gray"])};module.exports=m;