@fluentui/react/lib/components/OverflowSet/OverflowButton.js

Reusable React components for building web experiences.

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