azure-devops-ui/Components/LabelGroup/LabelGroup.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{WrappingBehavior}from"./LabelGroup.Props";import{Label}from"../Label/Label";import{css,getSafeId}from"../../Util";import{FocusZone,FocusZoneDirection}from"../../FocusZone";import{ObservableValue,ObservableLike}from"../../Core/Observable";import{FocusWithin}from"../../FocusWithin";import{Observer}from"../../Observer";class LabelGroup extends React.Component{constructor(e){super(e),this.contentSelectionMap={},this.labelReferences=[],this.onLabelMouseDown=(e,t,o)=>{var{disableMouseFocusOnLabels:n=!0,onLabelMouseDown:a}=this.props;a&&a(e,t,o),n&&e.preventDefault()},this.onLabelsChanged=e=>{const t=new Set(ObservableLike.getValue(this.props.selectedLabelContents));return e.removedItems&&e.removedItems.forEach(e=>{this.contentSelectionMap[e.content]=void 0}),e.addedItems&&e.addedItems.forEach(e=>{this.contentSelectionMap[e.content]=new ObservableValue(t.has(e.content))}),!0},this.onSelectedKeysChanged=e=>(this.updateKeySelectionMap(e.addedItems,e.removedItems),!1),this.buildContentSelectionMap(ObservableLike.getValue(e.labelProps),e.selectedLabelContents?ObservableLike.getValue(e.selectedLabelContents):[])}focusLabel(e){this.labelReferences[e]&&this.labelReferences[e].focus()}render(){const{className:e,defaultFocusElementId:t="label-0",enableHoverStyles:a=!1,fadeOutOverflow:o=!1,id:n,labelProps:l,onLabelClick:s,onLabelKeyDown:r,selectedLabelContents:c,title:i,wrappingBehavior:b=WrappingBehavior.oneLine}=this.props;var p=b==WrappingBehavior.oneLine?"one-line":"free-flow";return React.createElement("div",{className:css(e,"flex-column")},i&&React.createElement("div",{className:"bolt-labelgroup-title-wrapper body-m"},i),React.createElement(FocusZone,{allowArrowOutOfInputs:!0,direction:FocusZoneDirection.Horizontal,focusGroupProps:{defaultElementId:t}},React.createElement("div",{className:css("bolt-labelgroup flex-row",p,o&&"fade-out"),id:getSafeId(n)},React.createElement(FocusWithin,null,n=>React.createElement(React.Fragment,null,React.createElement(Observer,{labelProps:{observableValue:l,filter:this.onLabelsChanged},selectedLabelContents:{observableValue:c,filter:this.onSelectedKeysChanged}},e=>e.labelProps&&e.labelProps.map((t,o)=>React.createElement(Label,Object.assign({},t,{enableHover:a,id:"label-"+o,key:t.content,onBlur:n.onBlur,onClick:e=>s&&s(e,t,o),onFocus:n.onFocus,onKeyDown:e=>r&&r(e,t,o),onMouseDown:e=>this.onLabelMouseDown(e,t,o),ref:e=>this.labelReferences[o]=e,selected:this.contentSelectionMap[t.content]})))),this.props.children)))))}buildContentSelectionMap(e,t){this.contentSelectionMap={};const o=new Set(t);e.forEach(e=>{this.contentSelectionMap[e.content]=new ObservableValue(o.has(e.content))})}updateKeySelectionMap(e,t){e&&e.forEach(e=>{this.contentSelectionMap[e]&&(this.contentSelectionMap[e].value=!0)}),t&&t.forEach(e=>{this.contentSelectionMap[e]&&(this.contentSelectionMap[e].value=!1)})}}export{LabelGroup};