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

React components for building web UI in Azure DevOps

import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import{Button}from"../../Button";import{FilterBarItem}from"../../FilterBarItem";import*as Resources from"../../Resources.Input";import{TextField,TextFieldFocusTreatmentBehavior}from"../../TextField";import{css,KeyCode}from"../../Util";const DEFAULT_MAX_TEXT_LENGTH=200,DEFAULT_THROTTLE_WAIT=200;class TextFilterBarItem extends FilterBarItem{constructor(){super(...arguments),this.textField=React.createRef(),this.onClickClearButton=e=>{this.setFilterValue({value:""}),this.textField.current&&this.textField.current.focus()},this.onTextChanged=(e,t)=>{this.props.onlyChangeOnEnter?this.setState({value:t}):this.setFilterValue({value:t})},this.onKeyDown=e=>{if(this.props.filter){switch(e.which){case KeyCode.enter:this.props.filter.setFilterItemState(this.props.filterItemKey,{value:this.state.value}),this.props.filter.applyChanges();break;case KeyCode.escape:this.setFilterValue({value:""}),this.setState({value:""}),this.props.filter.applyChanges();break;default:return}e.preventDefault(),e.stopPropagation()}}}focus(){if(this.textField.current)return this.textField.current.focus()}render(){var e=this.state["value"],{className:t,clearable:r,placeholder:i,maxTextLength:l,inputClassName:s,style:a,width:o,ariaLabel:n}=this.props,c={text:e||i,overflowOnly:!0,overflowDetected:this.overflowDetected};let h=r&&e?{render:e=>React.createElement(Button,{ariaLabel:Resources.ClearFilter,className:css(e,"bolt-text-filterbaritem-clear"),iconProps:{iconName:"Cancel"},onClick:this.onClickClearButton})}:void 0;return React.createElement(TextField,Object.assign({ariaLabel:n||i,className:css(t,"bolt-text-filterbaritem flex-grow"),containerClassName:"flex-grow",inputClassName:css(s,"bolt-text-filterbaritem-input"),inputType:"text",focusTreatment:TextFieldFocusTreatmentBehavior.keyboardOnly,maxLength:l||DEFAULT_MAX_TEXT_LENGTH,onChange:this.onTextChanged,onKeyDown:this.onKeyDown,placeholder:i,ref:this.textField,style:a,suffixIconProps:h,value:e||"",width:o,tooltipProps:c},this.getExtraTextFieldProps()))}overflowDetected(e){let t=!0;var r;return e.value&&0<e.value.length?t=e.scrollWidth>e.clientWidth:(r=e.getAttribute("placeholder"),e.value=r||"",t=e.scrollWidth>e.clientWidth,e.value=""),t}getExtraTextFieldProps(){return null}getThrottleWait(){var e=this.props["throttleWait"];return void 0===e?DEFAULT_THROTTLE_WAIT:e}}TextFilterBarItem.defaultProps={isTextItem:!0};export{TextFilterBarItem};