@fluentui/react
Version:
Reusable React components for building web experiences.
103 lines • 6.21 kB
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