azure-devops-ui/Components/TextField/TextFieldWithMessage.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./TextField.css";import*as React from"react";import{Observer}from"../../Observer";import{css,getSafeId}from"../../Util";import{TextField}from"./TextField";let messageId=1;class TextFieldWithMessage extends React.Component{constructor(e){super(e),this.innerTextField=React.createRef(),this.select=()=>{this.innerTextField.current&&this.innerTextField.current.select()},this.setSelectionRange=(e,t)=>{this.innerTextField.current&&this.innerTextField.current.setSelectionRange(e,t)},this.descriptionId="textfield-message-"+messageId++}focus(){this.innerTextField.current&&this.innerTextField.current.focus()}get selectionEnd(){return this.innerTextField.current?this.innerTextField.current.selectionEnd:null}get selectionStart(){return this.innerTextField.current?this.innerTextField.current.selectionStart:null}render(){const{message:e,error:r}=this.props;return React.createElement(Observer,{error:r,message:e},e=>{var t=Object.assign({},this.props.textFieldProps);let s=this.props.messageClassName;return e.error&&(t.className=css(t.className,"bolt-textfield-error"),s=css(s,"bolt-textfield-message-error"),t.suffixIconProps=t.suffixIconProps||{className:"bolt-textfield-message-error",iconName:"Error"}),React.createElement("div",{className:css(this.props.className,"flex-column")},React.createElement(TextField,Object.assign({ariaDescribedBy:e.message&&this.descriptionId,ref:this.innerTextField},t)),e.message&&React.createElement("span",{role:r?"alert":void 0,id:getSafeId(this.descriptionId),className:css(s,"bolt-textfield-message")},e.message))})}}export{TextFieldWithMessage};