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