Stefan Hacker
103 lines
6.1 KiB
JavaScript
103 lines
6.1 KiB
JavaScript
define(["require", "exports", "tslib", "react", "../../utilities/keytips/KeytipManager", "@fluentui/react-hooks"], function (require, exports, tslib_1, React, KeytipManager_1, react_hooks_1) {
|
|
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.OverflowButton = void 0;
|
|
var registerPersistedKeytips = function (keytipsToRegister, keytipManager, registeredPersistedKeytips) {
|
|
for (var _i = 0, keytipsToRegister_1 = keytipsToRegister; _i < keytipsToRegister_1.length; _i++) {
|
|
var keytip = keytipsToRegister_1[_i];
|
|
var uniqueID = keytipManager.register(keytip, true);
|
|
// Update map
|
|
registeredPersistedKeytips[uniqueID] = keytip;
|
|
}
|
|
};
|
|
var unregisterPersistedKeytips = function (keytipManager, registeredPersistedKeytips) {
|
|
for (var _i = 0, _a = Object.keys(registeredPersistedKeytips); _i < _a.length; _i++) {
|
|
var uniqueID = _a[_i];
|
|
keytipManager.unregister(registeredPersistedKeytips[uniqueID], uniqueID, true);
|
|
delete registeredPersistedKeytips[uniqueID];
|
|
}
|
|
};
|
|
var useKeytipRegistrations = function (registeredPersistedKeytips, keytipsToRegister, keytipManager) {
|
|
var prevPersistedKeytips = (0, react_hooks_1.usePrevious)(registeredPersistedKeytips);
|
|
// Update
|
|
React.useEffect(function () {
|
|
if (prevPersistedKeytips) {
|
|
// Unregister old keytips
|
|
unregisterPersistedKeytips(keytipManager, prevPersistedKeytips);
|
|
// Register new keytips
|
|
registerPersistedKeytips(keytipsToRegister, keytipManager, registeredPersistedKeytips);
|
|
}
|
|
});
|
|
// Mount/Unmount
|
|
React.useEffect(function () {
|
|
// Register on mount
|
|
registerPersistedKeytips(keytipsToRegister, keytipManager, registeredPersistedKeytips);
|
|
return function () {
|
|
// Unregister on unmount
|
|
unregisterPersistedKeytips(keytipManager, registeredPersistedKeytips);
|
|
};
|
|
// eslint-disable-next-line react-hooks/exhaustive-deps
|
|
}, []);
|
|
};
|
|
var OverflowButton = function (props) {
|
|
var keytipManager = KeytipManager_1.KeytipManager.getInstance();
|
|
var className = props.className, overflowItems = props.overflowItems, keytipSequences = props.keytipSequences, itemSubMenuProvider = props.itemSubMenuProvider, onRenderOverflowButton = props.onRenderOverflowButton;
|
|
var persistedKeytips = (0, react_hooks_1.useConst)({});
|
|
// Gets the subMenu for an overflow item
|
|
var getSubMenuForItem = React.useCallback(function (item) {
|
|
// Checks if itemSubMenuProvider has been defined, if not defaults to subMenuProps
|
|
if (itemSubMenuProvider) {
|
|
return itemSubMenuProvider(item);
|
|
}
|
|
if (item.subMenuProps) {
|
|
return item.subMenuProps.items;
|
|
}
|
|
return undefined;
|
|
}, [itemSubMenuProvider]);
|
|
var _a = React.useMemo(function () {
|
|
var newKeytipsToRegister = [];
|
|
var newOverflowItems = [];
|
|
if (keytipSequences) {
|
|
overflowItems === null || overflowItems === void 0 ? void 0 : overflowItems.forEach(function (overflowItem) {
|
|
var _a;
|
|
var keytip = overflowItem.keytipProps;
|
|
if (keytip) {
|
|
// Create persisted keytip
|
|
var persistedKeytip = {
|
|
content: keytip.content,
|
|
keySequences: keytip.keySequences,
|
|
disabled: keytip.disabled || !!(overflowItem.disabled || overflowItem.isDisabled),
|
|
hasDynamicChildren: keytip.hasDynamicChildren,
|
|
hasMenu: keytip.hasMenu,
|
|
};
|
|
if (keytip.hasDynamicChildren || getSubMenuForItem(overflowItem)) {
|
|
// If the keytip has a submenu or children nodes, change onExecute to persistedKeytipExecute
|
|
persistedKeytip.onExecute = keytipManager.menuExecute.bind(keytipManager, keytipSequences, (_a = overflowItem === null || overflowItem === void 0 ? void 0 : overflowItem.keytipProps) === null || _a === void 0 ? void 0 : _a.keySequences);
|
|
persistedKeytip.hasOverflowSubMenu = true;
|
|
}
|
|
else {
|
|
// If the keytip doesn't have a submenu, just execute the original function
|
|
persistedKeytip.onExecute = keytip.onExecute;
|
|
}
|
|
newKeytipsToRegister.push(persistedKeytip);
|
|
// Add the overflow sequence to this item
|
|
var newOverflowItem = tslib_1.__assign(tslib_1.__assign({}, overflowItem), { keytipProps: tslib_1.__assign(tslib_1.__assign({}, keytip), { overflowSetSequence: keytipSequences }) });
|
|
newOverflowItems === null || newOverflowItems === void 0 ? void 0 : newOverflowItems.push(newOverflowItem);
|
|
}
|
|
else {
|
|
// Nothing to change, add overflowItem to list
|
|
newOverflowItems === null || newOverflowItems === void 0 ? void 0 : newOverflowItems.push(overflowItem);
|
|
}
|
|
});
|
|
}
|
|
else {
|
|
newOverflowItems = overflowItems;
|
|
}
|
|
return { modifiedOverflowItems: newOverflowItems, keytipsToRegister: newKeytipsToRegister };
|
|
}, [overflowItems, getSubMenuForItem, keytipManager, keytipSequences]), modifiedOverflowItems = _a.modifiedOverflowItems, keytipsToRegister = _a.keytipsToRegister;
|
|
useKeytipRegistrations(persistedKeytips, keytipsToRegister, keytipManager);
|
|
return React.createElement("div", { className: className }, onRenderOverflowButton(modifiedOverflowItems));
|
|
};
|
|
exports.OverflowButton = OverflowButton;
|
|
});
|
|
//# sourceMappingURL=OverflowButton.js.map
|