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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./SuggestionsList.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{FocusWithin}from"../../FocusWithin";import{Observer}from"../../Observer";import{Spinner}from"../../Spinner";import{css,getSafeId,preventDefault}from"../../Util";class SuggestionsItem extends React.Component{constructor(){super(...arguments),this.onSuggestionClicked=e=>{e.isDefaultPrevented()||(this.props.onClick(this.props),e.preventDefault())}}render(){var{renderSuggestion:e,className:t,isSelected:s}=this.props;return React.createElement("div",{className:css(t,"bolt-suggestions-item flex-row flex-grow cursor-pointer scroll-hidden",s&&"bolt-suggestions-isSuggested"),onPointerDown:preventDefault},React.createElement("div",{onMouseDown:preventDefault,onClick:this.onSuggestionClicked,className:"bolt-suggestions-item-button flex-row flex-grow scroll-hidden"},e(this.props)))}}class SuggestionsList extends React.Component{constructor(){super(...arguments),this.scrollableRegion=React.createRef(),this.selectedElement=React.createRef(),this.onBlur=()=>{this.props.onBlur&&this.props.onBlur()},this.onFocus=e=>{this.props.onFocus&&this.props.onFocus(e)}}render(){var{className:e,loadingText:t,renderNoResultFound:s}=this.props,o=ObservableLike.getValue(this.props.suggestions),n=ObservableLike.getValue(this.props.isLoading),o=!(o&&o.length||n);return React.createElement("div",{className:css(e,"bolt-suggestions flex-row flex-grow"),id:getSafeId("suggestions-list"),style:this.props.width?{width:this.props.width}:void 0,onMouseDown:preventDefault},n?React.createElement(Spinner,{className:"bolt-suggestions-spinner flex-grow flex-center justify-center",id:"suggestions-spinner",label:t}):!o&&this.renderSuggestions(),React.createElement("div",{className:css("bolt-suggestions-none-region",o?"flex-row flex-grow":"has-suggestions"),id:getSafeId("sug-list-no-results"),role:"alert"},o&&(s?s():this.noResults())),React.createElement("div",{"aria-label":t||"Loading",id:getSafeId("sug-list-transition"),role:"text"}))}componentDidMount(){this.scrollSelected()}componentDidUpdate(){this.selectedElement.current&&this.currentSelectedElement!==this.selectedElement.current&&this.scrollSelected()}noResults(){var e=this.props["noResultsFoundText"];return e?React.createElement("div",{className:"bolt-suggestions-none flex-row flex-grow flex-center"},e):null}renderSuggestions(){const{createDefaultItem:t,renderSuggestion:r,onSuggestionClicked:i,suggestionsItemClassName:l,resultsMaximumNumber:s,selectedIndex:e,suggestions:o,suggestionsContainerAriaLabel:c,width:a}=this.props;return React.createElement(FocusWithin,{onBlur:this.onBlur,onFocus:this.onFocus},n=>React.createElement(Observer,{suggestions:o,selectedIndex:e},o=>{s&&(o.suggestions=o.suggestions.slice(0,s));var e=o.suggestions;return t&&e.unshift(t(e)),React.createElement("div",{"aria-label":c,className:"bolt-suggestions-container flex-column flex-grow v-scroll-auto h-scroll-hidden",id:getSafeId("suggestion-list"),ref:this.scrollableRegion,role:"listbox",style:a?{width:a}:void 0},React.createElement("div",{className:"bolt-suggestion-spacer",onMouseDown:preventDefault}),o.suggestions.map((e,t)=>{var s=t===o.selectedIndex;return React.createElement("div",{className:"flex-noshrink",key:getSafeId("sug-"+t),id:getSafeId("sug-row-"+t),ref:s?this.selectedElement:"",role:"option"},React.createElement(SuggestionsItem,{className:l,id:getSafeId("sug-item"+t),index:t,isSelected:s,item:e,onBlur:n.onBlur,onFocus:n.onFocus,onClick:i,renderSuggestion:r}))}),React.createElement("div",{className:"bolt-suggestion-spacer",onMouseDown:preventDefault}))}))}scrollSelected(){var e;this.currentSelectedElement=null==(e=this.selectedElement)?void 0:e.current,this.scrollableRegion.current&&null!=(e=this.selectedElement)&&e.current&&(this.scrollableRegion.current.scrollTop=this.selectedElement.current.offsetTop)}}export{SuggestionsItem,SuggestionsList};