azure-devops-ui/Components/Dropdown/DropdownCallout.min.js

React components for building web UI in Azure DevOps

import{__assign,__extends}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Dropdown.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{format}from"../../Core/Util/String";import{Button}from"../../Button";import{Callout,ContentSize}from"../../Callout";import{FocusZone,FocusZoneDirection,FocusZoneKeyStroke}from"../../FocusZone";import{IconSize}from"../../Icon";import{ListBox}from"../../ListBox";import{Observer}from"../../Observer";import*as Resources from"../../Resources.Dropdown";import{TextField}from"../../TextField";import{css,getSafeIdSelector,KeyCode,preventDefault}from"../../Util";var ItemsForFilter=10,DefaultWidth=256,FilterBarPadding=16,FilterBarIconWidth=27;function DropdownCallout(e){return React.createElement(DropdownCalloutComponent,__assign({},e))}var DropdownCalloutComponent=function(o){function e(e){var t=o.call(this,e)||this;return t.callout=React.createRef(),t.calloutContent=React.createRef(),t.filterBox=React.createRef(),t.initFocusElement=React.createRef(),t.updateLayout=function(){return setTimeout(function(){t.callout.current&&t.callout.current.updateLayout()},0),!0},t.onMouseDown=function(e){t.props.ignoreMouseDown&&"INPUT"!==e.target.tagName&&preventDefault(e)},t.listBoxDidUpdate=function(){t.getScrollWidth()},t.getScrollWidth=function(){window.requestAnimationFrame(function(){var e;t.calloutContent.current&&0<=t.props.width&&(e=t.calloutContent.current.offsetWidth-t.props.width,1<Math.abs(e))&&t.setState({scrollBarWidth:e+t.state.scrollBarWidth})})},t.state={scrollBarWidth:0},t}return __extends(e,o),e.prototype.componentDidMount=function(){this.getScrollWidth()},e.prototype.focus=function(){this.filterBox.current?this.filterBox.current.focus():this.initFocusElement.current&&this.initFocusElement.current.focus()},e.prototype.render=function(){function t(){o.props.onDismiss&&o.props.onDismiss(),W()}var o=this,e=this.props,r=e.actions,n=e.anchorElement,l=e.anchorOffset,i=e.anchorOrigin,a=e.anchorPoint,s=e.ariaLabel,c=e.blurDismiss,c=void 0===c||c,u=e.calloutContentClassName,d=e.columns,m=e.containerClassName,p=e.contentLocation,f=e.dropdownOrigin,h=e.enforceSingleSelect,b=e.excludeFocusZone,w=e.excludeTabStop,g=e.filteredItems,v=e.filteredNoResultsText,x=e.filteredResultsLoadingText,k=e.filterPlaceholderText,R=e.filterText,C=e.focusOnMount,Z=e.getUnselectableRanges,F=e.id,D=e.items,_=e.lightDismiss,M=e.listBoxClassName,z=e.listBoxRef,K=e.loading,U=e.onActivate,A=e.onFilterKeyDown,S=e.onFilterTextChanged,V=e.onSelect,q=e.onToggle,j=e.portalProps,I=e.renderBeforeContent,G=e.renderItem,B=e.searching,H=e.selection,E=e.showCloseButton,N=e.showChecksColumn,T=e.showFilterBox,J=e.showItemsWhileSearching,Q=e.showTree,y=e.title,L=e.updateFilteredItems,e=e.userFilteredItems,O=this.props.width,O=void 0===O?DefaultWidth:O,P=(0<O&&(O-=this.state.scrollBarWidth),"bolt-dropdown-textfield-".concat(F)),W=function(){R.value="",S&&S(null,""),L&&L()};return React.createElement(Callout,{anchorElement:n,anchorOffset:l,anchorOrigin:i,anchorPoint:a,role:"presentation",blurDismiss:c,calloutOrigin:f,contentClassName:css(u,"bolt-dropdown flex-column custom-scrollbar v-scroll-auto h-scroll-hidden"),contentLocation:p,contentRef:this.calloutContent,contentShadow:!0,contentSize:ContentSize.Auto,escDismiss:!0,id:F,portalProps:j,lightDismiss:_,focuszoneProps:{postprocessKeyStroke:function(e){return e.which!==KeyCode.tab||e.defaultPrevented?FocusZoneKeyStroke.IgnoreNone:(e.preventDefault(),t(),FocusZoneKeyStroke.IgnoreAll)}},onDismiss:t,ref:this.callout},React.createElement(FocusZone,{circularNavigation:!0,defaultActiveElement:T||void 0===T&&D.length>ItemsForFilter?getSafeIdSelector(P):".bolt-dropdown-init-focus",direction:FocusZoneDirection.Vertical,focusOnMount:void 0===C||C,preventScrollOnFocus:window.self!==window.top},React.createElement("div",{className:"bolt-dropdown-container no-outline",onMouseDown:this.onMouseDown,onKeyDown:A,style:{width:0<=O?O:void 0}},React.createElement("div",{"aria-hidden":"true","aria-roledescription":Resources.DropdownCalloutRoleDescription,className:"bolt-dropdown-init-focus no-outline",tabIndex:w?void 0:-1,ref:this.initFocusElement,role:"menuitem"}),React.createElement(Observer,{items:{observableValue:D,filter:this.updateLayout}},function(){var e=void 0===T?D.length>ItemsForFilter:T;return e||y||E?React.createElement("div",{className:"bolt-dropdown-header-container"},(y||E)&&React.createElement("div",{className:"bolt-dropdown-header flex-row flex-center"},React.createElement("div",{className:"bolt-dropdown-header-text flex-grow font-weight-semibold"},y),E&&React.createElement(Button,{className:"bolt-dropdown-header-button",ariaLabel:Resources.Close,iconProps:{iconName:"Cancel"},onClick:t,subtle:!0})),e&&React.createElement("div",{key:"bolt-dropdown-filter-container",className:"bolt-dropdown-filter-container"},React.createElement(Observer,{filterText:R},function(e){return React.createElement(TextField,{key:"bolt-dropdown-filter",ariaLabel:Resources.SearchAriaLabel,className:"bolt-dropdown-filter",excludeTabStop:!0,inputId:P,onChange:S,placeholder:k,prefixIconProps:{iconName:"Search"},ref:o.filterBox,value:R,maxWidth:o.props.width-FilterBarPadding-FilterBarIconWidth,suffixIconProps:0<e.filterText.length?{ariaLabel:Resources.ClearText,iconName:"ChromeClose",onClick:W,size:IconSize.small,tooltipProps:{text:Resources.ClearText},role:"button"}:void 0})}))):null}),I&&I(),React.createElement(Observer,{filteredItems:g,filteredNoResultsText:v,listBoxItems:{observableValue:D,filter:L},userFilteredItems:{observableValue:e,filter:L}},function(e){var t=null;return(g&&0===g.length||0===D.length)&&!B&&(e=""===R.value?o.props.noItemsText:format(e.filteredNoResultsText||Resources.NoFilterResults,R.value))&&(t=React.createElement("div",{className:"bolt-dropdown-no-items"},e)),React.createElement(React.Fragment,null,t,React.createElement(ListBox,{ariaLabel:s,className:M,columns:d,containerClassName:css("bolt-dropdown-list-box-container",m),didUpdate:o.listBoxDidUpdate,enforceSingleSelect:h,excludeFocusZone:b,excludeTabStop:!0,searchResultsLoadingText:x,focuszoneProps:null,getUnselectableRanges:Z,items:g?g.value:D,loading:K,onActivate:U,onSelect:V,onToggle:q,renderItem:G,ref:z,searching:B,selection:H,showChecksColumn:void 0===N||N,showItemsWhileSearching:J,showTree:Q}))}),React.createElement(Observer,{actions:r},function(e){var t=o.props.actions;return t&&t.length?React.createElement("div",{className:"bolt-actions-container flex-column"},ObservableLike.getValue(t).map(function(e,t){return React.createElement(Button,__assign({key:e.id||t,subtle:!0,excludeTabStop:!0},e))})):null}))))},e.defaultProps={width:DefaultWidth,ignoreMouseDown:!0},e}(React.Component);export{DropdownCallout,DropdownCalloutComponent};