azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 6.64 kB
JavaScript
import{__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Autocomplete.css";import*as React from"react";import{ObservableValue,ObservableLike}from"../../Core/Observable";import{Callout}from"../../Callout";import{Label}from"../Label/Label";import{KeyCode,getSafeId}from"../../Util";import{Suggestions}from"./Suggestions";import{Location}from"../../Utilities/Position";import{FocusZoneContext}from"../../FocusZone";var Autocomplete=function(t){function v(e){var i=t.call(this,e)||this;return i.currentSelectedColorIndex=new ObservableValue(0),i.inputRef=React.createRef(),i.onBlur=function(e){i.setState({displayPlaceholderText:!1})},i.onCheckForExactSuggestionMatches=function(e){return-1!=e.findIndex(function(e){return e.content===ObservableLike.getValue(i.props.value)})},i.onFocus=function(e){i.props.onFocus&&i.props.onFocus(e),i.setState({displayPlaceholderText:!0})},i.onInputChange=function(e){i.props.onInputValueChange(e.currentTarget.value)},i.onKeyDown=function(e){if(i.props.onKeyDown&&i.props.onKeyDown(e),!e.isDefaultPrevented()){var t=ObservableLike.getValue(i.props.value),o=i.props.onCheckForDuplicateInParent(t),n=i.state.currentSuggestions[i.state.currentSuggestionIndex];if(i.state.displayCallout)if(e.which===KeyCode.tab&&n)i.props.onInputValueChange(n.content),e.preventDefault();else if(e.which===KeyCode.downArrow){var r=o?i.state.currentSuggestions.length-1:i.state.currentSuggestions.length,a=i.state.currentSuggestionIndex+1;i.setState({currentSuggestionIndex:r<a?0:a}),e.preventDefault()}else if(e.which===KeyCode.upArrow){r=o?i.state.currentSuggestions.length-1:i.state.currentSuggestions.length,a=i.state.currentSuggestionIndex-1;i.setState({currentSuggestionIndex:a<0?r:a}),e.preventDefault()}else{if(o)return;e.which===KeyCode.rightArrow&&i.isNewRowSelected()?(i.currentSelectedColorIndex.value=Math.min(i.currentSelectedColorIndex.value+1,v.DEFAULT_COLORS.length-1),e.preventDefault()):e.which===KeyCode.leftArrow&&i.isNewRowSelected()&&(i.currentSelectedColorIndex.value=Math.max(i.currentSelectedColorIndex.value-1,0),e.preventDefault())}r=t.trim(),a=""!==r&&i.props.onSubmit&&!o;e.which===KeyCode.enter&&a?n?i.submit(n):i.submit({content:r,color:!i.props.disableColorPicker&&v.DEFAULT_COLORS[i.currentSelectedColorIndex.value]}):e.which===KeyCode.comma&&(a&&i.submit({content:r,color:!i.props.disableColorPicker&&v.DEFAULT_COLORS[i.currentSelectedColorIndex.value]}),e.preventDefault())}},i.onPipClick=function(e,t,o){i.props.onSubmit&&i.props.onSubmit({content:ObservableLike.getValue(i.props.value),color:t})},i.onNewLabelClick=function(e){i.props.onSubmit&&i.props.onSubmit({content:ObservableLike.getValue(i.props.value)})},i.onSuggestionClick=function(e,t){i.submit(t)},i.onValueChange=function(t){var e;clearTimeout(i.loadingDelayTimeoutId),""===t.trim()?i.setState({displayCallout:!1,currentSuggestions:[]}):(e=function(){return i.setState({isLoading:!0,displayCallout:!0})},i.state.displayCallout?e():i.loadingDelayTimeoutId=setTimeout(function(){e()},200),i.props.suggestionProvider(t).then(function(e){t===ObservableLike.getValue(i.props.value)&&(clearTimeout(i.loadingDelayTimeoutId),i.setState({currentSuggestions:e,isLoading:!1,displayCallout:!0,displayTypeAhead:!0}))})),i.setState({displayTypeAhead:!1,currentSuggestionIndex:0,currentSuggestions:[]})},i.state={currentSuggestionIndex:0,currentSuggestions:[],displayCallout:!1,displayPlaceholderText:!1,displayTypeAhead:!1,isLoading:!1},i}return __extends(v,t),v.prototype.render=function(){var t=this,e=this.props,o=e.ariaDescribedBy,n=e.className,r=e.customColors,a=e.disableColorPicker,i=void 0!==a&&a,l=e.onCheckForDuplicateInParent,s=e.onDuplicateInParentText,u=e.placeholder,a=e.value,e=this.state,c=e.currentSuggestions,p=e.currentSuggestionIndex,d=e.displayCallout,g=e.isLoading,h=e.displayTypeAhead,b=e.displayPlaceholderText,m=ObservableLike.getValue(a),e=c[p]?c[p].content:"",C=this.getTypeAheadValue(m,e,h),S=r||v.DEFAULT_COLORS,f=this.state.currentSuggestions[this.state.currentSuggestionIndex];return React.createElement(FocusZoneContext.Consumer,null,function(e){return React.createElement("div",{"aria-expanded":d,"aria-haspopup":"listbox","aria-owns":getSafeId("autocomplete-listbox"),className:"bolt-label-autocomplete",role:"combobox"},React.createElement("input",{"aria-activedescendant":d&&f&&f.content,"aria-autocomplete":"both","aria-controls":getSafeId("autocomplete-listbox"),"aria-describedby":getSafeId(o),className:n,"data-focuszone":e.focuszoneId,onBlur:t.onBlur,onChange:t.onInputChange,onFocus:t.onFocus,onKeyDown:t.onKeyDown,placeholder:b?u:void 0,ref:t.inputRef,tabIndex:0,type:"text",value:m}),React.createElement("input",{type:"text",className:"suggestion",value:C,disabled:!0}),d&&React.createElement(Callout,{anchorElement:t.inputRef.current,anchorOffset:{horizontal:0,vertical:10},anchorOrigin:{horizontal:Location.start,vertical:Location.end},calloutOrigin:{horizontal:Location.start,vertical:Location.start},className:"bolt-label-suggestions-callout",contentShadow:!0},React.createElement(Suggestions,{currentSelectedColorIndex:t.currentSelectedColorIndex,currentSelectedIndex:p,disableColorPicker:i,inputAlreadyInGroupText:s,isCurrentInputAlreadyInGroup:l(m),isLoading:g,onCheckForExactMatch:t.onCheckForExactSuggestionMatches,onColorPipClick:t.onPipClick,onNewLabelClick:t.onNewLabelClick,onSuggestionClick:t.onSuggestionClick,suggestedItems:c,swatchPickerColors:S})))})},v.prototype.componentDidMount=function(){ObservableLike.subscribe(this.props.value,this.onValueChange)},v.prototype.componentWillUnmount=function(){clearTimeout(this.loadingDelayTimeoutId),ObservableLike.unsubscribe(this.props.value,this.onValueChange)},v.prototype.UNSAFE_componentWillReceiveProps=function(e){ObservableLike.unsubscribe(this.props.value,this.onValueChange),ObservableLike.subscribe(e.value,this.onValueChange)},v.prototype.focus=function(){this.inputRef.current.focus()},v.prototype.getTypeAheadValue=function(e,t,o){return o?e.concat(t.substr(e.length)):""},v.prototype.isNewRowSelected=function(){return this.state.currentSuggestionIndex===this.state.currentSuggestions.length&&""!=ObservableLike.getValue(this.props.value)},v.prototype.submit=function(e){this.props.onSubmit&&this.props.onSubmit(e),clearTimeout(this.loadingDelayTimeoutId),this.currentSelectedColorIndex.value=0,this.setState({currentSuggestions:[]})},v.DEFAULT_COLORS=[Label.DEFAULT_COLOR,{red:255,green:255,blue:0},{red:235,green:257,blue:128},{red:229,green:150,blue:182},{red:191,green:165,blue:221},{red:168,green:191,blue:243},{red:153,green:207,blue:198}],v}(React.Component);export{Autocomplete};