azure-devops-ui/Components/Autocomplete/Suggestions.min.js

React components for building web UI in Azure DevOps

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";class Suggestions extends React.Component{constructor(e){super(e),this.currentSelectedElementRef=React.createRef(),this.onHoverNewRowEnd=()=>{this.setState({isNewRowHovered:!1})},this.onHoverNewRowStart=()=>{this.setState({isNewRowHovered:!0})},this.onRenderAlreadyIncludedRow=()=>{var{inputAlreadyInGroupText:e=Resources.LabelInGroup}=this.props;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))},this.onRenderLoadingRow=()=>React.createElement("div",{className:"bolt-label-suggestions-loading-row",key:"loading"},React.createElement(Spinner,{size:SpinnerSize.small,label:Resources.LoadingSuggestions})),this.onRenderNewLabelRow=e=>{let t;return t=this.shouldDisplayColorPicker()?React.createElement(ColorSwatchPicker,{className:css(this.isNewRowSelected()&&"selected"),colors:e,onPipClick:this.props.onColorPipClick,selectedIndex:this.props.currentSelectedColorIndex}):React.createElement("div",{className:css("bolt-label-suggestions-row clickable flex-row",this.isNewRowSelected()&&"selected"),onClick:this.props.onNewLabelClick,role:"option",tabIndex:-1},React.createElement(ColorPip,{color:this.props.disableColorPicker&&Label.DEFAULT_COLOR}),React.createElement("div",{className:"bolt-label-suggestions-row--content"},Resources.NewLabelSuggestionText)),React.createElement("div",{className:"bolt-label-suggestions-newRow-wrapper",key:"newRow",onMouseEnter:this.onHoverNewRowStart,onMouseLeave:this.onHoverNewRowEnd},t)},this.onRenderSuggestionRow=(t,e)=>{e=this.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:e=>this.props.onSuggestionClick(e,t),ref:e&&this.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)))},this.state={isNewRowHovered:!1}}render(){var{isCurrentInputAlreadyInGroup:e,isLoading:t,onCheckForExactMatch:o,suggestedItems:s,swatchPickerColors:r}=this.props,l=32*r.length,n=[],o=!(e||void 0!==o&&o(s));t&&n.push(this.onRenderLoadingRow()),0<s.length&&n.push(React.createElement("div",{className:"bolt-label-suggestions-list",key:"suggestions"},s.map(this.onRenderSuggestionRow))),e&&n.push(this.onRenderAlreadyIncludedRow()),o&&n.push(this.onRenderNewLabelRow(r));const c=[];return n.forEach((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:l}},c)}componentDidUpdate(){this.currentSelectedElementRef.current&&this.currentSelectedElementRef.current!==this.previousSelectedElement&&(this.currentSelectedElementRef.current.scrollIntoView(!1),this.previousSelectedElement=this.currentSelectedElementRef.current)}isNewRowSelected(){return this.props.currentSelectedIndex===this.props.suggestedItems.length}shouldDisplayColorPicker(){var{disableColorPicker:e=!1}=this.props;return!e&&(this.isNewRowSelected()||this.state.isNewRowHovered)}}export{Suggestions};