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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";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";var messageId=1,TextFieldWithMessage=function(t){function e(e){var r=t.call(this,e)||this;return r.innerTextField=React.createRef(),r.select=function(){r.innerTextField.current&&r.innerTextField.current.select()},r.setSelectionRange=function(e,t){r.innerTextField.current&&r.innerTextField.current.setSelectionRange(e,t)},r.descriptionId="textfield-message-".concat(messageId++),r}return __extends(e,t),e.prototype.focus=function(){this.innerTextField.current&&this.innerTextField.current.focus()},Object.defineProperty(e.prototype,"selectionEnd",{get:function(){return this.innerTextField.current?this.innerTextField.current.selectionEnd:null},enumerable:!1,configurable:!0}),Object.defineProperty(e.prototype,"selectionStart",{get:function(){return this.innerTextField.current?this.innerTextField.current.selectionStart:null},enumerable:!1,configurable:!0}),e.prototype.render=function(){var s=this,e=this.props,t=e.message,n=e.error;return React.createElement(Observer,{error:n,message:t},function(e){var t=__assign({},s.props.textFieldProps),r=s.props.messageClassName;return e.error&&(t.className=css(t.className,"bolt-textfield-error"),r=css(r,"bolt-textfield-message-error"),t.suffixIconProps=t.suffixIconProps||{className:"bolt-textfield-message-error",iconName:"Error"}),React.createElement("div",{className:css(s.props.className,"flex-column")},React.createElement(TextField,__assign({ariaDescribedBy:e.message&&s.descriptionId,ref:s.innerTextField},t)),e.message&&React.createElement("span",{role:n?"alert":void 0,id:getSafeId(s.descriptionId),className:css(r,"bolt-textfield-message")},e.message))})},e}(React.Component);export{TextFieldWithMessage};