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