azure-devops-ui
Version:
React components for building web UI in Azure DevOps
53 lines (52 loc) • 2.9 kB
JavaScript
import "../../CommonImports";
import "../../Core/core.css";
import "./Menu.css";
import "./MenuButton.css";
import * as React from "react";
import { ExpandableButton } from '../../Button';
import { ContextualMenu } from "./Menu";
let buttonId = 1;
export class MenuButton extends React.Component {
constructor(props) {
super(props);
this.dropdownButton = React.createRef();
this.expand = () => {
if (this.dropdownButton.current) {
this.dropdownButton.current.expand();
}
};
this.collapse = () => {
if (this.dropdownButton.current) {
this.dropdownButton.current.collapse();
}
};
this.renderMenu = (dropdown, dropdownId, anchorElement, anchorOffset, anchorOrigin, anchorPoint, dropdownOrigin) => {
const contextualMenuProps = typeof this.props.contextualMenuProps === "function" ? this.props.contextualMenuProps() : this.props.contextualMenuProps;
return (React.createElement(ContextualMenu, { anchorElement: anchorElement, anchorOffset: contextualMenuProps.anchorOffset || anchorOffset, anchorOrigin: contextualMenuProps.anchorOrigin || anchorOrigin, anchorPoint: contextualMenuProps.anchorPoint || anchorPoint, fixedLayout: contextualMenuProps.fixedLayout, menuOrigin: contextualMenuProps.menuOrigin || dropdownOrigin, menuProps: contextualMenuProps.menuProps, className: contextualMenuProps.className, onActivate: (menuItem, event) => {
if (contextualMenuProps.onActivate) {
contextualMenuProps.onActivate(menuItem, event);
}
dropdown.collapse();
}, onDismiss: dropdown.collapse }));
};
this.state = {
id: this.props.id || "menu-button-" + buttonId++
};
}
render() {
var _a;
const { hideDropdownIcon } = this.props;
const contextualMenuProps = typeof this.props.contextualMenuProps === "function" ? this.props.contextualMenuProps() : this.props.contextualMenuProps;
return (React.createElement(ExpandableButton, Object.assign({}, Object.assign(Object.assign({}, this.props), { menuProps: contextualMenuProps.menuProps }), { dropdownId: (_a = contextualMenuProps === null || contextualMenuProps === void 0 ? void 0 : contextualMenuProps.menuProps) === null || _a === void 0 ? void 0 : _a.id, hideDropdownIcon: hideDropdownIcon, id: this.state.id, ref: this.dropdownButton, renderCallout: this.renderMenu }), this.props.children));
}
focus() {
if (this.dropdownButton.current) {
this.dropdownButton.current.focus();
}
}
setTabIndex(index) {
if (this.dropdownButton.current) {
this.dropdownButton.current.setTabIndex(index);
}
}
}