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

React components for building web UI in Azure DevOps

import{__extends}from"tslib";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";var SuggestionsItem=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.onSuggestionClicked=function(e){e.isDefaultPrevented()||(t.props.onClick(t.props),e.preventDefault())},t}return __extends(t,e),t.prototype.render=function(){var e=this.props,t=e.renderSuggestion,s=e.className,e=e.isSelected;return React.createElement("div",{className:css(s,"bolt-suggestions-item flex-row flex-grow cursor-pointer scroll-hidden",e&&"bolt-suggestions-isSuggested"),onPointerDown:preventDefault},React.createElement("div",{onMouseDown:preventDefault,onClick:this.onSuggestionClicked,className:"bolt-suggestions-item-button flex-row flex-grow scroll-hidden"},t(this.props)))},t}(React.Component),SuggestionsList=function(e){function t(){var t=null!==e&&e.apply(this,arguments)||this;return t.scrollableRegion=React.createRef(),t.selectedElement=React.createRef(),t.onBlur=function(){t.props.onBlur&&t.props.onBlur()},t.onFocus=function(e){t.props.onFocus&&t.props.onFocus(e)},t}return __extends(t,e),t.prototype.render=function(){var e=this.props,t=e.className,s=e.loadingText,e=e.renderNoResultFound,o=ObservableLike.getValue(this.props.suggestions),n=ObservableLike.getValue(this.props.isLoading),o=!(o&&o.length||n);return React.createElement("div",{className:css(t,"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:s}):!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&&(e?e():this.noResults())),React.createElement("div",{"aria-label":s||"Loading",id:getSafeId("sug-list-transition"),role:"text"}))},t.prototype.componentDidMount=function(){this.scrollSelected()},t.prototype.componentDidUpdate=function(){this.selectedElement.current&&this.currentSelectedElement!==this.selectedElement.current&&this.scrollSelected()},t.prototype.noResults=function(){var e=this.props.noResultsFoundText;return e?React.createElement("div",{className:"bolt-suggestions-none flex-row flex-grow flex-center"},e):null},t.prototype.renderSuggestions=function(){var r=this,e=this.props,t=e.createDefaultItem,i=e.renderSuggestion,l=e.onSuggestionClicked,c=e.suggestionsItemClassName,s=e.resultsMaximumNumber,o=e.selectedIndex,u=e.suggestions,a=e.suggestionsContainerAriaLabel,g=e.width;return React.createElement(FocusWithin,{onBlur:this.onBlur,onFocus:this.onFocus},function(n){return React.createElement(Observer,{suggestions:u,selectedIndex:o},function(o){s&&(o.suggestions=o.suggestions.slice(0,s));var e=o.suggestions;return t&&e.unshift(t(e)),React.createElement("div",{"aria-label":a,className:"bolt-suggestions-container flex-column flex-grow v-scroll-auto h-scroll-hidden",id:getSafeId("suggestion-list"),ref:r.scrollableRegion,role:"listbox",style:g?{width:g}:void 0},React.createElement("div",{className:"bolt-suggestion-spacer",onMouseDown:preventDefault}),o.suggestions.map(function(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?r.selectedElement:"",role:"option"},React.createElement(SuggestionsItem,{className:c,id:getSafeId("sug-item"+t),index:t,isSelected:s,item:e,onBlur:n.onBlur,onFocus:n.onFocus,onClick:l,renderSuggestion:i}))}),React.createElement("div",{className:"bolt-suggestion-spacer",onMouseDown:preventDefault}))})})},t.prototype.scrollSelected=function(){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)},t}(React.Component);export{SuggestionsItem,SuggestionsList};