zent/es/select-menu/MenuListItem.js

一套前端设计语言和基于React的实现

import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { Component } from 'react';
var MenuListItem = (function (_super) {
    __extends(MenuListItem, _super);
    function MenuListItem() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.onClick = function (e) {
            var _a = _this.props, item = _a.item, onRequestClose = _a.onRequestClose;
            return handleItemClick({ item: item, onRequestClose: onRequestClose, event: e });
        };
        _this.onMouseEnter = function () {
            var _a = _this.props, focusTo = _a.focusTo, index = _a.index;
            focusTo(index, false);
        };
        _this.onMouseLeave = function () {
            _this.props.focusTo(null);
        };
        return _this;
    }
    MenuListItem.prototype.render = function () {
        var _a = this.props, item = _a.item, hover = _a.hover;
        if (!item) {
            return null;
        }
        var className = item.className, isDivider = item.isDivider, isGroup = item.isGroup, content = item.content;
        if (isDivider) {
            return _jsx("div", { className: cx('zent-divider-line', className), "data-zv": '10.0.17' }, void 0);
        }
        if (isGroup) {
            return (_jsx("li", __assign({ className: cx('zent-menu-item-group-header', className), "data-zv": '10.0.17' }, { children: _jsx("span", __assign({ "data-zv": '10.0.17' }, { children: content }), void 0) }), void 0));
        }
        var title = typeof content === 'number' || typeof content === 'string'
            ? "" + content
            : undefined;
        var active = typeof item.active === 'function'
            ? item.active(item.value)
            : !!item.active;
        var hoverable = item.hoverable === undefined ? true : !!item.hoverable;
        return (_jsxs("li", __assign({ className: cx('zent-popup-menu-item', {
                hoverable: hoverable,
                disabled: item.disabled,
                active: active,
                hover: hover,
            }, className), onClick: this.onClick, onMouseEnter: this.onMouseEnter, onMouseLeave: this.onMouseLeave, "data-zv": '10.0.17' }, { children: [item.icon ? _jsx("i", { className: cx('zent-popup-menu-item-icon'), "data-zv": '10.0.17' }, void 0) : null, _jsx("span", __assign({ title: title, "data-zv": '10.0.17' }, { children: content }), void 0)] }), void 0));
    };
    return MenuListItem;
}(Component));
export { MenuListItem };
export function handleItemClick(_a) {
    var event = _a.event, item = _a.item, onRequestClose = _a.onRequestClose;
    var disabled = item.disabled, onClick = item.onClick;
    if (disabled) {
        return;
    }
    if (onClick) {
        onClick(event);
        if (!event.defaultPrevented) {
            event.preventDefault();
            event.stopPropagation();
            onRequestClose && onRequestClose();
        }
    }
}