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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var LabelGroup=function(t){function e(e){var r=t.call(this,e)||this;return r.contentSelectionMap={},r.labelReferences=[],r.onLabelMouseDown=function(e,t,n){var o=r.props,a=o.disableMouseFocusOnLabels,a=void 0===a||a,o=o.onLabelMouseDown;o&&o(e,t,n),a&&e.preventDefault()},r.onLabelsChanged=function(e){var t=new Set(ObservableLike.getValue(r.props.selectedLabelContents));return e.removedItems&&e.removedItems.forEach(function(e){r.contentSelectionMap[e.content]=void 0}),e.addedItems&&e.addedItems.forEach(function(e){r.contentSelectionMap[e.content]=new ObservableValue(t.has(e.content))}),!0},r.onSelectedKeysChanged=function(e){return r.updateKeySelectionMap(e.addedItems,e.removedItems),!1},r.buildContentSelectionMap(ObservableLike.getValue(e.labelProps),e.selectedLabelContents?ObservableLike.getValue(e.selectedLabelContents):[]),r}return __extends(e,t),e.prototype.focusLabel=function(e){this.labelReferences[e]&&this.labelReferences[e].focus()},e.prototype.render=function(){var a=this,e=this.props,t=e.className,n=e.defaultFocusElementId,n=void 0===n?"label-0":n,o=e.enableHoverStyles,r=void 0!==o&&o,o=e.fadeOutOverflow,o=void 0!==o&&o,l=e.id,c=e.labelProps,i=e.onLabelClick,s=e.onLabelKeyDown,u=e.selectedLabelContents,p=e.title,e=e.wrappingBehavior,e=(void 0===e?WrappingBehavior.oneLine:e)==WrappingBehavior.oneLine?"one-line":"free-flow";return React.createElement("div",{className:css(t,"flex-column")},p&&React.createElement("div",{className:"bolt-labelgroup-title-wrapper body-m"},p),React.createElement(FocusZone,{allowArrowOutOfInputs:!0,direction:FocusZoneDirection.Horizontal,focusGroupProps:{defaultElementId:n}},React.createElement("div",{className:css("bolt-labelgroup flex-row",e,o&&"fade-out"),id:getSafeId(l)},React.createElement(FocusWithin,null,function(o){return React.createElement(React.Fragment,null,React.createElement(Observer,{labelProps:{observableValue:c,filter:a.onLabelsChanged},selectedLabelContents:{observableValue:u,filter:a.onSelectedKeysChanged}},function(e){return e.labelProps&&e.labelProps.map(function(t,n){return React.createElement(Label,__assign({},t,{enableHover:r,id:"label-".concat(n),key:t.content,onBlur:o.onBlur,onClick:function(e){return i&&i(e,t,n)},onFocus:o.onFocus,onKeyDown:function(e){return s&&s(e,t,n)},onMouseDown:function(e){return a.onLabelMouseDown(e,t,n)},ref:function(e){return a.labelReferences[n]=e},selected:a.contentSelectionMap[t.content]}))})}),a.props.children)}))))},e.prototype.buildContentSelectionMap=function(e,t){var n=this,o=(this.contentSelectionMap={},new Set(t));e.forEach(function(e){n.contentSelectionMap[e.content]=new ObservableValue(o.has(e.content))})},e.prototype.updateKeySelectionMap=function(e,t){var n=this;e&&e.forEach(function(e){n.contentSelectionMap[e]&&(n.contentSelectionMap[e].value=!0)}),t&&t.forEach(function(e){n.contentSelectionMap[e]&&(n.contentSelectionMap[e].value=!1)})},e}(React.Component);export{LabelGroup};