azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 4 kB
JavaScript
import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Autocomplete.css";import*as React from"react";import*as Resources from"../../Resources.Label";import{css,getSafeId}from"../../Util";import{Spinner,SpinnerSize}from"../../Spinner";import{Label}from"../Label/Label";import{ColorPip,ColorSwatchPicker}from"../../Color";import{Icon}from"../../Icon";var Suggestions=function(t){function e(e){var o=t.call(this,e)||this;return o.currentSelectedElementRef=React.createRef(),o.onHoverNewRowEnd=function(){o.setState({isNewRowHovered:!1})},o.onHoverNewRowStart=function(){o.setState({isNewRowHovered:!0})},o.onRenderAlreadyIncludedRow=function(){var e=o.props.inputAlreadyInGroupText,e=void 0===e?Resources.LabelInGroup:e;return React.createElement("div",{className:"bolt-label-suggestions-row flex-row",key:"included"},React.createElement(Icon,{className:"bolt-label-suggestions-icon",iconName:"CheckMark"}),React.createElement("div",{className:"bolt-label-suggestions-row--content"},e))},o.onRenderLoadingRow=function(){return React.createElement("div",{className:"bolt-label-suggestions-loading-row",key:"loading"},React.createElement(Spinner,{size:SpinnerSize.small,label:Resources.LoadingSuggestions}))},o.onRenderNewLabelRow=function(e){e=o.shouldDisplayColorPicker()?React.createElement(ColorSwatchPicker,{className:css(o.isNewRowSelected()&&"selected"),colors:e,onPipClick:o.props.onColorPipClick,selectedIndex:o.props.currentSelectedColorIndex}):React.createElement("div",{className:css("bolt-label-suggestions-row clickable flex-row",o.isNewRowSelected()&&"selected"),onClick:o.props.onNewLabelClick,role:"option",tabIndex:-1},React.createElement(ColorPip,{color:o.props.disableColorPicker&&Label.DEFAULT_COLOR}),React.createElement("div",{className:"bolt-label-suggestions-row--content"},Resources.NewLabelSuggestionText));return React.createElement("div",{className:"bolt-label-suggestions-newRow-wrapper",key:"newRow",onMouseEnter:o.onHoverNewRowStart,onMouseLeave:o.onHoverNewRowEnd},e)},o.onRenderSuggestionRow=function(t,e){e=o.props.currentSelectedIndex===e;return React.createElement("div",{"aria-selected":e,className:css("bolt-label-suggestions-row clickable flex-row",e&&"selected"),id:getSafeId(t.content),key:t.content,onClick:function(e){return o.props.onSuggestionClick(e,t)},ref:e&&o.currentSelectedElementRef,role:"option",tabIndex:-1},React.createElement(ColorPip,{color:t.color}),React.createElement("div",{className:"bolt-label-suggestions-row--content"},React.createElement("span",null,t.content)))},o.state={isNewRowHovered:!1},o}return __extends(e,t),e.prototype.render=function(){var e=this.props,t=e.isCurrentInputAlreadyInGroup,o=e.isLoading,r=e.onCheckForExactMatch,n=e.suggestedItems,e=e.swatchPickerColors,s=32*e.length,l=[],r=!(t||void 0!==r&&r(n)),c=(o&&l.push(this.onRenderLoadingRow()),0<n.length&&l.push(React.createElement("div",{className:"bolt-label-suggestions-list",key:"suggestions"},n.map(this.onRenderSuggestionRow))),t&&l.push(this.onRenderAlreadyIncludedRow()),r&&l.push(this.onRenderNewLabelRow(e)),[]);return l.forEach(function(e,t){0!==t&&c.push(React.createElement("div",{className:"bolt-suggestions-separator",key:"separator"+t})),c.push(e)}),React.createElement("div",{className:"bolt-label-suggestions-container flex-column",id:getSafeId("autocomplete-listbox"),role:"listbox",style:{minWidth:s}},c)},e.prototype.componentDidUpdate=function(){this.currentSelectedElementRef.current&&this.currentSelectedElementRef.current!==this.previousSelectedElement&&(this.currentSelectedElementRef.current.scrollIntoView(!1),this.previousSelectedElement=this.currentSelectedElementRef.current)},e.prototype.isNewRowSelected=function(){return this.props.currentSelectedIndex===this.props.suggestedItems.length},e.prototype.shouldDisplayColorPicker=function(){var e=this.props.disableColorPicker;return!(void 0!==e&&e)&&(this.isNewRowSelected()||this.state.isNewRowHovered)},e}(React.Component);export{Suggestions};