@jbrowse/core/ui/CascadingMenu.js

JBrowse 2 core libraries used by plugins

"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const ChevronRight_1 = __importDefault(require("@mui/icons-material/ChevronRight"));
const material_1 = require("@mui/material");
const HoverMenu_1 = __importDefault(require("./HoverMenu"));
const Menu_1 = require("./Menu");
const hooks_1 = require("./hooks");
const CascadingContext = (0, react_1.createContext)({
    parentPopupState: undefined,
    rootPopupState: undefined,
});
function CascadingMenuItem({ onClick, closeAfterItemClick, ...props }) {
    const { rootPopupState, parentPopupState } = (0, react_1.useContext)(CascadingContext);
    if (!rootPopupState) {
        throw new Error('must be used inside a CascadingMenu');
    }
    return ((0, jsx_runtime_1.jsx)(material_1.MenuItem, { ...props, onClick: event => {
            if (closeAfterItemClick) {
                rootPopupState.close();
            }
            onClick === null || onClick === void 0 ? void 0 : onClick(event);
        }, onMouseOver: () => {
            if (parentPopupState === null || parentPopupState === void 0 ? void 0 : parentPopupState.childHandle) {
                parentPopupState.childHandle.close();
                parentPopupState.setChildHandle(undefined);
            }
        } }));
}
function CascadingSubmenu({ title, Icon, inset, ...props }) {
    const { parentPopupState } = (0, react_1.useContext)(CascadingContext);
    const popupState = (0, hooks_1.usePopupState)({
        parentPopupState,
    });
    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(material_1.MenuItem, { ...(0, hooks_1.bindFocus)(popupState), ...(0, hooks_1.bindHover)(popupState), children: [Icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(Icon, {}) })) : null, (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: title, inset: inset }), (0, jsx_runtime_1.jsx)(ChevronRight_1.default, {})] }), (0, jsx_runtime_1.jsx)(CascadingSubmenuHover, { ...props, anchorOrigin: { vertical: 'top', horizontal: 'right' }, transformOrigin: { vertical: 'top', horizontal: 'left' }, popupState: popupState })] }));
}
function CascadingSubmenuHover({ popupState, onMenuItemClick, menuItems, classes, ...props }) {
    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
    const context = (0, react_1.useMemo)(() => ({
        rootPopupState: rootPopupState || popupState,
        parentPopupState: popupState,
    }), [rootPopupState, popupState]);
    return ((0, jsx_runtime_1.jsx)(CascadingContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(HoverMenu_1.default, { ...props, ...(0, hooks_1.bindMenu)(popupState) }) }));
}
function CascadingMenu({ popupState, onMenuItemClick, menuItems, ...props }) {
    const { rootPopupState } = (0, react_1.useContext)(CascadingContext);
    const context = (0, react_1.useMemo)(() => ({
        rootPopupState: rootPopupState || popupState,
        parentPopupState: popupState,
    }), [rootPopupState, popupState]);
    return ((0, jsx_runtime_1.jsx)(CascadingContext.Provider, { value: context, children: (0, jsx_runtime_1.jsx)(material_1.Menu, { ...props, ...(0, hooks_1.bindMenu)(popupState) }) }));
}
function EndDecoration({ item }) {
    if ('subMenu' in item) {
        return (0, jsx_runtime_1.jsx)(Menu_1.MenuItemEndDecoration, { type: "subMenu" });
    }
    else if (item.type === 'checkbox' || item.type === 'radio') {
        return ((0, jsx_runtime_1.jsx)(Menu_1.MenuItemEndDecoration, { type: item.type, checked: item.checked, disabled: item.disabled }));
    }
    return null;
}
function CascadingMenuList({ onMenuItemClick, closeAfterItemClick, menuItems, ...props }) {
    const hasIcon = menuItems.some(m => 'icon' in m && m.icon);
    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: menuItems
            .toSorted((a, b) => (b.priority || 0) - (a.priority || 0))
            .map((item, idx) => {
            return 'subMenu' in item ? ((0, jsx_runtime_1.jsx)(CascadingSubmenu, { title: item.label, Icon: item.icon, inset: hasIcon && !item.icon, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...props, closeAfterItemClick: closeAfterItemClick, onMenuItemClick: onMenuItemClick, menuItems: item.subMenu }) }, `subMenu-${item.label}-${idx}`)) : item.type === 'divider' ? ((0, jsx_runtime_1.jsx)(material_1.Divider, { component: "li" }, `divider-${JSON.stringify(item)}-${idx}`)) : item.type === 'subHeader' ? ((0, jsx_runtime_1.jsx)(material_1.ListSubheader, { children: item.label }, `subHeader-${item.label}-${idx}`)) : ((0, jsx_runtime_1.jsxs)(CascadingMenuItem, { closeAfterItemClick: closeAfterItemClick, onClick: 'onClick' in item
                    ? event => {
                        onMenuItemClick(event, item.onClick);
                    }
                    : undefined, disabled: Boolean(item.disabled), children: [item.icon ? ((0, jsx_runtime_1.jsx)(material_1.ListItemIcon, { children: (0, jsx_runtime_1.jsx)(item.icon, {}) })) : null, ' ', (0, jsx_runtime_1.jsx)(material_1.ListItemText, { primary: item.label, secondary: item.subLabel, inset: hasIcon && !item.icon }), (0, jsx_runtime_1.jsx)(CascadingSpacer, {}), (0, jsx_runtime_1.jsx)(EndDecoration, { item: item })] }, `${item.label}-${idx}`));
        }) }));
}
function CascadingSpacer() {
    return (0, jsx_runtime_1.jsx)("div", { style: { flexGrow: 1, minWidth: 10 } });
}
function CascadingMenuChildren(props) {
    const { closeAfterItemClick = true, ...rest } = props;
    return ((0, jsx_runtime_1.jsx)(CascadingMenu, { ...rest, children: (0, jsx_runtime_1.jsx)(CascadingMenuList, { ...rest, closeAfterItemClick: closeAfterItemClick }) }));
}
exports.default = CascadingMenuChildren;