azure-devops-ui
Version:
React components for building web UI in Azure DevOps
37 lines (36 loc) • 2.65 kB
JavaScript
import { __rest } from "tslib";
import "../../CommonImports";
import "../../Core/core.css";
import "./Dropdown.css";
import * as React from "react";
import { ExpandableTextField } from '../../ExpandableTextField';
import * as Resources from '../../Resources.Dropdown';
import { TextFieldFocusTreatmentBehavior } from '../../TextField';
import { css } from '../../Util';
export function DropdownExpandableTextField(props) {
var _a;
const { disableAutocomplete, editable, expandableRef, items, inputClassName, renderSelectedItems, selection, showPrefix = true } = props, rest = __rest(props, ["disableAutocomplete", "editable", "expandableRef", "items", "inputClassName", "renderSelectedItems", "selection", "showPrefix"]);
let prefixIconProps;
let text;
if (!editable) {
text = props.placeholder;
if (selection.selectedCount > 0) {
text = renderSelectedItems(selection, items);
}
}
// If only a single item is selected and the item has an icon we will show it as a prefix icon.
if (showPrefix && selection.selectedCount === 1) {
prefixIconProps = (_a = items[selection.value[0].beginIndex]) === null || _a === void 0 ? void 0 : _a.iconProps;
}
return (React.createElement(ExpandableTextField, Object.assign({ ariaHasPopup: "menu", ariaRoleDescription: !editable ? Resources.DropdownExpandableRoleDescription : undefined, autoComplete: editable && !disableAutocomplete, ariaAutoComplete: editable ? "list" : undefined, focusTreatment: editable ? TextFieldFocusTreatmentBehavior.all : TextFieldFocusTreatmentBehavior.keyboardOnly, inputType: !editable ? "button" : undefined, editable: editable, ref: expandableRef, value: text }, rest, { className: css(props.className, "bolt-dropdown-expandable-text-field", rest.disabled && "disabled"), inputClassName: css(inputClassName, "bolt-dropdown-expandable-textfield-input text-ellipsis"), onClick: event => expandableRef.current && expandableRef.current.expand(), prefixIconProps: props.prefixIconProps || prefixIconProps, tooltipProps: Object.assign({ text, overflowOnly: true, overflowDetected }, props.tooltipProps), required: props.required })));
}
function overflowDetected(anchorElement) {
const { wordBreak, whiteSpace } = anchorElement.style;
const height = anchorElement.clientHeight;
anchorElement.style.wordBreak = "break-all";
anchorElement.style.whiteSpace = "normal";
const heightChanged = height < anchorElement.clientHeight;
anchorElement.style.wordBreak = wordBreak;
anchorElement.style.whiteSpace = whiteSpace;
return heightChanged;
}