Stefan Hacker
89 lines
5.9 KiB
JavaScript
89 lines
5.9 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.ContextualMenuButton = void 0;
|
|
var tslib_1 = require("tslib");
|
|
var React = require("react");
|
|
var Utilities_1 = require("../../../Utilities");
|
|
var ContextualMenuItemWrapper_1 = require("./ContextualMenuItemWrapper");
|
|
var KeytipData_1 = require("../../../KeytipData");
|
|
var index_1 = require("../../../utilities/contextualMenu/index");
|
|
var ContextualMenuItem_1 = require("../ContextualMenuItem");
|
|
var ContextualMenuButton = /** @class */ (function (_super) {
|
|
tslib_1.__extends(ContextualMenuButton, _super);
|
|
function ContextualMenuButton() {
|
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
_this._btn = React.createRef();
|
|
_this._getMemoizedMenuButtonKeytipProps = (0, Utilities_1.memoizeFunction)(function (keytipProps) {
|
|
return tslib_1.__assign(tslib_1.__assign({}, keytipProps), { hasMenu: true });
|
|
});
|
|
_this._renderAriaDescription = function (ariaDescription, className) {
|
|
// If ariaDescription is given, descriptionId will be assigned to ariaDescriptionSpan
|
|
return ariaDescription ? (React.createElement("span", { id: _this._ariaDescriptionId, className: className }, ariaDescription)) : null;
|
|
};
|
|
_this._getSubmenuTarget = function () {
|
|
return _this._btn.current ? _this._btn.current : undefined;
|
|
};
|
|
return _this;
|
|
}
|
|
ContextualMenuButton.prototype.render = function () {
|
|
var _this = this;
|
|
var _a = this.props, item = _a.item, classNames = _a.classNames, index = _a.index, focusableElementIndex = _a.focusableElementIndex, totalItemCount = _a.totalItemCount, hasCheckmarks = _a.hasCheckmarks, hasIcons = _a.hasIcons, contextualMenuItemAs = _a.contextualMenuItemAs, expandedMenuItemKey = _a.expandedMenuItemKey, onItemMouseDown = _a.onItemMouseDown, onItemClick = _a.onItemClick, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;
|
|
var ChildrenRenderer = ContextualMenuItem_1.ContextualMenuItem;
|
|
if (item.contextualMenuItemAs) {
|
|
ChildrenRenderer = (0, Utilities_1.composeComponentAs)(item.contextualMenuItemAs, ChildrenRenderer);
|
|
}
|
|
if (contextualMenuItemAs) {
|
|
ChildrenRenderer = (0, Utilities_1.composeComponentAs)(contextualMenuItemAs, ChildrenRenderer);
|
|
}
|
|
var isChecked = (0, index_1.getIsChecked)(item);
|
|
var canCheck = isChecked !== null;
|
|
var defaultRole = (0, index_1.getMenuItemAriaRole)(item);
|
|
var itemHasSubmenu = (0, index_1.hasSubmenu)(item);
|
|
var itemProps = item.itemProps, ariaLabel = item.ariaLabel, ariaDescription = item.ariaDescription;
|
|
var buttonNativeProperties = (0, Utilities_1.getNativeProps)(item, Utilities_1.buttonProperties);
|
|
// Do not add the disabled attribute to the button so that it is focusable
|
|
delete buttonNativeProperties.disabled;
|
|
var itemRole = item.role || defaultRole;
|
|
// Check for ariaDescription to set the _ariaDescriptionId and render a hidden span with
|
|
// the description in it to be added to ariaDescribedBy
|
|
if (ariaDescription) {
|
|
this._ariaDescriptionId = (0, Utilities_1.getId)();
|
|
}
|
|
var ariaDescribedByIds = (0, Utilities_1.mergeAriaAttributeValues)(item.ariaDescribedBy, ariaDescription ? this._ariaDescriptionId : undefined, buttonNativeProperties['aria-describedby']);
|
|
var itemButtonProperties = {
|
|
className: classNames.root,
|
|
onClick: this._onItemClick,
|
|
onKeyDown: itemHasSubmenu ? this._onItemKeyDown : undefined,
|
|
onMouseEnter: this._onItemMouseEnter,
|
|
onMouseLeave: this._onItemMouseLeave,
|
|
onMouseDown: function (ev) {
|
|
return onItemMouseDown ? onItemMouseDown(item, ev) : undefined;
|
|
},
|
|
onMouseMove: this._onItemMouseMove,
|
|
href: item.href,
|
|
title: item.title,
|
|
'aria-label': ariaLabel,
|
|
'aria-describedby': ariaDescribedByIds,
|
|
'aria-haspopup': itemHasSubmenu || undefined,
|
|
'aria-expanded': itemHasSubmenu ? item.key === expandedMenuItemKey : undefined,
|
|
'aria-posinset': focusableElementIndex + 1,
|
|
'aria-setsize': totalItemCount,
|
|
'aria-disabled': (0, index_1.isItemDisabled)(item),
|
|
'aria-checked': (itemRole === 'menuitemcheckbox' || itemRole === 'menuitemradio') && canCheck ? !!isChecked : undefined,
|
|
'aria-selected': itemRole === 'menuitem' && canCheck ? !!isChecked : undefined,
|
|
role: itemRole,
|
|
// eslint-disable-next-line @typescript-eslint/no-deprecated
|
|
style: item.style,
|
|
};
|
|
var keytipProps = item.keytipProps;
|
|
if (keytipProps && itemHasSubmenu) {
|
|
keytipProps = this._getMemoizedMenuButtonKeytipProps(keytipProps);
|
|
}
|
|
return (React.createElement(KeytipData_1.KeytipData, { keytipProps: keytipProps, ariaDescribedBy: ariaDescribedByIds, disabled: (0, index_1.isItemDisabled)(item) }, function (keytipAttributes) { return (React.createElement("button", tslib_1.__assign({ ref: _this._btn }, buttonNativeProperties, itemButtonProperties, keytipAttributes),
|
|
React.createElement(ChildrenRenderer, tslib_1.__assign({ componentRef: item.componentRef, item: item, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick : undefined, hasIcons: hasIcons, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: _this._getSubmenuTarget }, itemProps)),
|
|
_this._renderAriaDescription(ariaDescription, classNames.screenReaderText))); }));
|
|
};
|
|
return ContextualMenuButton;
|
|
}(ContextualMenuItemWrapper_1.ContextualMenuItemWrapper));
|
|
exports.ContextualMenuButton = ContextualMenuButton;
|
|
//# sourceMappingURL=ContextualMenuButton.js.map
|