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

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./TagPicker.css";import*as React from"react";import{ObservableArray,ObservableLike,ObservableValue}from"../../Core/Observable";import{TimerManagement}from"../../Core/TimerManagement";import{Callout}from"../../Callout";import{FocusWithin}from"../../FocusWithin";import{FormItemContext}from"../../FormItem";import{Icon,IconSize}from"../../Icon";import{Measure}from"../../Measure";import{Observer}from"../../Observer";import{Pill}from"../../Pill";import{SuggestionsList}from"../../SuggestionsList";import{css,getSafeId,KeyCode}from"../../Util";import{Location}from"../../Utilities/Position";var TagPicker=function(t){function e(e){var l=t.call(this,e)||this;return l.inputElement=React.createRef(),l.outerElement=React.createRef(),l.textValue=new ObservableValue(""),l.suggestionsVisible=new ObservableValue(!1),l.selectedIndex=new ObservableValue(-1),l.selectableTags=new ObservableArray([]),l.clearTagPicker=function(){l.suggestionsVisible.value=!1,l.textValue.value="",l.selectedIndex.value=-1},l.suggestionsLoaded=function(){return-1===l.selectedIndex.value&&!ObservableLike.getValue(l.props.suggestionsLoading)&&l.inputElement.current&&""!==l.inputElement.current.value&&(l.updateIndexTimer&&window.cancelAnimationFrame(l.updateIndexTimer),l.updateIndexTimer=window.requestAnimationFrame(function(){l.selectedIndex.value=0})),!0},l.createGenericItem=function(e,t){if(0!==e.trim().length){var n=l.props.createDefaultItem&&l.props.createDefaultItem(e);if(!n||!t.some(function(e){return l.props.areTagsEqual(n,e)}))return n}},l.onBlur=function(){var e;l.props.shouldBlurClear&&!l.props.shouldBlurClear()||(e=l.textValue.value,l.textValue.value="",l.selectableTags.value=[],l.props.onBlur&&l.props.onBlur(e),l.onSuggestionsDismiss())},l.onFocus=function(){l.props.onFocus&&l.props.onFocus()},l.onOuterKeyDown=function(e){switch(e.which){case KeyCode.delete:case KeyCode.backspace:!e.isDefaultPrevented()&&0<l.selectableTags.value.length&&(l.props.onTagsRemoved&&l.props.onTagsRemoved(l.selectableTags.value),l.selectableTags.value=[],l.focusInput(),e.preventDefault())}},l.onKeyDown=function(e){var t,n=e.which,s=l.inputElement.current,o=l.suggestionsVisible.value,a=ObservableLike.getValue(l.props.suggestions);switch(n){case KeyCode.escape:l.onSuggestionsDismiss(),e.preventDefault();break;case KeyCode.tab:case KeyCode.enter:e.shiftKey||(o?(l.completeSuggestion(),e.preventDefault()):l.props.createDefaultItem&&(t=l.createGenericItem(l.textValue.value,ObservableLike.getValue(l.props.selectedTags)))&&(l.addItem(t),e.preventDefault()));break;case KeyCode.upArrow:o&&(l.selectedIndex.value=Math.max(0,l.selectedIndex.value-1),e.preventDefault());break;case KeyCode.downArrow:o?l.selectedIndex.value=Math.min(a.length-1,l.selectedIndex.value+1):(""===l.textValue.value&&l.props.onEmptyInputFocus&&l.props.onEmptyInputFocus(),l.suggestionsVisible.value=!0),e.preventDefault();break;case KeyCode.rightArrow:o&&a&&a[l.selectedIndex.value]&&l.props.onSuggestionExpanded&&s&&s.value.length===s.selectionEnd&&(l.props.onSuggestionExpanded(a[l.selectedIndex.value]),e.preventDefault())}},l.onInputClick=function(e){l.props.onEmptyInputFocus&&""===l.textValue.value&&l.props.onEmptyInputFocus(),l.suggestionsVisible.value=!0,e&&e.preventDefault()},l.onInputChange=function(e){l.textValue.value=e.target.value,l.selectedIndex.value=-1,l.onResolveInput(e),e.persist(),e.preventDefault()},l.onResolveInput=function(e){var t=l.props.deliminator&&l.textValue.value.split(l.props.deliminator);l.props.onDelimitedSearch&&l.props.deliminator&&t&&1<t.length?l.props.onDelimitedSearch(l.textValue.value.split(l.props.deliminator).filter(function(e){return""!==e})):(l.props.onSearchChanged(e.target.value),l.suggestionsVisible.value=!0)},l.onTagClicked=function(e,t){var n;e&&e.isDefaultPrevented()||(n=l.indexOfTag(t,l.selectableTags.value),l.props.onTagsRemoved&&(n<0?l.selectableTags.push(t):l.selectableTags.splice(n,1),e)&&e.preventDefault())},l.onTagRemoved=function(e){var t=l.indexOfTag(e,l.selectableTags.value);0<=t&&l.selectableTags.splice(t,1),l.props.onTagRemoved(e),l.inputElement.current&&l.inputElement.current.focus()},l.onTagPickerSizeChanged=function(e,t){l.setState({width:e})},l.completeSuggestion=function(){var e=ObservableLike.getValue(l.props.suggestions)[l.selectedIndex.value];e&&l.addItem(e)},l.onSuggestionClick=function(e){l.addItem(e.item)},l.addItem=function(e){l.suggestionsVisible.value=!1,l.props.onTagAdded(e),l.textValue.value="",l.selectedIndex.value=-1,l.focusInput()},l.focusInput=function(){l.inputElement.current&&(l.inputElement.current.focus(),l.inputElement.current.select())},l.onSuggestionsDismiss=function(){l.suggestionsVisible.value=!1},l.indexOfTag=function(t,e){return e.findIndex(function(e){return l.props.areTagsEqual(e,t)})},l.onAddButtonClicked=function(){requestAnimationFrame(function(){var e;l.outerElement.current&&((e=l.outerElement.current).scrollTop=e.scrollHeight)})},l.state={width:296},l.timerManagement=new TimerManagement,l}return __extends(e,t),e.prototype.render=function(){var i=this,e=this.props,r=e.ariaLabel,u=e.ariaLabelledBy,t=e.className,o=e.convertItemToPill,n=e.noResultsFoundText,c=e.onTagsRemoved,g=e.placeholderText,s=e.prefixIconProps,a=e.renderSuggestionItem,d=e.selectedTags,p=e.suggestions,m=e.suggestionsLoading,v=e.suggestionsLoadingText,f=e.suggestionsContainerAriaLabel;return React.createElement(FocusWithin,{onBlur:this.onBlur,onFocus:this.onFocus},function(l){return React.createElement(React.Fragment,null,React.createElement(Observer,{suggestionsLoading:{observableValue:m,filter:i.suggestionsLoaded},suggestionsVisible:i.suggestionsVisible,selectedIndex:i.selectedIndex,selectableTags:i.selectableTags,selectedTags:d,suggestions:{observableValue:p,filter:i.suggestionsLoaded},textValue:i.textValue},function(a){var e=i.createGenericItem(i.textValue.value,a.suggestions.concat(a.selectedTags));return e&&a.suggestions.unshift(e),React.createElement(Measure,{onMeasure:i.onTagPickerSizeChanged},React.createElement("div",{className:css("bolt-tag-picker",(l.hasFocus||a.suggestionsVisible)&&"edit",t),ref:i.outerElement,onBlur:l.onBlur,onFocus:l.onFocus,onClick:i.focusInput},React.createElement("div",{className:"bolt-tag-picker-group flex-center flex-row flex-grow flex-wrap",onKeyDown:c&&i.onOuterKeyDown},0===a.selectedTags.length&&s?React.createElement(Icon,__assign({},s,{className:css(s.className,"bolt-tag-picker-prefix-icon")})):null,a.selectedTags.map(function(t,e){var n=o(t,e),s=i.indexOfTag(t,a.selectableTags);return React.createElement(Pill,__assign({},n,{key:getSafeId("bolt-tag-picker-pill"+e),className:css(n.className,"bolt-tag-picker-pill",c&&"bolt-tag-picker-pill-selectable",0<=s&&"active"),contentClassName:"text-ellipsis scroll-hidden",onClick:function(e){i.onTagClicked(e,t),n.onClick&&n.onClick(e)},onRemoveClick:function(e){i.onTagRemoved(t),e.preventDefault()}}),n.content)}),React.createElement(FormItemContext.Consumer,null,function(e){var t,n=0===a.selectedTags.length||l.hasFocus?g:void 0,s=!l.hasFocus&&0<a.selectedTags.length&&!a.suggestionsVisible,o=(a.suggestionsVisible&&(t=-1===a.selectedIndex||a.suggestionsLoading?getSafeId("sug-list-transition"):a.suggestions&&a.suggestions.length?getSafeId("sug-row-".concat(a.selectedIndex)):getSafeId("sug-list-no-results")),a.suggestionsVisible?getSafeId("suggestion-list"):void 0);return React.createElement("div",{className:"bolt-tag-picker-add-icon-div flex-row flex-grow"},s&&React.createElement(Icon,{className:"bolt-tag-picker-add-icon cursor-pointer",iconName:"Add",size:IconSize.small,onClick:i.onAddButtonClicked}),React.createElement("input",{"aria-activedescendant":t,"aria-autocomplete":"list","aria-controls":o,"aria-expanded":a.suggestionsVisible,"aria-haspopup":"listbox","aria-label":r||g,"aria-labelledby":getSafeId(u||e.ariaLabelledById),className:css("bolt-tag-picker-input flex-row flex-grow scroll-hidden",s&&!n&&"hide-input"),onBlur:l.onBlur,onChange:i.onInputChange,onKeyDown:i.onKeyDown,onClick:i.onInputClick,placeholder:n,ref:i.inputElement,role:"combobox",type:"text",value:a.textValue}))}))))}),React.createElement(Observer,{suggestionsVisible:i.suggestionsVisible,suggestionsLoading:m,selectedIndex:i.selectedIndex,suggestions:p,textValue:i.textValue},function(e){return e.suggestionsVisible?React.createElement(Callout,{anchorElement:i.outerElement.current||void 0,anchorOrigin:{horizontal:Location.start,vertical:Location.end},calloutOrigin:{horizontal:Location.start,vertical:Location.start},contentClassName:"bolt-tag-picker-callout-content scroll-hidden",contentShadow:!0,id:"tag-picker-callout",role:"presentation"},React.createElement(SuggestionsList,{isLoading:e.suggestionsLoading,loadingText:v,onBlur:l.onBlur,onFocus:l.onFocus,noResultsFoundText:e.textValue?n:void 0,onSuggestionClicked:i.onSuggestionClick,renderSuggestion:a,selectedIndex:e.selectedIndex,suggestions:e.suggestions,suggestionsContainerAriaLabel:f,width:i.state.width})):null}))})},e.prototype.componentDidMount=function(){this.onResolveInput=this.timerManagement.debounce(this.onResolveInput,this.props.onSearchChangedDebounceWait)},e.prototype.focus=function(){this.inputElement.current&&this.inputElement.current.focus()},e.defaultProps={onSearchChangedDebounceWait:250},e}(React.Component);export{TagPicker};