azure-devops-ui
Version:
React components for building web UI in Azure DevOps
1 lines • 6.8 kB
JavaScript
import"../../CommonImports";import"../../Core/core.css";import*as React from"react";import*as Resources from"../../Resources.Label";import{WrappingBehavior}from"./LabelGroup.Props";import{LabelGroup}from"./LabelGroup";import{css,getSafeId,KeyCode}from"../../Util";import{ObservableValue,ObservableArray,ObservableLike}from"../../Core/Observable";import{Autocomplete}from"../Autocomplete/Autocomplete";import{Button}from"../../Button";import{Icon}from"../../Icon";import{Observer}from"../../Observer";class EditableLabelGroup extends React.Component{constructor(e){super(e),this.autocompleteRef=React.createRef(),this.autocompleteValue=new ObservableValue(""),this.isMouseDownEventHandled=!1,this.labelGroupRef=React.createRef(),this.renderTitleIconFlag=new ObservableValue(!1),this.selectedLabelContents=new ObservableArray,this.filterLabelModelAgainstContents=t=>0==ObservableLike.getValue(this.props.labelProps).filter(e=>e.content.toUpperCase()===t.content.toUpperCase()).length,this.onAddButtonClicked=()=>{this.setState({isInEditMode:!0},()=>this.autocompleteRef.current.focus())},this.onAutocompleteFocus=e=>{this.selectedLabelContents.removeAll()},this.onAutocompleteValueChange=e=>{this.autocompleteValue.value=e},this.onBlur=e=>{this.focusOutTimeoutId=setTimeout(()=>{this.selectedLabelContents.removeAll(),this.autocompleteValue.value="",this.setState({isInEditMode:!1}),this.props.onBlur&&this.props.onBlur()},0)},this.onCheckForDuplicates=t=>0!==ObservableLike.getValue(this.props.labelProps).filter(e=>e.content.trim().toUpperCase()===t.trim().toUpperCase()).length,this.onFocus=e=>{clearTimeout(this.focusOutTimeoutId),this.state.isInEditMode||this.setState({isInEditMode:!0},()=>{this.renderTitleIconFlag.value=!1,this.autocompleteRef.current.focus()})},this.onGetSuggestions=e=>{return""!==e&&this.props.getSuggestedLabels?(e=this.props.getSuggestedLabels(e),Promise.resolve(e).then(e=>e.filter(this.filterLabelModelAgainstContents))):new Promise(e=>e([]))},this.onInnerMouseDOwn=e=>{this.state.isInEditMode&&(this.isMouseDownEventHandled=!0)},this.onInputKeyDown=e=>{var t=this.autocompleteValue.value;e.which!==KeyCode.backspace&&e.which!==KeyCode.delete||0<this.props.labelProps.length&&""===t&&(this.removeLabel(ObservableLike.getValue(this.props.labelProps)[this.props.labelProps.length-1].content),e.preventDefault())},this.onInputSubmit=e=>{this.props.onLabelSubmit&&this.props.onLabelSubmit(e),this.autocompleteValue.value="",this.autocompleteRef.current.focus()},this.onLabelKeyDown=(e,t,s)=>{if(this.props.onLabelKeyDown&&this.props.onLabelKeyDown(e,t,s),!e.isDefaultPrevented()){s=new Set([...this.selectedLabelContents.value,t.content]);if(e.which===KeyCode.backspace||e.which===KeyCode.delete){let e=-1,o=99999;if(s.forEach(t=>{var e=ObservableLike.getValue(this.props.labelProps).findIndex(e=>e.content===t);o=Math.min(o,e)}),0===o){const l=new Set(s);e=ObservableLike.getValue(this.props.labelProps).findIndex(e=>!l.has(e.content))}else e=o-1;-1===e?this.autocompleteRef.current.focus():this.labelGroupRef.current.focusLabel(e),s.forEach(e=>this.removeLabel(e)),this.selectedLabelContents.removeAll()}else e.which!==KeyCode.upArrow&&e.which!==KeyCode.downArrow&&e.which!==KeyCode.leftArrow&&e.which!==KeyCode.rightArrow||this.selectedLabelContents.removeAll()}},this.onLabelMouseDown=(e,t,o)=>{this.props.onLabelMouseDown&&this.props.onLabelMouseDown(e,t,o),!e.isDefaultPrevented()&&this.state.isInEditMode&&(o=new Set(this.selectedLabelContents.value),e.ctrlKey?o.has(t.content)?this.selectedLabelContents.removeAll(e=>e===t.content):this.selectedLabelContents.push(t.content):this.selectedLabelContents.value=o.has(t.content)?[]:[t.content])},this.onOuterMouseDown=e=>{this.isMouseDownEventHandled?this.isMouseDownEventHandled=!1:this.state.isInEditMode||(e.preventDefault(),this.setState({isInEditMode:!0},()=>{this.renderTitleIconFlag.value=!1,this.autocompleteRef.current.focus()}))},this.onWrapperKeyDown=e=>{e.which===KeyCode.escape&&(this.selectedLabelContents.removeAll(),this.autocompleteValue.value="",this.setState({isInEditMode:!1}),this.props.onBlur&&this.props.onBlur(),e.preventDefault())},this.groupId="editable-label-group-"+EditableLabelGroup.editableGroupCount,this.state={isInEditMode:!1}}render(){const{addButtonText:e=Resources.AddLabelButtonText,className:t,customColors:o,disableColorPicker:s=!1,disableMouseFocusOnLabels:l=!1,duplicateLabelText:n,enableHoverStyles:a=!0,labelProps:i,onLabelClick:r,shrinkToContents:u=!1,title:c,useBlankZeroData:p=!1,watermark:h=Resources.AddLabelWatermark}=this.props,d=this.state["isInEditMode"];var b=d?"edit":"",m=d?WrappingBehavior.freeFlow:this.props.wrappingBehavior;let v;if(0<i.length||d)v=React.createElement("div",{className:css("bolt-labelgroup--editableWrapper",b,!u&&"default-padding"),onKeyDown:this.onWrapperKeyDown,onMouseDown:this.onInnerMouseDOwn},React.createElement(LabelGroup,Object.assign({ref:this.labelGroupRef},this.props,{className:void 0,id:getSafeId(this.groupId),onLabelMouseDown:this.onLabelMouseDown,onLabelKeyDown:this.onLabelKeyDown,onLabelClick:r,selectedLabelContents:this.selectedLabelContents,title:void 0,disableMouseFocusOnLabels:l,enableHoverStyles:a,wrappingBehavior:m}),d&&React.createElement(Autocomplete,{ref:this.autocompleteRef,suggestionProvider:this.onGetSuggestions,value:this.autocompleteValue,placeholder:h,onKeyDown:this.onInputKeyDown,onSubmit:this.onInputSubmit,onFocus:this.onAutocompleteFocus,onInputValueChange:this.onAutocompleteValueChange,customColors:o,onCheckForDuplicateInParent:this.onCheckForDuplicates,onDuplicateInParentText:n,disableColorPicker:s,ariaDescribedBy:getSafeId(this.groupId)})));else{if(p)return null;v=React.createElement(Button,{className:"bolt-labelgroup-addButton",text:e,iconProps:{iconName:"Add"},onClick:this.onAddButtonClicked})}return React.createElement("div",{className:css(t,"bolt-labelgroup-editable flex-column",b),onFocus:this.onFocus,onBlur:this.onBlur,onMouseDown:this.onOuterMouseDown,onMouseEnter:()=>this.renderTitleIconFlag.value=!d,onMouseLeave:()=>this.renderTitleIconFlag.value=!1},c&&React.createElement(Observer,{renderIconFlag:this.renderTitleIconFlag},e=>React.createElement("div",{className:"bolt-labelgroup-title-wrapper body-m flex-row"},React.createElement("div",{className:"bolt-labelgroup-title-content"},c),e.renderIconFlag&&React.createElement(Icon,{iconName:"Edit"}))),v)}componentWillUnmount(){clearTimeout(this.focusOutTimeoutId)}focus(){this.setState({isInEditMode:!0},()=>this.autocompleteRef.current&&this.autocompleteRef.current.focus())}removeLabel(t){this.props.onLabelRemove&&this.props.onLabelRemove(ObservableLike.getValue(this.props.labelProps).find(e=>e.content===t)),this.selectedLabelContents.removeAll(e=>e===t)}}EditableLabelGroup.editableGroupCount=0;export{EditableLabelGroup};