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

React Design Library

import { jsx as _jsx } from "react/jsx-runtime";
import classNames from "classnames";
import { useContext } from "react";
import { MenuContext } from "./menu";
var MenuItem = function (_a) {
    var className = _a.className, children = _a.children, index = _a.index, style = _a.style, _b = _a.disabled, disabled = _b === void 0 ? false : _b;
    // 连接上下文
    var context = useContext(MenuContext);
    var classes = classNames('menu-item', className, {
        'is-disabled': disabled,
        'is-active': index === context.index
    });
    var handleClick = function () {
        if (context.onSelect && !disabled && (typeof index === 'string')) {
            context.onSelect(index);
        }
    };
    return (_jsx("li", { className: classes, style: style, onClick: handleClick, children: children }));
};
MenuItem.displayName = 'MenuItem';
export default MenuItem;