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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{TextField}from"../TextField/TextField";import{ObservableLike}from"../../Core/Observable";import{css,KeyCode}from"../../Util";var TypeAhead=function(e){function t(){var r=null!==e&&e.apply(this,arguments)||this;return r.textFieldRef=React.createRef(),r.autofillEnabled=!0,r.select=function(){r.textFieldRef.current.select()},r.onKeyDown=function(e){if(r.props.onKeyDown&&r.props.onKeyDown(e),!e.isDefaultPrevented()){var t=r.props.suggestedValue&&ObservableLike.getValue(r.props.suggestedValue),o=r.props.value&&ObservableLike.getValue(r.props.value);switch(e.which){case KeyCode.tab:t&&o!==t&&r.autofillEnabled&&r.props.onAutoComplete&&(r.props.onAutoComplete(t),e.preventDefault());break;case KeyCode.backspace:case KeyCode.delete:r.autofillEnabled=!1;break;default:r.autofillEnabled=!0}}},r}return __extends(t,e),t.prototype.subscribeAll=function(e){var t=this;ObservableLike.subscribe(e.value,function(){return t.forceUpdate()}),ObservableLike.subscribe(e.suggestedValue,function(){return t.forceUpdate()})},t.prototype.unsubscribeAll=function(e){var t=this;ObservableLike.unsubscribe(e.value,function(){return t.forceUpdate()}),ObservableLike.unsubscribe(e.suggestedValue,function(){return t.forceUpdate()})},t.prototype.componentDidMount=function(){this.subscribeAll(this.props)},t.prototype.componentWillUnmount=function(){this.unsubscribeAll(this.props)},t.prototype.UNSAFE_componentWillReceiveProps=function(e){this.unsubscribeAll(this.props),this.subscribeAll(e)},t.prototype.focus=function(){this.textFieldRef.current.focus()},Object.defineProperty(t.prototype,"selectionEnd",{get:function(){return this.textFieldRef.current.selectionEnd},enumerable:!1,configurable:!0}),Object.defineProperty(t.prototype,"selectionStart",{get:function(){return this.textFieldRef.current.selectionStart},enumerable:!1,configurable:!0}),t.prototype.setSelectionRange=function(e,t,o){this.textFieldRef.current.setSelectionRange(e,t,o)},t.prototype.render=function(){var e=this.props,t=e.value,o=e.suggestedValue,e=e.className,o=this.autofillEnabled?o:t;return React.createElement(TextField,__assign({},this.props,{className:css(e,"bolt-typeahead"),onKeyDown:this.onKeyDown,ref:this.textFieldRef,value:o}))},t.prototype.componentDidUpdate=function(){var e=this.props.suggestedValue&&ObservableLike.getValue(this.props.suggestedValue),t=this.props.value&&ObservableLike.getValue(this.props.value);e&&this.autofillEnabled&&(t&&e.startsWith(t)?this.textFieldRef.current.setSelectionRange(t.length,e.length,"backward"):t||this.textFieldRef.current.setSelectionRange(0,e.length))},t}(React.Component);export{TypeAhead};