leo-design-ui/dist/components/Menu/menu.js

React Design Library

import { jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
import React, { createContext, useState } from "react";
// 创建上下文
export var MenuContext = createContext({ index: '0' });
var Menu = function (_a) {
    var _b = _a.defaultIndex, defaultIndex = _b === void 0 ? "0" : _b, _c = _a.mode, mode = _c === void 0 ? 'horizontal' : _c, style = _a.style, className = _a.className, children = _a.children, onSelect = _a.onSelect, _d = _a.defaultOpenSubMenus, defaultOpenSubMenus = _d === void 0 ? [] : _d;
    var classes = classNames('leo-menu', className, {
        'menu-vertical': mode === 'vertical',
        'menu-horizontal': mode !== 'vertical',
    });
    var _e = useState(defaultIndex), currentActive = _e[0], setActive = _e[1];
    var handleClick = function (index) {
        setActive(index);
        if (onSelect) {
            onSelect(index);
        }
    };
    var passedContext = {
        index: currentActive,
        // 子组件触发点击事件
        onSelect: handleClick,
        mode: mode,
        defaultOpenSubMenus: defaultOpenSubMenus
    };
    var renderChildren = function () {
        return React.Children.map(children, function (child, index) {
            var childElement = child;
            var displayName = childElement.type.displayName;
            if (displayName === 'MenuItem' || displayName === 'SubMenu') {
                return React.cloneElement(childElement, {
                    index: index.toString()
                });
            }
            else {
                console.error("Warning: Menu has a child which is not a MenuItem component");
            }
        });
    };
    return (_jsx("ul", { className: classes, style: style, "data-testid": 'test-menu', children: _jsx(MenuContext.Provider, { value: passedContext, children: renderChildren() }) }));
};
export default Menu;