@fluentui/react
Version:
Reusable React components for building web experiences.
82 lines • 4.62 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import { KeytipManager } from '../../utilities/keytips/KeytipManager';
import { useConst } from '@fluentui/react-hooks';
var useKeytipRegistrations = function (persistedKeytips, keytipManager) {
React.useEffect(function () {
Object.keys(persistedKeytips).forEach(function (keytipId) {
var keytip = persistedKeytips[keytipId];
var uniqueID = keytipManager.register(keytip, true);
// Update map
persistedKeytips[uniqueID] = keytip;
delete persistedKeytips[keytipId];
});
return function () {
// Delete all persisted keytips saved
Object.keys(persistedKeytips).forEach(function (uniqueID) {
keytipManager.unregister(persistedKeytips[uniqueID], uniqueID, true);
delete persistedKeytips[uniqueID];
});
};
}, [persistedKeytips, keytipManager]);
};
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 newOverflowItems = React.useMemo(function () {
var currentOverflowItems = [];
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);
}
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
persistedKeytips[persistedKeytip.content] = persistedKeytip;
// Add the overflow sequence to this item
var newOverflowItem = __assign(__assign({}, overflowItem), { keytipProps: __assign(__assign({}, keytip), { overflowSetSequence: keytipSequences }) });
currentOverflowItems === null || currentOverflowItems === void 0 ? void 0 : currentOverflowItems.push(newOverflowItem);
}
else {
// Nothing to change, add overflowItem to list
currentOverflowItems === null || currentOverflowItems === void 0 ? void 0 : currentOverflowItems.push(overflowItem);
}
});
}
else {
currentOverflowItems = overflowItems;
}
return currentOverflowItems;
}, [overflowItems, getSubMenuForItem, keytipManager, keytipSequences, persistedKeytips]);
useKeytipRegistrations(persistedKeytips, keytipManager);
return React.createElement("div", { className: className }, onRenderOverflowButton(newOverflowItems));
};
//# sourceMappingURL=OverflowButton.js.map