@tidy-ui/breadcrumb
Version:
The Breadcrumb is your trusty guide for tracking website navigation, providing a clear path of your current location. Easily navigate between hierarchies. Collapse lengthy breadcrumbs for a clean view, expand for full journey. Customize separators, set ca
2 lines (1 loc) • 3.84 kB
JavaScript
import n from"react";import{css as e,styled as r,applyStandardOverrideStyles as t,createFontStyle as o}from"@tidy-ui/commons";var a=function(){return a=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},a.apply(this,arguments)};function i(n,e){var r={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0&&(r[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)e.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(r[t[o]]=n[t[o]])}return r}function c(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var l,u,s,p,d,f,m,g,b,v=e(u||(u=c(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme,t=r.font,o=r.palette,a=r.isDark;return e(l||(l=c(["\n font-weight: ",";\n text-decoration: none;\n cursor: auto;\n pointer-events: none;\n opacity: 0.6;\n color: ",";\n "],["\n font-weight: ",";\n text-decoration: none;\n cursor: auto;\n pointer-events: none;\n opacity: 0.6;\n color: ",";\n "])),t.medium,a?o.neutral[400]:o.neutral[800])}),y=e(p||(p=c(["\n cursor: pointer;\n text-decoration: none;\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 0.1em;\n background-position-y: 100%;\n background-position-x: 0%;\n background-repeat: no-repeat;\n transition: background-size 0.2s ease-in-out;\n &:hover,\n &:focus {\n background-size: 100% 0.1em;\n }\n ","\n"],["\n cursor: pointer;\n text-decoration: none;\n background-image: linear-gradient(currentColor, currentColor);\n background-size: 0% 0.1em;\n background-position-y: 100%;\n background-position-x: 0%;\n background-repeat: no-repeat;\n transition: background-size 0.2s ease-in-out;\n &:hover,\n &:focus {\n background-size: 100% 0.1em;\n }\n ","\n"])),function(n){var r=n.theme.font;return e(s||(s=c(["\n font-weight: ",";\n "],["\n font-weight: ",";\n "])),r.regular)}),h=r.ol(d||(d=c(["\n display: flex;\n gap: 0.5rem;\n ","\n"],["\n display: flex;\n gap: 0.5rem;\n ","\n"])),t),k=r.a(m||(m=c(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var r=n.theme,t=r.palette,a=r.isDark,i=n.tone,l=n.isActive;return e(f||(f=c(["\n ","\n ","\n color: ",";\n "],["\n ","\n ","\n color: ",";\n "])),o(),l?v:y,a?t[i][500]:t[i][700])},t),O=r.div(b||(b=c(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme.palette;return e(g||(g=c(["\n ","\n color: ",";\n "],["\n ","\n color: ",";\n "])),o(),r.neutral[500])}),x=n.forwardRef(function(e,r){var t=e.children,o=e.ele,c=i(e,["children","ele"]);return n.createElement(k,a({ref:r,role:"link"},c),o?n.cloneElement(o,{},t):t)});x.defaultProps={isActive:!1,tone:"neutral"},x.displayName="BreadcrumbItem";var w=n.forwardRef(function(e,r){var t=e.children,o=e.limit,c=e.separator,l=e.onExpand,u=e.isLastItemNotActive,s=i(e,["children","limit","separator","onExpand","isLastItemNotActive"]),p=n.Children.toArray(t),d=n.useState(p.length<o),f=d[0],m=d[1],g=n.useCallback(function(){return["string","number"].includes(typeof c)?n.createElement(O,null,c):c},[c]),b=n.useCallback(function(e){return n.Children.map(e,function(r,t){var o,i=r;return[n.cloneElement(i,a(a({},i.props),t==e.length-1?{isActive:!u}:{tone:null!==(o=s.tone)&&void 0!==o?o:i.props.tone})),t<e.length-1?g():null]})},[t,o,c]),v=n.useCallback(function(n){m(!0),null==l||l(n)},[l]);return n.createElement(h,a({ref:r,role:"navigation"},s),b(f?p:[p[0],n.createElement(x,{key:1,onClick:v},"..."),p[p.length-1]]))});w.defaultProps={isLastItemNotActive:!1,limit:Number.MAX_SAFE_INTEGER,separator:"/"},w.displayName="Breadcrumb";export{w as Breadcrumb,x as BreadcrumbItem};