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

React components for building web UI in Azure DevOps

import{__assign}from"tslib";import"../../CommonImports";import"../../Core/core.css";import"./Dropdown.css";import*as React from"react";import{ObservableLike}from"../../Core/Observable";import{Button}from"../../Button";import{FocusWithin}from"../../FocusWithin";import{FocusZone,FocusZoneContext,FocusZoneDirection}from"../../FocusZone";import{Observer}from"../../Observer";import{css}from"../../Util";import{DropdownCallout}from"./DropdownCallout";function WithPivots(r){function o(o){return React.createElement(DropdownCallout,__assign({},o,r.calloutProps,{onFilterTextChanged:function(e,t){o.onFilterTextChanged&&o.onFilterTextChanged(e,t),r.calloutProps&&r.calloutProps.onFilterTextChanged&&r.calloutProps.onFilterTextChanged(e,t)},renderBeforeContent:function(){return renderPivots(r)}}))}return React.createElement(Observer,{selectedPivot:r.selectedPivot},function(){var t=getSelectedPivot(r);return React.createElement(Observer,{userFilteredItems:t.userFilteredItems},function(){var e={actions:t.actions,filterByText:t.filterByText,userFilteredItems:t.userFilteredItems||t.items,filteredNoResultsText:t.filteredNoResultsText,filterPlaceholderText:t.filterPlaceholderText,noItemsText:t.noItemsText,renderCallout:o,showFilterBox:t.showFilterBox};return r.children(e)})})}function onPivotClick(e,t){t.onPivotClicked&&t.onPivotClicked(e)}function getSelectedPivot(e){var t,o;return e.selectedPivot&&(t=ObservableLike.getValue(e.selectedPivot),o=e.pivots.find(function(e){return e.id===t})),o||e.pivots[0]}function renderPivots(i){return i.pivots.length<2?null:React.createElement(FocusZoneContext.Consumer,null,function(n){return React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},React.createElement("div",{role:"tablist"},React.createElement(FocusWithin,null,function(r){return i.pivots.map(function(e,t){var o=void 0!==i.selectedPivot&&e.id===ObservableLike.getValue(i.selectedPivot);return React.createElement(Button,{ariaSelected:o,ariaSetSize:i.pivots.length,ariaPosInSet:t+1,className:"bolt-dropdown-pivot",key:e.id,subtle:!0,onBlur:r.onBlur,onClick:function(){return onPivotClick(e,i)},onFocus:r.onFocus,role:"tab",focusZoneId:0!==t||r.hasFocus?void 0:n.focuszoneId},React.createElement("span",{className:css(i.selectedPivot&&e.id===ObservableLike.getValue(i.selectedPivot)&&"bolt-dropdown-pivot-selected")},e.name||e.id))})})))})}export{WithPivots};