azure-devops-ui
Version:
React components for building web UI in Azure DevOps
78 lines (77 loc) • 4.32 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Button.css";
import "./ExpandableButton.css";
import * as React from "react";
import { Expandable } from '../../Expandable';
import { Icon, IconSize } from '../../Icon';
import { css, KeyCode } from '../../Util';
import { Location } from '../../Utilities/Position';
import { Button } from "./Button";
let buttonId = 1;
export class ExpandableButton extends React.Component {
constructor(props) {
super(props);
this.buttonElement = 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-" + buttonId++;
this.containerElement = props.containerRef || React.createRef();
}
render() {
// We disable the tooltip when we are expanded. Make sure we dont remove it
// from the component tree, this causes the button element to get regenerated
// and focus wont return.
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) => {
var _a, _b;
return (React.createElement("div", { className: css(this.props.className, "bolt-expandable-button inline-flex-row"), onMouseDown: expandableProps.onMouseDown, onKeyDown: expandableProps.onKeyDown, ref: this.containerElement },
React.createElement(Button, Object.assign({}, this.props, { ariaControls: expandableProps.expanded ? this.dropdownId : undefined, ariaExpanded: expandableProps.expanded, ariaHasPopup: true, ariaLabel: (_a = this.props.ariaLabel) !== null && _a !== void 0 ? _a : (this.props.tooltipProps && this.props.tooltipProps.text ? (_b = this.props.tooltipProps) === null || _b === void 0 ? void 0 : _b.text : ""), className: css(!this.props.text && !this.props.children && this.props.iconProps && "icon-only", expandableProps.expanded && "active", this.props.buttonClassName), onClick: e => {
expandableProps.onClick(e);
if (this.props.onClick) {
this.props.onClick(e);
}
e.preventDefault();
}, ref: this.buttonElement, tooltipProps: this.props.tooltipProps ? Object.assign(Object.assign({}, this.props.tooltipProps), { disabled: expandableProps.expanded }) : undefined }),
this.props.children,
!this.props.hideDropdownIcon
? Icon({
key: "dropdown-icon",
className: "icon-right font-weight-normal",
iconName: "ChevronDownMed",
size: IconSize.small
})
: undefined)));
}));
}
focus() {
if (this.buttonElement.current) {
this.buttonElement.current.focus();
}
}
setTabIndex(index) {
if (this.buttonElement.current) {
this.buttonElement.current.setTabIndex(index);
}
}
}
ExpandableButton.defaultProps = {
expandKey: [KeyCode.downArrow, KeyCode.enter]
};