azure-devops-ui
Version:
React components for building web UI in Azure DevOps
65 lines (64 loc) • 3.67 kB
JavaScript
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";
export function WithPivots(props) {
const renderCallout = (calloutProps) => {
return (React.createElement(DropdownCallout, Object.assign({}, calloutProps, props.calloutProps, { onFilterTextChanged: (e, value) => {
calloutProps.onFilterTextChanged && calloutProps.onFilterTextChanged(e, value);
props.calloutProps && props.calloutProps.onFilterTextChanged && props.calloutProps.onFilterTextChanged(e, value);
}, renderBeforeContent: () => renderPivots(props) })));
};
return (React.createElement(Observer, { selectedPivot: props.selectedPivot }, () => {
const selectedPivot = getSelectedPivot(props);
return (React.createElement(Observer, { userFilteredItems: selectedPivot.userFilteredItems }, () => {
const newProps = {
actions: selectedPivot.actions,
filterByText: selectedPivot.filterByText,
userFilteredItems: selectedPivot.userFilteredItems || selectedPivot.items,
filteredNoResultsText: selectedPivot.filteredNoResultsText,
filterPlaceholderText: selectedPivot.filterPlaceholderText,
noItemsText: selectedPivot.noItemsText,
renderCallout: renderCallout,
showFilterBox: selectedPivot.showFilterBox
};
return props.children(newProps);
}));
}));
}
function onPivotClick(pivot, props) {
if (props.onPivotClicked) {
props.onPivotClicked(pivot);
}
}
function getSelectedPivot(props) {
let selectedPivot;
if (props.selectedPivot) {
const selectedPivotId = ObservableLike.getValue(props.selectedPivot);
selectedPivot = props.pivots.find(pivot => pivot.id === selectedPivotId);
}
return selectedPivot || props.pivots[0];
}
function renderPivots(props) {
if (props.pivots.length < 2) {
return null;
}
return (React.createElement(FocusZoneContext.Consumer, null, (verticalContext) => (React.createElement(FocusZone, { direction: FocusZoneDirection.Horizontal },
React.createElement("div", { role: "tablist" },
React.createElement(FocusWithin, null, (focusStatus) => {
return props.pivots.map((pivot, index) => {
const selected = props.selectedPivot !== undefined && pivot.id === ObservableLike.getValue(props.selectedPivot);
return (React.createElement(Button, { ariaSelected: selected, ariaSetSize: props.pivots.length, ariaPosInSet: index + 1, className: "bolt-dropdown-pivot", key: pivot.id, subtle: true, onBlur: focusStatus.onBlur, onClick: () => onPivotClick(pivot, props), onFocus: focusStatus.onFocus, role: "tab", focusZoneId: index === 0 && !focusStatus.hasFocus ? verticalContext.focuszoneId : undefined },
React.createElement("span", { className: css(props.selectedPivot &&
pivot.id === ObservableLike.getValue(props.selectedPivot) &&
"bolt-dropdown-pivot-selected") }, pivot.name || pivot.id)));
});
}))))));
}