@zextras/carbonio-shell-ui/lib/utility-bar/bar.js

The Zextras Carbonio web client

"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
    var ownKeys = function(o) {
        ownKeys = Object.getOwnPropertyNames || function (o) {
            var ar = [];
            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
            return ar;
        };
        return ownKeys(o);
    };
    return function (mod) {
        if (mod && mod.__esModule) return mod;
        var result = {};
        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
        __setModuleDefault(result, mod);
        return result;
    };
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.ShellUtilityBar = void 0;
/*
 * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
const react_1 = __importStar(require("react"));
const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
const lodash_1 = require("lodash");
const store_1 = require("./store");
const utils_1 = require("./utils");
const constants_1 = require("../constants");
const logout_1 = require("../network/logout");
const account_1 = require("../store/account");
const hooks_1 = require("../store/i18n/hooks");
const hooks_2 = require("../store/integrations/hooks");
const tracker_1 = require("../tracker/tracker");
const UtilityBarItem = ({ view }) => {
    const { mode, setMode, current, setCurrent } = (0, store_1.useUtilityBarStore)();
    const onClick = (0, react_1.useCallback)(() => {
        setMode((current !== view.id && 'open') || (mode !== 'open' && 'open') || 'closed');
        setCurrent(view.id);
    }, [current, mode, setCurrent, setMode, view.id]);
    if (typeof view.button === 'string') {
        return (react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: view.label, placement: "bottom-end" },
            react_1.default.createElement(carbonio_design_system_1.IconButton, { icon: view.button, iconColor: current === view.id ? 'primary' : 'text', onClick: onClick, size: "large" })));
    }
    return react_1.default.createElement(view.button, { mode: mode, setMode: setMode });
};
const ShellUtilityBar = () => {
    const views = (0, utils_1.useUtilityViews)();
    const t = (0, hooks_1.getT)();
    const account = (0, account_1.useAccountStore)((s) => s.account);
    const updateViews = (0, react_1.useCallback)(() => {
        const updateViewEvent = new CustomEvent(constants_1.CUSTOM_EVENTS.updateView);
        window.dispatchEvent(updateViewEvent);
    }, []);
    const { reset } = (0, tracker_1.useTracker)();
    const actions = (0, hooks_2.useActions)(undefined, constants_1.ACTION_TYPES.ACCOUNT_MENU);
    const accountMenuItems = (0, react_1.useMemo)(() => actions
        .toSorted((a, b) => a.position - b.position)
        .map(({ execute, position: _position, ...action }) => ({
        onClick: execute,
        ...action
    })), [actions]);
    const accountItems = (0, react_1.useMemo)(() => [
        {
            id: 'account',
            label: account?.displayName ?? 'Account',
            disabled: true
        },
        {
            id: 'email',
            label: account?.name ?? '',
            disabled: true
        },
        {
            type: 'divider',
            id: 'divider',
            label: 'divider'
        },
        {
            id: 'update',
            label: t('label.update_view', 'Update view'),
            onClick: updateViews,
            icon: 'Refresh'
        },
        ...accountMenuItems,
        {
            id: 'docs',
            label: t('label.documentation', 'Documentation'),
            onClick: lodash_1.noop,
            disabled: true,
            icon: 'InfoOutline'
        },
        {
            id: 'logout',
            label: t('label.logout', 'Logout'),
            onClick: () => {
                reset();
                (0, logout_1.logout)();
            },
            icon: 'LogOut'
        }
    ], [account?.displayName, account?.name, accountMenuItems, reset, t, updateViews]);
    const viewItems = (0, react_1.useMemo)(() => (0, lodash_1.map)(views, (view) => react_1.default.createElement(UtilityBarItem, { view: view, key: view.id })), [views]);
    return (react_1.default.createElement(carbonio_design_system_1.Container, { orientation: "horizontal", width: "fit" },
        viewItems,
        react_1.default.createElement(carbonio_design_system_1.Tooltip, { label: account?.displayName ?? account?.name, placement: "bottom-end" },
            react_1.default.createElement(carbonio_design_system_1.Dropdown, { items: accountItems, maxWidth: "18.75rem", disableAutoFocus: true },
                react_1.default.createElement(carbonio_design_system_1.IconButton, { icon: "PersonOutline", size: "large", onClick: lodash_1.noop })))));
};
exports.ShellUtilityBar = ShellUtilityBar;
//# sourceMappingURL=bar.js.map