azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4.23 kB
JavaScript
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";let breadcrumbCount=0;class Breadcrumb extends React.Component{constructor(e){super(e),this.renderBreadcrumbItems=()=>{const{excludeFocusZone:e,excludeTabStop:t,extraContent:r,role:a}=this.props;var{displayedItems:s,hiddenItemCount:o}=this.state,i=this.props.ariaLabel||Resources.BreadcrumbItemAriaLabel;const c=s.length-1;var n=s.map((e,t)=>React.createElement("div",{className:"bolt-breadcrumb-list-item",key:e.key||String(t)},this.renderItem(e),(t!==c||r)&&this.renderDivider(e.key)));return n.splice(0,0,React.createElement("div",{className:css("bolt-breadcrumb-overflow",0<o&&"bolt-breadcrumb-overflow-visible"),key:"overflowItem"},React.createElement(OverflowButton,{excludeTabStop:t,excludeFocusZone:e}),0<o&&o<s.length&&this.renderDivider("overflow"))),r&&n.push(React.createElement("div",{className:"bolt-breadcrumb-list-item",id:getSafeId("breadcrumb-extra-content"),key:"breadcrumb-extra-content"},r)),React.createElement("div",{className:css("bolt-breadcrumb flex-row flex-grow",0<n.length&&"bolt-breadcrumb-with-items"),role:a,"aria-label":i},...n)},this.renderDivider=e=>React.createElement("div",{key:"BID$"+e,className:"bolt-breadcrumb-divider secondary-text cursor-default flex-noshrink"},"/"),this.renderItem=e=>{var t=React.createElement(React.Fragment,null,e.iconProps&&React.createElement(Icon,Object.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"+this.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:this.props.excludeFocusZone,excludeTabStop:this.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)},this.onLayoutChanged=e=>{this.setState({hiddenItemCount:e})},this.onMenuItemActivate=(e,t)=>{e=e.data;e.onClick&&e.onClick(t,e)},this.breadcrumbId=breadcrumbCount++,this.state=Breadcrumb.getDerivedStateFromProps(e,this.state)}static getDerivedStateFromProps(e,t){e=arrangeItems(e.items);return Object.assign(Object.assign({},t),{displayedItems:e,linkItems:getLinkItems(e)})}render(){var e=this.state.displayedItems,t=e.map((e,t)=>Object.assign(Object.assign({data:e,iconProps:e.iconProps,text:e.text,id:e.key,href:e.href},e.menuItemProps),{onActivate:this.onMenuItemActivate})),r=(this.props.extraContent&&t.push({id:"overflow-item",className:css(this.props.extraContentClassName||""),onActivate:()=>!0,renderMenuCell:(e,t,r)=>{if(e===MenuCell.PrimaryText)return this.props.extraContent}}),t.map((e,t)=>t+1)),r={responsiveChildren:r,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()))}}function getLinkItems(e){return e.filter(e=>e.href||e.onClick)}function arrangeItems(e){if(void 0===e)return[];const t={},r=(e.forEach(e=>{(!t[e.key]||(t[e.key].priority||0)<=(e.priority||0))&&(t[e.key]=e)}),[]);return Object.keys(t).forEach(e=>{t[e].hidden||r.push(t[e])}),r.some(e=>0<=e.rank)&&r.sort((e,t)=>{return(e.rank||Number.MAX_VALUE)-(t.rank||Number.MAX_VALUE)}),r}Breadcrumb.defaultProps={items:[]};export{Breadcrumb};