office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
174 lines • 9.17 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var React = require("react");
var Utilities_1 = require("../../Utilities");
var Styling_1 = require("../../Styling");
var FocusZone_1 = require("../../FocusZone");
var KeytipManager_1 = require("../../utilities/keytips/KeytipManager");
var stylesImport = require("./OverflowSet.scss");
var styles = stylesImport;
var OverflowSet = /** @class */ (function (_super) {
tslib_1.__extends(OverflowSet, _super);
function OverflowSet(props) {
var _this = _super.call(this, props) || this;
_this._focusZone = Utilities_1.createRef();
_this._persistedKeytips = {};
_this._keytipManager = KeytipManager_1.KeytipManager.getInstance();
_this._divContainer = Utilities_1.createRef();
_this._onRenderItems = function (items) {
return items.map(function (item, i) {
var wrapperDivProps = { className: Utilities_1.css('ms-OverflowSet-item', styles.item) };
return (React.createElement("div", tslib_1.__assign({ key: item.key }, wrapperDivProps), _this.props.onRenderItem(item)));
});
};
_this._onRenderOverflowButtonWrapper = function (items) {
var wrapperDivProps = { className: Utilities_1.css('ms-OverflowSet-overflowButton', styles.item) };
var overflowKeytipSequences = _this.props.keytipSequences;
var newOverflowItems = [];
if (overflowKeytipSequences) {
items.forEach(function (overflowItem) {
var keytip = overflowItem.keytipProps;
if (keytip) {
// Create persisted keytip
var persistedKeytip = {
content: keytip.content,
keySequences: keytip.keySequences,
disabled: keytip.disabled || !!(overflowItem.disabled || overflowItem.isDisabled)
};
if (keytip.hasDynamicChildren || _this._getSubMenuForItem(overflowItem)) {
// If the keytip has a submenu or children nodes, change onExecute to persistedKeytipExecute
persistedKeytip.onExecute = _this._keytipManager.menuExecute.bind(_this._keytipManager, overflowKeytipSequences, overflowItem.keytipProps.keySequences);
}
else {
// If the keytip doesn't have a submenu, just execute the original function
persistedKeytip.onExecute = keytip.onExecute;
}
// Add this persisted keytip to our internal list, use a temporary uniqueID (its content)
// uniqueID will get updated on register
_this._persistedKeytips[persistedKeytip.content] = persistedKeytip;
// Add the overflow sequence to this item
var newOverflowItem = tslib_1.__assign({}, overflowItem, { keytipProps: tslib_1.__assign({}, keytip, { overflowSetSequence: overflowKeytipSequences }) });
newOverflowItems.push(newOverflowItem);
}
else {
// Nothing to change, add overflowItem to list
newOverflowItems.push(overflowItem);
}
});
}
else {
newOverflowItems = items;
}
return (React.createElement("div", tslib_1.__assign({}, wrapperDivProps), _this.props.onRenderOverflowButton(newOverflowItems)));
};
if (props.doNotContainWithinFocusZone) {
_this._warnMutuallyExclusive({
'doNotContainWithinFocusZone': 'focusZoneProps'
});
}
return _this;
}
OverflowSet.prototype.render = function () {
var _a = this.props, items = _a.items, overflowItems = _a.overflowItems, className = _a.className, focusZoneProps = _a.focusZoneProps, _b = _a.vertical, vertical = _b === void 0 ? false : _b, _c = _a.role, role = _c === void 0 ? 'menubar' : _c, doNotContainWithinFocusZone = _a.doNotContainWithinFocusZone;
var Tag;
var uniqueComponentProps;
if (doNotContainWithinFocusZone) {
Tag = 'div';
uniqueComponentProps = tslib_1.__assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), { ref: this._divContainer });
}
else {
Tag = FocusZone_1.FocusZone;
uniqueComponentProps = tslib_1.__assign({}, Utilities_1.getNativeProps(this.props, Utilities_1.divProperties), focusZoneProps, { componentRef: this._focusZone, direction: vertical ? FocusZone_1.FocusZoneDirection.vertical : FocusZone_1.FocusZoneDirection.horizontal });
}
return (React.createElement(Tag, tslib_1.__assign({}, uniqueComponentProps, { className: Styling_1.mergeStyles('ms-OverflowSet', styles.root, vertical && styles.rootVertical, className), role: role }),
items && this._onRenderItems(items),
overflowItems && overflowItems.length > 0 && this._onRenderOverflowButtonWrapper(overflowItems)));
};
/**
* Sets focus to the first tabbable item in the OverflowSet.
* @param {boolean} forceIntoFirstElement If true, focus will be forced into the first element,
* even if focus is already in theOverflowSet
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
OverflowSet.prototype.focus = function (forceIntoFirstElement) {
var focusSucceeded = false;
if (this.props.doNotContainWithinFocusZone) {
if (this._divContainer.current) {
focusSucceeded = Utilities_1.focusFirstChild(this._divContainer.current);
}
}
else if (this._focusZone.current) {
focusSucceeded = this._focusZone.current.focus(forceIntoFirstElement);
}
return focusSucceeded;
};
/**
* Sets focus to a specific child element within the OverflowSet.
* @param {HTMLElement} childElement The child element within the zone to focus.
* @returns True if focus could be set to an active element, false if no operation was taken.
*/
OverflowSet.prototype.focusElement = function (childElement) {
var focusSucceeded = false;
if (!childElement) {
return false;
}
if (this.props.doNotContainWithinFocusZone) {
if (this._divContainer.current && Utilities_1.elementContains(this._divContainer.current, childElement)) {
childElement.focus();
focusSucceeded = document.activeElement === childElement;
}
}
else if (this._focusZone.current) {
focusSucceeded = this._focusZone.current.focusElement(childElement);
}
return focusSucceeded;
};
// Add keytip register/unregister handlers to lifecycle functions to correctly manage persisted keytips
OverflowSet.prototype.componentDidMount = function () {
this._registerPersistedKeytips();
};
OverflowSet.prototype.componentWillUnmount = function () {
this._unregisterPersistedKeytips();
};
OverflowSet.prototype.componentWillUpdate = function () {
this._unregisterPersistedKeytips();
};
OverflowSet.prototype.componentDidUpdate = function () {
this._registerPersistedKeytips();
};
OverflowSet.prototype._registerPersistedKeytips = function () {
var _this = this;
Object.keys(this._persistedKeytips).forEach(function (key) {
var keytip = _this._persistedKeytips[key];
var uniqueID = _this._keytipManager.register(keytip, true);
// Update map
_this._persistedKeytips[uniqueID] = keytip;
delete _this._persistedKeytips[key];
});
};
OverflowSet.prototype._unregisterPersistedKeytips = function () {
var _this = this;
// Delete all persisted keytips saved
Object.keys(this._persistedKeytips).forEach(function (uniqueID) {
_this._keytipManager.unregister(_this._persistedKeytips[uniqueID], uniqueID, true);
});
this._persistedKeytips = {};
};
/**
* Gets the subMenu for an overflow item
* Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps
*/
OverflowSet.prototype._getSubMenuForItem = function (item) {
if (this.props.itemSubMenuProvider) {
return this.props.itemSubMenuProvider(item);
}
if (item.subMenuProps) {
return item.subMenuProps.items;
}
return undefined;
};
return OverflowSet;
}(Utilities_1.BaseComponent));
exports.OverflowSet = OverflowSet;
//# sourceMappingURL=OverflowSet.js.map