zent/es/cascader/components/MenuContent.js

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

import { __assign, __extends } from "tslib";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import classnames from 'classnames';
import { Component } from 'react';
import Popover from '../../popover';
import Icon from '../../icon';
import Checkbox from '../../checkbox';
import { getNodeChildren, getNodeKey } from '../node-fns';
import InfiniteScroller from '../../infinite-scroller';
import InlineLoading from '../../loading/InlineLoading';
var withPopover = Popover.withPopover;
function defaultRenderItemContent(node) {
    return (_jsx("span", __assign({ className: "zent-cascader-v2__menu-item-label", "data-zv": '10.0.17' }, { children: node.label }), void 0));
}
function defaultGetItemTooltip(node) {
    return node.label;
}
var MenuContent = (function (_super) {
    __extends(MenuContent, _super);
    function MenuContent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.closePopup = function () { var _a; return (_a = _this.props.popover) === null || _a === void 0 ? void 0 : _a.close(); };
        return _this;
    }
    MenuContent.prototype.render = function () {
        return (_jsx("div", __assign({ className: "zent-cascader-v2__popup-inner zent-cascader-v2__popup-inner-menu", "data-zv": '10.0.17' }, { children: this.renderPanels() }), void 0));
    };
    MenuContent.prototype.getMenuItemIcon = function (node, isActive, showCheck) {
        var loading = this.props.loading;
        if (node.loadChildrenOnExpand) {
            var nodeKey = getNodeKey(node);
            if (loading.indexOf(nodeKey) !== -1 && isActive) {
                return _jsx("i", { className: "zent-cascader-v2__menu-item-loading zenticon", "data-zv": '10.0.17' }, void 0);
            }
        }
        var hasChildren = node.children && node.children.length > 0;
        if (hasChildren || node.loadChildrenOnExpand) {
            return _jsx(Icon, { className: "zent-cascader-v2__menu-item-icon", type: "right" }, void 0);
        }
        if (!hasChildren && isActive && showCheck) {
            return _jsx(Icon, { className: "zent-cascader-v2__menu-item-icon", type: "check" }, void 0);
        }
        return null;
    };
    MenuContent.prototype.handleClickOption = function (node, closePop, checkState) {
        var _a = this.props, onOptionClick = _a.onOptionClick, multiple = _a.multiple, multipleType = _a.multipleType, onOptionToggle = _a.onOptionToggle;
        onOptionClick(node, closePop);
        if (multiple && multipleType === 'normal') {
            var isLeafOption = node.children && node.children.length === 0;
            var checked = checkState === 'on';
            isLeafOption && onOptionToggle(node, !checked);
        }
    };
    MenuContent.prototype.renderCascaderItems = function (nodes, level, parent) {
        var _this = this;
        var i18n = this.props.i18n;
        if (!nodes || (nodes === null || nodes === void 0 ? void 0 : nodes.length) === 0) {
            return (_jsx("div", __assign({ className: "zent-cascader-v2__menu-empty", "data-zv": '10.0.17' }, { children: i18n.empty }), "menu-empty"));
        }
        var _a = this.props, value = _a.value, onOptionHover = _a.onOptionHover, expandTrigger = _a.expandTrigger, scrollLoad = _a.scrollLoad, loadChildrenOnScroll = _a.loadChildrenOnScroll, scrollable = _a.scrollable, multiple = _a.multiple, multipleType = _a.multipleType, selectionMap = _a.selectionMap, renderItemContent = _a.renderItemContent, getItemTooltip = _a.getItemTooltip, renderList = _a.renderList;
        var renderItem = function (node, style) {
            var checkState;
            if (multiple) {
                checkState = selectionMap.get(getNodeKey(node));
            }
            var isActive = multiple
                ? checkState === 'on' || checkState === 'partial'
                : node.value === value[level - 1];
            var cascaderItemCls = classnames('zent-cascader-v2__menu-item', {
                'zent-cascader-v2__menu-item--active': isActive,
                'zent-cascader-v2__menu-item--disabled': node.disabled,
                'zent-cascader-v2__menu-item--multiple': multiple,
                'zent-cascader-v2__menu-item--multiple--checkbox': multiple && multipleType === 'checkbox',
                'zent-cascader-v2__menu-item--multiple--normal': multiple && multipleType === 'normal',
                'zent-cascader-v2__menu-item--leaf': node.children.length === 0 && !node.loadChildrenOnExpand,
            });
            var showCheck = multiple && multipleType !== 'checkbox';
            return (_jsxs("div", __assign({ className: cascaderItemCls, title: getItemTooltip(node), onClick: node.disabled
                    ? undefined
                    : function () { return _this.handleClickOption(node, _this.closePopup, checkState); }, onMouseEnter: node.disabled || expandTrigger !== 'hover'
                    ? undefined
                    : function () { return onOptionHover(node); }, style: style, "data-zv": '10.0.17' }, { children: [multiple && multipleType === 'checkbox' && (_jsx(Checkbox, { value: node.value, onChange: function (e) { return _this.props.onOptionToggle(node, e.target.checked); }, checked: checkState === 'on', indeterminate: checkState === 'partial', disabled: node.disabled }, void 0)), renderItemContent(node), _this.getMenuItemIcon(node, isActive, showCheck)] }), node.value));
        };
        var key = "menu-" + value.slice(0, level - 1).join('-');
        if (typeof renderList === 'function') {
            return (_jsx("div", __assign({ className: "zent-cascader-v2__menu", "data-zv": '10.0.17' }, { children: renderList(nodes, renderItem) }), key));
        }
        var cascaderItems = nodes.map(function (node) { return renderItem(node); });
        var hasMore = parent === null ? loadChildrenOnScroll : parent.loadChildrenOnScroll;
        return (_jsx("div", __assign({ className: "zent-cascader-v2__menu", "data-zv": '10.0.17' }, { children: scrollable && hasMore ? (_jsx(InfiniteScroller, __assign({ className: "zent-cascader-v2__menu-scroller", hasMore: hasMore, loader: _jsx(InlineLoading, { iconSize: 18, loading: true, colorPreset: "grey", icon: "circle", iconText: i18n.loading, textPosition: "right", className: "zent-cascader-v2__menu-scroller-loading" }, void 0), loadMore: function () { return scrollLoad(parent); }, skipLoadOnMount: true }, { children: cascaderItems }), void 0)) : (cascaderItems) }), key));
    };
    MenuContent.prototype.renderPanels = function () {
        var PanelEls = [];
        var value = this.props.value;
        var options = this.props.options;
        var level = 1;
        PanelEls.push(this.renderCascaderItems(options, level, null));
        if ((value === null || value === void 0 ? void 0 : value.length) > 0 && (options === null || options === void 0 ? void 0 : options.length) > 0) {
            var _loop_1 = function (i) {
                level++;
                var parent_1 = options.find(function (it) { return it.value === value[i]; });
                options = getNodeChildren(options, value[i]);
                if ((options === null || options === void 0 ? void 0 : options.length) > 0) {
                    PanelEls.push(this_1.renderCascaderItems(options, level, parent_1));
                }
            };
            var this_1 = this;
            for (var i = 0; i < value.length; i++) {
                _loop_1(i);
            }
        }
        return PanelEls;
    };
    MenuContent.defaultProps = {
        renderItemContent: defaultRenderItemContent,
        getItemTooltip: defaultGetItemTooltip,
    };
    return MenuContent;
}(Component));
export default withPopover(MenuContent);