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

React components for building web UI in Azure DevOps

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){const o=o=>React.createElement(DropdownCallout,Object.assign({},o,r.calloutProps,{onFilterTextChanged:(e,t)=>{o.onFilterTextChanged&&o.onFilterTextChanged(e,t),r.calloutProps&&r.calloutProps.onFilterTextChanged&&r.calloutProps.onFilterTextChanged(e,t)},renderBeforeContent:()=>renderPivots(r)}));return React.createElement(Observer,{selectedPivot:r.selectedPivot},()=>{const t=getSelectedPivot(r);return React.createElement(Observer,{userFilteredItems:t.userFilteredItems},()=>{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){let t;if(e.selectedPivot){const o=ObservableLike.getValue(e.selectedPivot);t=e.pivots.find(e=>e.id===o)}return t||e.pivots[0]}function renderPivots(l){return l.pivots.length<2?null:React.createElement(FocusZoneContext.Consumer,null,i=>React.createElement(FocusZone,{direction:FocusZoneDirection.Horizontal},React.createElement("div",{role:"tablist"},React.createElement(FocusWithin,null,r=>l.pivots.map((e,t)=>{var o=void 0!==l.selectedPivot&&e.id===ObservableLike.getValue(l.selectedPivot);return React.createElement(Button,{ariaSelected:o,ariaSetSize:l.pivots.length,ariaPosInSet:t+1,className:"bolt-dropdown-pivot",key:e.id,subtle:!0,onBlur:r.onBlur,onClick:()=>onPivotClick(e,l),onFocus:r.onFocus,role:"tab",focusZoneId:0!==t||r.hasFocus?void 0:i.focuszoneId},React.createElement("span",{className:css(l.selectedPivot&&e.id===ObservableLike.getValue(l.selectedPivot)&&"bolt-dropdown-pivot-selected")},e.name||e.id))})))))}export{WithPivots};