azure-devops-ui/Components/ExpandableTextField/ExpandableTextField.min.js

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import"./ExpandableTextField.css";import*as React from"react";import{Expandable}from"../../Expandable";import{FocusWithin}from"../../FocusWithin";import{IconSize}from"../../Icon";import{TextField}from"../../TextField";import{css,KeyCode}from"../../Util";import{Location}from"../../Utilities/Position";let textFieldId=1;class ExpandableTextField extends React.Component{constructor(e){super(e),this.textFieldElement=React.createRef(),this.expandable=React.createRef(),this.collapse=()=>{this.expandable.current&&this.expandable.current.collapse()},this.expand=()=>{this.expandable.current&&this.expandable.current.expand()},this.renderCallout=()=>this.props.renderCallout(this,this.dropdownId,this.props.anchorElement||!this.props.anchorPoint&&this.containerElement.current||void 0,this.props.anchorOffset||{horizontal:0,vertical:0},this.props.anchorOrigin||{horizontal:Location.end,vertical:Location.end},this.props.anchorPoint,this.props.dropdownOrigin||{horizontal:Location.end,vertical:Location.start}),this.dropdownId=e.dropdownId||"dropdown-"+textFieldId++,this.containerElement=e.containerRef||React.createRef()}render(){return React.createElement(Expandable,{disabled:this.props.disabled,expandKey:this.props.expandKey,onCollapse:this.props.onCollapse,onExpand:this.props.onExpand,renderCallout:this.renderCallout,ref:this.expandable},e=>React.createElement(FocusWithin,{onFocus:this.props.onFocus,onBlur:this.props.onBlur},t=>React.createElement("div",{className:css(this.props.className,"bolt-expandable-textfield"),onBlur:()=>{this.props.blurDismiss&&this.collapse(),t.onBlur&&t.onBlur()},onFocus:e=>{t.onFocus&&t.onFocus(e),e.target===this.containerElement.current&&this.focus()},onMouseDown:e.onMouseDown,onKeyDown:e.onKeyDown,ref:this.containerElement,tabIndex:-1,role:this.props.role},React.createElement(TextField,Object.assign({ariaHasPopup:"dialog"},this.props,{ariaActiveDescendant:e.expanded?this.props.ariaActiveDescendant:void 0,role:this.props.editable?"combobox":void 0,ariaExpanded:e.expanded,ariaControls:e.expanded?this.dropdownId:void 0,className:"",onClick:e.onClick,ref:this.textFieldElement,suffixIconProps:this.props.hideDropdownIcon?void 0:{key:"dropdown-icon",className:css("bolt-expandable-textfield-icon icon-right",this.props.disabled&&"disabled"),iconName:"ChevronDownMed",onClick:e.onClick,size:IconSize.small}})))))}focus(){this.textFieldElement.current&&this.textFieldElement.current.focus()}select(){this.textFieldElement.current&&this.textFieldElement.current.select()}}ExpandableTextField.defaultProps={expandKey:[KeyCode.downArrow,KeyCode.enter]};export{ExpandableTextField};