azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 2.24 kB
JavaScript
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";class TypeAhead extends React.Component{constructor(){super(...arguments),this.textFieldRef=React.createRef(),this.autofillEnabled=!0,this.select=()=>{this.textFieldRef.current.select()},this.onKeyDown=e=>{if(this.props.onKeyDown&&this.props.onKeyDown(e),!e.isDefaultPrevented()){var t=this.props.suggestedValue&&ObservableLike.getValue(this.props.suggestedValue),s=this.props.value&&ObservableLike.getValue(this.props.value);switch(e.which){case KeyCode.tab:t&&s!==t&&this.autofillEnabled&&this.props.onAutoComplete&&(this.props.onAutoComplete(t),e.preventDefault());break;case KeyCode.backspace:case KeyCode.delete:this.autofillEnabled=!1;break;default:this.autofillEnabled=!0}}}}subscribeAll(e){ObservableLike.subscribe(e.value,()=>this.forceUpdate()),ObservableLike.subscribe(e.suggestedValue,()=>this.forceUpdate())}unsubscribeAll(e){ObservableLike.unsubscribe(e.value,()=>this.forceUpdate()),ObservableLike.unsubscribe(e.suggestedValue,()=>this.forceUpdate())}componentDidMount(){this.subscribeAll(this.props)}componentWillUnmount(){this.unsubscribeAll(this.props)}UNSAFE_componentWillReceiveProps(e){this.unsubscribeAll(this.props),this.subscribeAll(e)}focus(){this.textFieldRef.current.focus()}get selectionEnd(){return this.textFieldRef.current.selectionEnd}get selectionStart(){return this.textFieldRef.current.selectionStart}setSelectionRange(e,t,s){this.textFieldRef.current.setSelectionRange(e,t,s)}render(){var{value:e,suggestedValue:t,className:s}=this.props,t=this.autofillEnabled?t:e;return React.createElement(TextField,Object.assign({},this.props,{className:css(s,"bolt-typeahead"),onKeyDown:this.onKeyDown,ref:this.textFieldRef,value:t}))}componentDidUpdate(){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))}}export{TypeAhead};