office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
171 lines • 10.5 kB
JavaScript
import * as tslib_1 from "tslib";
import * as React from 'react';
import { assign, buttonProperties, getNativeProps, mergeAriaAttributeValues } from '../../../Utilities';
import { ContextualMenuItem } from '../ContextualMenuItem';
import { getSplitButtonVerticalDividerClassNames } from '../ContextualMenu.classNames';
import { KeytipData } from '../../../KeytipData';
import { isItemDisabled, hasSubmenu } from '../../../utilities/contextualMenu/index';
import { VerticalDivider } from '../../../Divider';
import { ContextualMenuItemWrapper } from './ContextualMenuItemWrapper';
var TouchIdleDelay = 500; /* ms */
var ContextualMenuSplitButton = /** @class */ (function (_super) {
tslib_1.__extends(ContextualMenuSplitButton, _super);
function ContextualMenuSplitButton() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this._onItemKeyDown = function (ev) {
var _a = _this.props, item = _a.item, onItemKeyDown = _a.onItemKeyDown;
if (ev.which === 13 /* enter */) {
_this._executeItemClick(ev);
ev.preventDefault();
ev.stopPropagation();
}
else if (onItemKeyDown) {
onItemKeyDown(item, ev);
}
};
_this._getSubmenuTarget = function () {
return _this._splitButton;
};
_this._onItemMouseEnterPrimary = function (ev) {
var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;
if (onItemMouseEnter) {
onItemMouseEnter(tslib_1.__assign({}, item, { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);
}
};
_this._onItemMouseEnterIcon = function (ev) {
var _a = _this.props, item = _a.item, onItemMouseEnter = _a.onItemMouseEnter;
if (onItemMouseEnter) {
onItemMouseEnter(item, ev, _this._splitButton);
}
};
_this._onItemMouseMovePrimary = function (ev) {
var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;
if (onItemMouseMove) {
onItemMouseMove(tslib_1.__assign({}, item, { subMenuProps: undefined, items: undefined }), ev, _this._splitButton);
}
};
_this._onItemMouseMoveIcon = function (ev) {
var _a = _this.props, item = _a.item, onItemMouseMove = _a.onItemMouseMove;
if (onItemMouseMove) {
onItemMouseMove(item, ev, _this._splitButton);
}
};
_this._onIconItemClick = function (ev) {
var _a = _this.props, item = _a.item, onItemClickBase = _a.onItemClickBase;
if (onItemClickBase) {
onItemClickBase(item, ev, (_this._splitButton ? _this._splitButton : ev.currentTarget));
}
};
_this._executeItemClick = function (ev) {
var _a = _this.props, item = _a.item, executeItemClick = _a.executeItemClick, onItemClick = _a.onItemClick;
if (item.disabled || item.isDisabled) {
return;
}
if (_this._processingTouch && onItemClick) {
return onItemClick(item, ev);
}
if (executeItemClick) {
executeItemClick(item, ev);
}
};
_this._onTouchStart = function (ev) {
if (_this._splitButton && !('onpointerdown' in _this._splitButton)) {
_this._handleTouchAndPointerEvent(ev);
}
};
_this._onPointerDown = function (ev) {
if (ev.pointerType === 'touch') {
_this._handleTouchAndPointerEvent(ev);
ev.preventDefault();
ev.stopImmediatePropagation();
}
};
return _this;
}
ContextualMenuSplitButton.prototype.componentDidMount = function () {
if (this._splitButton && 'onpointerdown' in this._splitButton) {
this._events.on(this._splitButton, 'pointerdown', this._onPointerDown, true);
}
};
ContextualMenuSplitButton.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, onItemMouseLeave = _a.onItemMouseLeave, expandedMenuItemKey = _a.expandedMenuItemKey;
var itemHasSubmenu = hasSubmenu(item);
var keytipProps = item.keytipProps;
if (keytipProps) {
keytipProps = tslib_1.__assign({}, keytipProps, { hasMenu: true });
}
return (React.createElement(KeytipData, { keytipProps: keytipProps, disabled: isItemDisabled(item) }, function (keytipAttributes) { return (React.createElement("div", { "data-ktp-target": keytipAttributes['data-ktp-target'], ref: function (splitButton) { return (_this._splitButton = splitButton); }, role: 'menuitem', "aria-label": item.ariaLabel, className: classNames.splitContainer, "aria-disabled": isItemDisabled(item), "aria-expanded": itemHasSubmenu ? item.key === expandedMenuItemKey : undefined, "aria-haspopup": true, "aria-describedby": mergeAriaAttributeValues(item.ariaDescription, keytipAttributes['aria-describedby']), "aria-checked": item.isChecked || item.checked, "aria-posinset": focusableElementIndex + 1, "aria-setsize": totalItemCount, onMouseEnter: _this._onItemMouseEnterPrimary, onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(_this, tslib_1.__assign({}, item, { subMenuProps: null, items: null })) : undefined, onMouseMove: _this._onItemMouseMovePrimary, onKeyDown: _this._onItemKeyDown, onClick: _this._executeItemClick, onTouchStart: _this._onTouchStart, tabIndex: 0, "data-is-focusable": true, "aria-roledescription": item['aria-roledescription'] },
_this._renderSplitPrimaryButton(item, classNames, index, hasCheckmarks, hasIcons),
_this._renderSplitDivider(item),
_this._renderSplitIconButton(item, classNames, index, keytipAttributes))); }));
};
ContextualMenuSplitButton.prototype._renderSplitPrimaryButton = function (item, classNames, index, hasCheckmarks, hasIcons) {
var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemClick = _a.onItemClick;
var itemProps = {
key: item.key,
disabled: isItemDisabled(item) || item.primaryDisabled,
name: item.name,
text: item.text || item.name,
className: classNames.splitPrimary,
canCheck: item.canCheck,
isChecked: item.isChecked,
checked: item.checked,
iconProps: item.iconProps,
'data-is-focusable': false,
'aria-hidden': true
};
var itemComponentProps = item.itemProps;
return (React.createElement("button", tslib_1.__assign({}, getNativeProps(itemProps, buttonProperties)),
React.createElement(ChildrenRenderer, tslib_1.__assign({ "data-is-focusable": false, item: itemProps, classNames: classNames, index: index, onCheckmarkClick: hasCheckmarks && onItemClick ? onItemClick.bind(this, item) : undefined, hasIcons: hasIcons }, itemComponentProps))));
};
ContextualMenuSplitButton.prototype._renderSplitDivider = function (item) {
var getDividerClassNames = item.getSplitButtonVerticalDividerClassNames || getSplitButtonVerticalDividerClassNames;
return React.createElement(VerticalDivider, { getClassNames: getDividerClassNames });
};
ContextualMenuSplitButton.prototype._renderSplitIconButton = function (item, classNames, index, keytipAttributes) {
var _a = this.props, _b = _a.contextualMenuItemAs, ChildrenRenderer = _b === void 0 ? ContextualMenuItem : _b, onItemMouseLeave = _a.onItemMouseLeave, onItemMouseDown = _a.onItemMouseDown, openSubMenu = _a.openSubMenu, dismissSubMenu = _a.dismissSubMenu, dismissMenu = _a.dismissMenu;
var itemProps = {
onClick: this._onIconItemClick,
disabled: isItemDisabled(item),
className: classNames.splitMenu,
subMenuProps: item.subMenuProps,
submenuIconProps: item.submenuIconProps,
split: true,
key: item.key
};
var buttonProps = assign({}, getNativeProps(itemProps, buttonProperties), {
onMouseEnter: this._onItemMouseEnterIcon,
onMouseLeave: onItemMouseLeave ? onItemMouseLeave.bind(this, item) : undefined,
onMouseDown: function (ev) { return (onItemMouseDown ? onItemMouseDown(item, ev) : undefined); },
onMouseMove: this._onItemMouseMoveIcon,
'data-is-focusable': false,
'data-ktp-execute-target': keytipAttributes['data-ktp-execute-target'],
'aria-hidden': true
});
var itemComponentProps = item.itemProps;
return (React.createElement("button", tslib_1.__assign({}, buttonProps),
React.createElement(ChildrenRenderer, tslib_1.__assign({ componentRef: item.componentRef, item: itemProps, classNames: classNames, index: index, hasIcons: false, openSubMenu: openSubMenu, dismissSubMenu: dismissSubMenu, dismissMenu: dismissMenu, getSubmenuTarget: this._getSubmenuTarget }, itemComponentProps))));
};
ContextualMenuSplitButton.prototype._handleTouchAndPointerEvent = function (ev) {
var _this = this;
var onTap = this.props.onTap;
if (onTap) {
onTap(ev);
}
// If we already have an existing timeout from a previous touch/pointer event
// cancel that timeout so we can set a new one.
if (this._lastTouchTimeoutId) {
this._async.clearTimeout(this._lastTouchTimeoutId);
this._lastTouchTimeoutId = undefined;
}
this._processingTouch = true;
this._lastTouchTimeoutId = this._async.setTimeout(function () {
_this._processingTouch = false;
_this._lastTouchTimeoutId = undefined;
}, TouchIdleDelay);
};
return ContextualMenuSplitButton;
}(ContextualMenuItemWrapper));
export { ContextualMenuSplitButton };
//# sourceMappingURL=ContextualMenuSplitButton.js.map