zent/es/menu/SubMenu.js

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

import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import cx from 'classnames';
import { Children } from 'react';
import Icon from '../icon';
import { AnimateHeight } from '../utils/component/AnimateHeight';
import CommonMenu from './CommonMenu';
import SubPopupMenu from './SubPopupMenu';
import { getExtraStyle } from './utils';
var SubMenu = (function (_super) {
    __extends(SubMenu, _super);
    function SubMenu() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.state = {
            subMenuVisible: false,
        };
        _this.getEventHanders = function (disabled, isInline) {
            var eventHanders = {};
            if (!disabled && !isInline) {
                eventHanders = {
                    onMouseEnter: _this.onMouseEnter,
                    onMouseLeave: _this.onMouseLeave,
                };
            }
            return eventHanders;
        };
        _this.handleClick = function (e, index) {
            var _a = _this.props, onClick = _a.onClick, isInline = _a.isInline;
            !isInline && _this.setState({ subMenuVisible: false });
            onClick(e, index);
        };
        _this.titleClickHandler = function (e) {
            var _a, _b;
            var _c = _this.props, isInline = _c.isInline, specKey = _c.specKey, toggleExpand = _c.toggleExpand;
            (_b = (_a = _this.props).onSubMenuClick) === null || _b === void 0 ? void 0 : _b.call(_a, specKey);
            if (isInline) {
                toggleExpand(specKey);
            }
            e.stopPropagation();
        };
        _this.onMouseEnter = function () {
            if (_this.leaveTimer) {
                clearTimeout(_this.leaveTimer);
            }
            _this.enterTimer = setTimeout(function () {
                _this.setState({ subMenuVisible: true });
            }, 200);
        };
        _this.onMouseLeave = function () {
            if (_this.enterTimer) {
                clearTimeout(_this.enterTimer);
            }
            _this.leaveTimer = setTimeout(function () {
                _this.setState({ subMenuVisible: false });
            }, 200);
        };
        _this.renderInlineChild = function (component, index) {
            var _a = _this.props, depth = _a.depth, isInline = _a.isInline, inlineIndent = _a.inlineIndent, selectedKey = _a.selectedKey, expandKeys = _a.expandKeys, handleSelect = _a.handleSelect, toggleExpand = _a.toggleExpand, specKey = _a.specKey;
            return _this.renderCommonMenuItem(component, index, specKey, {
                depth: depth + 1,
                isInline: isInline,
                inlineIndent: inlineIndent,
                selectedKey: selectedKey,
                expandKeys: expandKeys,
                handleSelect: handleSelect,
                toggleExpand: toggleExpand,
                onSubMenuClick: _this.props.onSubMenuClick,
            });
        };
        return _this;
    }
    SubMenu.prototype.renderContent = function () {
        var _a = this.props, children = _a.children, specKey = _a.specKey, overlayClassName = _a.overlayClassName, isInline = _a.isInline, expandKeys = _a.expandKeys;
        var isExpand = expandKeys && expandKeys.indexOf(specKey) !== -1;
        if (!isInline) {
            return (_jsx(SubPopupMenu, __assign({ visible: this.state.subMenuVisible, onClick: this.handleClick, specKey: specKey, overlayCx: overlayClassName, onSubMenuClick: this.props.onSubMenuClick }, { children: children }), void 0));
        }
        return (_jsx(AnimateHeight, __assign({ duration: 200, height: isExpand ? 'auto' : 0 }, { children: _jsx("ul", __assign({ className: "zent-menu__inner", "data-zv": '10.0.17' }, { children: Children.map(children, this.renderInlineChild) }), void 0) }), void 0));
    };
    SubMenu.prototype.render = function () {
        var _a = this.props, className = _a.className, disabled = _a.disabled, title = _a.title, isInline = _a.isInline, depth = _a.depth, inlineIndent = _a.inlineIndent, expandKeys = _a.expandKeys, specKey = _a.specKey;
        var isExpand = expandKeys && expandKeys.indexOf(specKey) !== -1;
        var eventHanders = this.getEventHanders(disabled, isInline);
        var styleObj = getExtraStyle({ isInline: isInline, depth: depth, inlineIndent: inlineIndent });
        var cls = cx(className, {
            'zent-menu-item': !isInline,
            'zent-menu-item-disabled': disabled,
            'zent-submenu': !isInline,
            'zent-menu__inline-submenu': isInline,
            'zent-menu__inline-item-disabled': disabled && isInline,
        });
        return (_jsxs("li", __assign({ className: cls }, eventHanders, { "data-zv": '10.0.17' }, { children: [_jsxs("div", __assign({ className: cx({
                        'zent-submenu-title': !isInline,
                        'zent-menu__inline-submenu-title': isInline,
                        'zent-submenu-disabled': disabled,
                    }), style: styleObj, onClick: this.titleClickHandler, "data-zv": '10.0.17' }, { children: [title, !disabled && (_jsx(Icon, { className: cx('zent-submenu-title-operate-icon', {
                                'zent-menu__inline-submenu-icon--expand': isInline && isExpand,
                            }), type: "right" }, void 0))] }), void 0), !disabled && this.renderContent()] }), void 0));
    };
    SubMenu.defaultProps = {
        className: '',
    };
    return SubMenu;
}(CommonMenu));
export default SubMenu;