azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.45 kB
JavaScript
import{__assign,__extends,__spreadArray}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Breadcrumb.css";import*as React from"react";import{Icon}from"../../Icon";import{Link}from"../../Link";import{MenuCell}from"../../Menu";import{OverflowButton,ResizeGroup}from"../../ResizeGroup";import*as Resources from"../../Resources.Breadcrumb";import{Tooltip}from"../../TooltipEx";import{css,getSafeId}from"../../Util";var breadcrumbCount=0,Breadcrumb=function(t){function r(e){var m=t.call(this,e)||this;return m.renderBreadcrumbItems=function(){var e=m.props,t=e.excludeFocusZone,r=e.excludeTabStop,a=e.extraContent,e=e.role,n=m.state,o=n.displayedItems,n=n.hiddenItemCount,c=m.props.ariaLabel||Resources.BreadcrumbItemAriaLabel,i=o.length-1,s=o.map(function(e,t){return React.createElement("div",{className:"bolt-breadcrumb-list-item",key:e.key||String(t)},m.renderItem(e),(t!==i||a)&&m.renderDivider(e.key))});return s.splice(0,0,React.createElement("div",{className:css("bolt-breadcrumb-overflow",0<n&&"bolt-breadcrumb-overflow-visible"),key:"overflowItem"},React.createElement(OverflowButton,{excludeTabStop:r,excludeFocusZone:t}),0<n&&n<o.length&&m.renderDivider("overflow"))),a&&s.push(React.createElement("div",{className:"bolt-breadcrumb-list-item",id:getSafeId("breadcrumb-extra-content"),key:"breadcrumb-extra-content"},a)),React.createElement.apply(React,__spreadArray(["div",{className:css("bolt-breadcrumb flex-row flex-grow",0<s.length&&"bolt-breadcrumb-with-items"),role:e,"aria-label":c}],s,!1))},m.renderDivider=function(e){return React.createElement("div",{key:"BID$"+e,className:"bolt-breadcrumb-divider secondary-text cursor-default flex-noshrink"},"/")},m.renderItem=function(e){var t=React.createElement(React.Fragment,null,e.iconProps&&React.createElement(Icon,__assign({},e.iconProps,{className:css("bolt-breadcrumb-item-icon",!e.text&&"icon-only",e.iconProps.className)})),e.text&&React.createElement(Tooltip,{overflowOnly:!0},React.createElement("span",{className:"bolt-breadcrumb-item-text text-ellipsis"},e.text))),r="bolt-breadcrumb"+m.breadcrumbId+"-item-described-by"+e.key;return e.onClick||e.href?React.createElement("div",{className:"bolt-breadcrumb-item"},React.createElement(Link,{ariaLabel:e.ariaLabel,ariaDescribedBy:r,key:"BreadcrumbItem$"+e.key,onClick:e.onClick,href:e.href,excludeFocusZone:m.props.excludeFocusZone,excludeTabStop:m.props.excludeTabStop,removeUnderline:!0},React.createElement("div",{className:"bolt-breadcrumb-item-text-container"},t),React.createElement("div",{className:"bolt-breadcrumb-hidden-element",id:getSafeId(r)},e.ariaDescription))):React.createElement("div",{className:"bolt-breadcrumb-item","aria-label":e.ariaLabel},t)},m.onLayoutChanged=function(e){m.setState({hiddenItemCount:e})},m.onMenuItemActivate=function(e,t){e=e.data;e.onClick&&e.onClick(t,e)},m.breadcrumbId=breadcrumbCount++,m.state=r.getDerivedStateFromProps(e,m.state),m}return __extends(r,t),r.getDerivedStateFromProps=function(e,t){e=arrangeItems(e.items);return __assign(__assign({},t),{displayedItems:e,linkItems:getLinkItems(e)})},r.prototype.render=function(){var a=this,e=this.state.displayedItems,t=e.map(function(e,t){return __assign(__assign({data:e,iconProps:e.iconProps,text:e.text,id:e.key,href:e.href},e.menuItemProps),{onActivate:a.onMenuItemActivate})});this.props.extraContent&&t.push({id:"overflow-item",className:css(this.props.extraContentClassName||""),onActivate:function(){return!0},renderMenuCell:function(e,t,r){if(e===MenuCell.PrimaryText)return a.props.extraContent}});var r={responsiveChildren:t.map(function(e,t){return t+1}),onLayoutChange:this.onLayoutChanged};return React.createElement("div",{className:css("bolt-breadcrumb-container",0<e.length&&"bolt-breadcrumb-with-items",this.props.className),role:"navigation","aria-label":Resources.BreadcrumbAriaLabel},React.createElement(ResizeGroup,{responsiveLayoutProps:r,overflowMenuItems:t},this.renderBreadcrumbItems()))},r.defaultProps={items:[]},r}(React.Component);function getLinkItems(e){return e.filter(function(e){return e.href||e.onClick})}function arrangeItems(e){var t,r;return void 0===e?[]:(t={},e.forEach(function(e){(!t[e.key]||(t[e.key].priority||0)<=(e.priority||0))&&(t[e.key]=e)}),r=[],Object.keys(t).forEach(function(e){t[e].hidden||r.push(t[e])}),r.some(function(e){return 0<=e.rank})&&r.sort(function(e,t){return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),r)}export{Breadcrumb};