Stefan Hacker
101 lines
5.5 KiB
JavaScript
101 lines
5.5 KiB
JavaScript
import { __assign } from "tslib";
|
|
import * as React from 'react';
|
|
import { KeytipManager } from '../../utilities/keytips/KeytipManager';
|
|
import { useConst, usePrevious } from '@fluentui/react-hooks';
|
|
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 = 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
|
|
}, []);
|
|
};
|
|
export var OverflowButton = function (props) {
|
|
var keytipManager = KeytipManager.getInstance();
|
|
var className = props.className, overflowItems = props.overflowItems, keytipSequences = props.keytipSequences, itemSubMenuProvider = props.itemSubMenuProvider, onRenderOverflowButton = props.onRenderOverflowButton;
|
|
var persistedKeytips = 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 = __assign(__assign({}, overflowItem), { keytipProps: __assign(__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));
|
|
};
|
|
//# sourceMappingURL=OverflowButton.js.map
|