@zextras/carbonio-shell-ui/lib/shell/creation-button.js

The Zextras Carbonio web client

"use strict";
/*
 * SPDX-FileCopyrightText: 2022 Zextras <https://www.zextras.com>
 *
 * SPDX-License-Identifier: AGPL-3.0-only
 */
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.CreationButton = exports.CreationButtonComponent = void 0;
const react_1 = __importStar(require("react"));
const carbonio_design_system_1 = require("@zextras/carbonio-design-system");
const lodash_1 = require("lodash");
const react_router_dom_1 = require("react-router-dom");
const constants_1 = require("../constants");
const hooks_1 = require("../history/hooks");
const app_1 = require("../store/app");
const hooks_2 = require("../store/i18n/hooks");
const hooks_3 = require("../store/integrations/hooks");
const CreationButtonComponent = ({ activeRoute, location }) => {
    const t = (0, hooks_2.getT)();
    const actions = (0, hooks_3.useActions)({ activeRoute, location }, constants_1.ACTION_TYPES.NEW);
    const actionsDropdownItems = (0, react_1.useMemo)(() => actions.map(({ execute, ...rest }) => ({ onClick: execute, ...rest })), [actions]);
    const [open, setOpen] = (0, react_1.useState)(false);
    const primaryAction = (0, react_1.useMemo)(() => (0, lodash_1.find)(actionsDropdownItems, (action) => (action.group === activeRoute?.id || action.group === activeRoute?.app) &&
        action.primary === true), [actionsDropdownItems, activeRoute?.app, activeRoute?.id]);
    const apps = (0, app_1.useAppList)();
    const actionsDropdownItemsByGroup = (0, react_1.useMemo)(() => actionsDropdownItems.reduce((accumulator, { group = '', primary: _, ...actionDropdownItem }) => {
        if (!(group in accumulator)) {
            accumulator[group] = [];
        }
        accumulator[group].push(actionDropdownItem);
        return accumulator;
    }, {}), [actionsDropdownItems]);
    const secondaryActions = (0, react_1.useMemo)(() => [
        ...(actionsDropdownItemsByGroup[activeRoute?.app ?? ''] ?? []),
        ...(0, lodash_1.reduce)(apps, (acc, app, i) => {
            if (app.name !== activeRoute?.app && actionsDropdownItemsByGroup[app.name]?.length > 0) {
                acc.push({ type: 'divider', id: `divider-${i}` }, ...actionsDropdownItemsByGroup[app.name]);
            }
            return acc;
        }, [])
    ], [activeRoute?.app, apps, actionsDropdownItemsByGroup]);
    const onClose = (0, react_1.useCallback)(() => {
        setOpen(false);
    }, []);
    const onOpen = (0, react_1.useCallback)(() => {
        setOpen(true);
    }, []);
    return primaryAction ? (react_1.default.createElement(carbonio_design_system_1.Container, { minWidth: "80px" },
        react_1.default.createElement(carbonio_design_system_1.MultiButton, { "data-testid": "NewItemButton", size: "extralarge", background: 'primary', label: t('new', 'New'), onClick: primaryAction.onClick, items: secondaryActions, disabledPrimary: !primaryAction || primaryAction?.disabled, disabledSecondary: !secondaryActions?.length }))) : (react_1.default.createElement(carbonio_design_system_1.Dropdown, { items: secondaryActions, onClose: onClose, onOpen: onOpen },
        react_1.default.createElement(carbonio_design_system_1.Button, { "data-testid": "NewItemButton", size: "extralarge", backgroundColor: "primary", label: t('new', 'New'), icon: open ? 'ChevronUp' : 'ChevronDown', onClick: lodash_1.noop })));
};
exports.CreationButtonComponent = CreationButtonComponent;
const MemoCreationButton = react_1.default.memo(exports.CreationButtonComponent);
const CreationButton = () => {
    const locationFull = (0, react_router_dom_1.useLocation)();
    const activeRoute = (0, hooks_1.useCurrentRoute)();
    const truncateLocation = (location) => ({
        ...location,
        pathname: location?.pathname?.split('/').slice(0, 2).join('/'),
        key: ''
    });
    const location = (0, react_1.useMemo)(() => truncateLocation(locationFull), [locationFull]);
    return react_1.default.createElement(MemoCreationButton, { activeRoute: activeRoute, location: location });
};
exports.CreationButton = CreationButton;
//# sourceMappingURL=creation-button.js.map