@lanaco/lnc-react-ui
Version:
React component library
9 lines (8 loc) • 1.95 kB
JavaScript
;const s=require("react/jsx-runtime"),i=require("react"),t=require("./index-BPVoEhTF.cjs"),u=require("./emotion-styled.browser.esm-Cle7tAM9.cjs"),g=require("./utils-NZLCh-J5.cjs"),R=require("./Icon.cjs"),_=require("./emotion-element-f0de968e.browser.esm-B7k6i6lC.cjs"),z=u.newStyled.div`
display: inline-flex;
flex-wrap: wrap;
${o=>g.getComponentTypographyCss(o.theme,"Breadcrumbs",o.size,"enabled")};
color: ${o=>g.getColorRgbaValue(o.theme,"Breadcrumbs",o.color,"enabled","text")};
`,A=u.newStyled.div`
cursor: pointer;
`,N=u.newStyled.span``,b=i.forwardRef((o,f)=>{const{separator:a="/",maxItems:T=8,itemsAfterCollapse:x=1,itemsBeforeCollapse:j=1,className:C="",style:P={},color:w="neutral",size:d="small",children:q,...B}=o,I={theme:_.useTheme(),size:d,color:w,className:"lnc-ui-breadcrumbs "+C,style:P},[c,S]=i.useState(!0),h=({maxItems:m,itemsAfterCollapse:p,itemsBeforeCollapse:n,children:e})=>typeof(e==null?void 0:e.map)!="function"?s.jsx(l,{index:0,length:e.length,separator:a,child:e}):e==null?void 0:e.map((y,r)=>m<=e.length&&c==!0?n-1>=r||e.length-p<=r?s.jsx(l,{index:r,length:e.length,separator:a,child:y},r):n==r&&s.jsxs(A,{onClick:v=>S(!c),children:[s.jsx(R,{icon:"ellipsis"}),a," "]},r):s.jsx(l,{index:r,length:e.length,separator:a,child:y},r)),l=({index:m,length:p,separator:n,child:e})=>s.jsxs(N,{children:[e,m+1!==p&&s.jsxs(s.Fragment,{children:[" ",n," "]})]});return s.jsx(z,{ref:f,...I,...B,children:s.jsx(h,{maxItems:T,itemsAfterCollapse:x,itemsBeforeCollapse:j,children:q})})});b.propTypes={separator:t.PropTypes.oneOfType([t.PropTypes.string,t.PropTypes.element]),maxItems:t.PropTypes.number,itemsAfterCollapse:t.PropTypes.number,itemsBeforeCollapse:t.PropTypes.number,className:t.PropTypes.string,style:t.PropTypes.object,color:t.PropTypes.oneOf(["primary","secondary","success","warning","danger","information","neutral","gray"]),size:t.PropTypes.oneOf(["small","medium","large"])};module.exports=b;