azure-devops-ui
Version:
React components for building web UI in Azure DevOps
78 lines (77 loc) • 4.3 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./ExpandableTextField.css";
import * as React from "react";
import { Expandable } from '../../Expandable';
import { FocusWithin } from '../../FocusWithin';
import { IconSize } from '../../Icon';
import { TextField } from '../../TextField';
import { css, KeyCode } from '../../Util';
import { Location } from '../../Utilities/Position';
let textFieldId = 1;
export class ExpandableTextField extends React.Component {
constructor(props) {
super(props);
this.textFieldElement = React.createRef();
this.expandable = React.createRef();
this.collapse = () => {
if (this.expandable.current) {
this.expandable.current.collapse();
}
};
this.expand = () => {
if (this.expandable.current) {
this.expandable.current.expand();
}
};
this.renderCallout = () => {
return this.props.renderCallout(this, this.dropdownId, this.props.anchorElement
? this.props.anchorElement
: !this.props.anchorPoint
? this.containerElement.current
? this.containerElement.current
: undefined
: undefined, this.props.anchorOffset || { horizontal: 0, vertical: 0 }, this.props.anchorOrigin || { horizontal: Location.end, vertical: Location.end }, this.props.anchorPoint, this.props.dropdownOrigin || { horizontal: Location.end, vertical: Location.start });
};
this.dropdownId = props.dropdownId || "dropdown-" + textFieldId++;
this.containerElement = props.containerRef || React.createRef();
}
render() {
return (React.createElement(Expandable, { disabled: this.props.disabled, expandKey: this.props.expandKey, onCollapse: this.props.onCollapse, onExpand: this.props.onExpand, renderCallout: this.renderCallout, ref: this.expandable }, (expandableProps) => {
return (React.createElement(FocusWithin, { onFocus: this.props.onFocus, onBlur: this.props.onBlur }, (focusStatus) => (React.createElement("div", { className: css(this.props.className, "bolt-expandable-textfield"), onBlur: () => {
if (this.props.blurDismiss) {
this.collapse();
}
focusStatus.onBlur && focusStatus.onBlur();
}, onFocus: (event) => {
focusStatus.onFocus && focusStatus.onFocus(event);
// If the top-level component recieves focus, set focus to the text field.
if (event.target === this.containerElement.current) {
this.focus();
}
}, onMouseDown: expandableProps.onMouseDown, onKeyDown: expandableProps.onKeyDown, ref: this.containerElement, tabIndex: -1, role: this.props.role },
React.createElement(TextField, Object.assign({ ariaHasPopup: "dialog" }, this.props, { ariaActiveDescendant: expandableProps.expanded ? this.props.ariaActiveDescendant : undefined, role: this.props.editable ? "combobox" : undefined, ariaExpanded: expandableProps.expanded, ariaControls: expandableProps.expanded ? this.dropdownId : undefined, className: "", onClick: expandableProps.onClick, ref: this.textFieldElement, suffixIconProps: !this.props.hideDropdownIcon
? {
key: "dropdown-icon",
className: css("bolt-expandable-textfield-icon icon-right", this.props.disabled && "disabled"),
iconName: "ChevronDownMed",
onClick: expandableProps.onClick,
size: IconSize.small
}
: undefined }))))));
}));
}
focus() {
if (this.textFieldElement.current) {
this.textFieldElement.current.focus();
}
}
select() {
if (this.textFieldElement.current) {
this.textFieldElement.current.select();
}
}
}
ExpandableTextField.defaultProps = {
expandKey: [KeyCode.downArrow, KeyCode.enter]
};