azure-devops-ui/Components/TextField/TextField.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{FocusWithin}from"../../FocusWithin";import{FocusZoneContext}from"../../FocusZone";import{FormItemContext,Severity}from"../../FormItem";import{Icon,IconSize}from"../../Icon";import{Observer}from"../../Observer";import{Tooltip}from"../../TooltipEx";import{css,getSafeId,KeyCode}from"../../Util";import{getTabIndex}from"../../Utilities/Focus";import{TextFieldFocusTreatmentBehavior,TextFieldStyle,TextFieldWidth}from"./TextField.Props";let inputId=1;class TextField extends React.Component{constructor(e){super(e),this.select=()=>{this.inputElement.current&&this.inputElement.current.select()},this.getTextLength=e=>{return e?"string"==typeof e?e.length:(null==(e=e.value)?void 0:e.length)||0:0},this.inputId="textfield-input-"+inputId++,this.inputElement=e.inputElement||React.createRef(),this.state={textLength:e.showCharacterCounter?this.getTextLength(e.value):0}}focus(){this.inputElement.current&&this.inputElement.current.focus()}get selectionEnd(){return this.inputElement.current?this.inputElement.current.selectionEnd:null}get selectionStart(){return this.inputElement.current?this.inputElement.current.selectionStart:null}setSelectionRange(e,t,i){this.inputElement.current&&this.inputElement.current.setSelectionRange(e,t,i)}render(){const{className:e,containerClassName:t,disabled:n,focusTreatment:r=TextFieldFocusTreatmentBehavior.all,inputId:i,label:o,onBlur:a,onFocus:s,onChange:l,required:c,style:u,value:d,width:p}=this.props,m=(e,t)=>{l&&l(e,t),this.props.maxLength&&this.props.showCharacterCounter&&this.setState({textLength:t.length})};var h=React.createElement(FocusWithin,{onFocus:s,onBlur:a},a=>React.createElement(FormItemContext.Consumer,null,i=>React.createElement("div",{className:css("flex-column",t,p!==TextFieldWidth.auto&&p)},React.createElement("div",{className:css(!o&&e,"bolt-textfield flex-row flex-center",n&&"disabled",r===TextFieldFocusTreatmentBehavior.all&&"focus-treatment",r===TextFieldFocusTreatmentBehavior.keyboardOnly&&"focus-keyboard-only",a.hasFocus&&"focused",u===TextFieldStyle.inline&&"bolt-textfield-inline",i.error&&(!i.severity||i.severity===Severity.Error)&&"bolt-textfield-error",i.error&&i.severity===Severity.Warning&&"bolt-textfield-warning")},React.createElement(FocusZoneContext.Consumer,null,t=>React.createElement(Observer,{value:d},e=>React.createElement(TextFieldInnerValue,Object.assign({},this.props,{onKeyDown:e=>{var t,i;this.props.multiline&&e.keyCode===KeyCode.enter&&!e.ctrlKey?e.stopPropagation():null!=(i=(t=this.props).onKeyDown)&&i.call(t,e)},onChange:m,focus:()=>this.focus(),required:c,focusStatus:a,formItemContext:i,inputElement:this.inputElement,inputId:this.props.inputId||this.inputId,value:e.value,zoneContext:t}))))),this.props.maxLength&&this.props.showCharacterCounter&&React.createElement("div",{className:"bolt-textfield-counter"},React.createElement("span",null,this.state.textLength,"/",this.props.maxLength)))));return o?React.createElement("div",{className:css(e,"flex-column")},React.createElement("label",{htmlFor:getSafeId(i||this.inputId),className:c?"bolt-textfield-label bolt-textfield-label--required":"bolt-textfield-label"},o),h):h}}class TextFieldInnerValue extends React.Component{constructor(){super(...arguments),this.adjustedHeight=-1,this.adjustedHeightValue="",this.hiddenElement=React.createRef()}render(){const{activatable:e,ariaActiveDescendant:t,ariaAutoComplete:i,ariaControls:a,ariaExpanded:n,ariaHasPopup:r,ariaInvalid:o,ariaLabel:s,ariaLabelledBy:l,ariaRoleDescription:c,autoAdjustHeight:u,autoComplete:d,autoFocus:p,autoSelect:m,disabled:h,excludeFocusZone:x,focus:f,focusStatus:g,formItemContext:b,inputClassName:v,inputElement:C,inputId:y,inputType:E,maxLength:I,maxWidth:F,multiline:R,onClick:z,onKeyDown:K,onKeyPress:W,onKeyUp:D,onPaste:P,placeholder:T,prefixIconProps:S,readOnly:j,required:V,resizable:q,role:U,rows:A,spellCheck:Z,tooltipProps:N,value:H,zoneContext:M,inputWrapperClassName:G}=this.props;let{ariaDescribedBy:w,suffixIconProps:k}=this.props;var L=R?"textarea":"input",J=R?{rows:A}:{type:E,autoComplete:d?"on":"off"},O=(void 0===k&&b.error&&(k=b.severity===Severity.Warning?{className:"bolt-textfield-message-warning",iconName:"Warning"}:{className:"bolt-textfield-message-error",iconName:"Error"}),void 0===w&&(w=b.ariaDescribedById),css(v,"bolt-textfield-input flex-grow",u&&"bolt-textfield-auto-adjust",q&&"bolt-textfield-auto-unresizable",S&&"bolt-textfield-input-with-prefix",k&&"bolt-textfield-input-with-suffix",e&&"activatable")),Q=void 0!==F?{maxWidth:F}:{};let B=React.createElement(L,Object.assign({},J,{"aria-activedescendant":getSafeId(t),"aria-autocomplete":i,"aria-controls":getSafeId(a),"aria-describedby":getSafeId(w),"aria-disabled":h,"aria-expanded":n,"aria-haspopup":r,"aria-invalid":o,"aria-label":void 0===s&&T?T:s,"aria-labelledby":getSafeId(l)||getSafeId(b.ariaLabelledById),"aria-readonly":E&&"text"!==E?j:void 0,"aria-roledescription":c,autoFocus:p,"data-focuszone":h||x?void 0:M.focuszoneId,disabled:h,className:O,id:getSafeId(y),maxLength:I,onBlur:g.onBlur,onClick:z,onChange:e=>{this.props.onChange&&this.props.onChange(e,e.target.value),this.adjustHeight()},onFocus:e=>{m&&C.current&&C.current.select(),g.onFocus&&g.onFocus(e)},onKeyDown:K,onKeyPress:W,onKeyUp:D,onPaste:P,placeholder:T,readOnly:j,required:V,ref:C,role:U,style:Q,spellCheck:Z,tabIndex:getTabIndex(this.props),value:H||""}));return R&&u&&(B=React.createElement("div",{className:css("flex-row flex-grow relative",G)},React.createElement(L,{"aria-hidden":!0,className:css("bolt-textfield-auto-adjust-hidden",O),ref:this.hiddenElement,role:"presentation"}),B)),React.createElement(React.Fragment,null,S&&Icon(Object.assign(Object.assign({size:IconSize.medium},S),{className:css(S.className,"prefix",!S.render&&"bolt-textfield-icon",(T&&!H||S.render)&&"bolt-textfield-no-text"),onClick:e=>{S&&S.onClick&&S.onClick(e),f()}})),N?React.createElement(Tooltip,Object.assign({},N),B):B,k&&Icon(Object.assign(Object.assign({size:IconSize.medium},k),{className:css(k.className,"suffix",!k.render&&"bolt-textfield-icon",(T&&!H||k.render)&&"bolt-textfield-no-text",k.onClick&&"cursor-pointer"),onClick:e=>{k&&k.onClick&&k.onClick(e),f()}})))}componentDidMount(){this.adjustHeight()}componentDidUpdate(){this.adjustHeight()}adjustHeight(){var e=this["hiddenElement"],{autoAdjustHeight:t,inputElement:i,multiline:a,value:n}=this.props;t?a&&i.current&&e.current&&n!==this.adjustedHeightValue&&(e.current.value=i.current.value,this.adjustedHeight!==e.current.scrollHeight)&&0<e.current.scrollHeight&&(this.adjustedHeight=e.current.scrollHeight,this.adjustedHeightValue=i.current.value,i.current.style.height=this.adjustedHeight+"px"):(this.adjustedHeightValue="",this.adjustedHeight=-1)}}export{TextField};