zent
Version:
一套前端设计语言和基于React的实现
76 lines (75 loc) • 4.36 kB
JavaScript
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 Tabs from '../../tabs';
import { getNodeChildren } from '../node-fns';
var TabPanel = Tabs.TabPanel;
var withPopover = Popover.withPopover;
function defaultRenderItemContent(node) {
return node.label;
}
function defaultGetItemTooltip(node) {
return node.label;
}
var TabsContent = (function (_super) {
__extends(TabsContent, _super);
function TabsContent() {
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;
}
TabsContent.prototype.renderCascaderItems = function (nodes, level) {
var _this = this;
var val = this.props.value[level - 1];
var renderItem = function (node, style) {
var value = node.value;
var cascaderItemCls = classnames('zent-cascader-v2__list-link', {
'zent-cascader-v2__list-link--active': value === val,
});
return (_jsx("div", __assign({ className: "zent-cascader-v2__list-item", style: style, "data-zv": '10.0.17' }, { children: _jsx("span", __assign({ className: cascaderItemCls, title: _this.props.getItemTooltip(node), onClick: function () { return _this.props.onClick(node, _this.closePopup); }, "data-zv": '10.0.17' }, { children: _this.props.renderItemContent(node) }), void 0) }), value));
};
var renderList = this.props.renderList;
return (_jsx("div", __assign({ className: "zent-cascader-v2__list", "data-zv": '10.0.17' }, { children: typeof renderList === 'function'
? renderList(nodes, renderItem)
: nodes.map(function (node) { return renderItem(node); }) }), void 0));
};
TabsContent.prototype.renderTabTitle = function (title, level) {
var loadingLevel = this.props.loadingLevel;
if (level === loadingLevel) {
return (_jsxs("div", __assign({ className: "zent-cascader-v2__loading", "data-zv": '10.0.17' }, { children: [_jsx("div", __assign({ className: "zent-cascader-v2__loading-label", "data-zv": '10.0.17' }, { children: title }), void 0), _jsx("div", { className: "zent-cascader-v2__loading-icon", "data-zv": '10.0.17' }, void 0)] }), void 0));
}
return title;
};
TabsContent.prototype.renderPanels = function (i18n) {
var _a, _b;
var PanelEls = [];
var _c = this.props, title = _c.title, value = _c.value;
var maxLevel = value.length + 1;
var _loop_1 = function (i, options) {
if (options && options.length > 0) {
var val_1 = value[i];
var selectedItem = options.find(function (n) { return n.value === val_1; });
var tabTitle = (_b = (_a = selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem.label) !== null && _a !== void 0 ? _a : title[i]) !== null && _b !== void 0 ? _b : i18n.title;
var level = i + 1;
PanelEls.push(_jsx(TabPanel, __assign({ tab: this_1.renderTabTitle(tabTitle, level), id: level }, { children: this_1.renderCascaderItems(options, level) }), "tab-" + value.slice(0, i).join('-')));
}
};
var this_1 = this;
for (var i = 0, options = this.props.options; i < maxLevel; i++, options = getNodeChildren(options, value[i - 1])) {
_loop_1(i, options);
}
return PanelEls;
};
TabsContent.prototype.render = function () {
var _a = this.props, activeId = _a.activeId, i18n = _a.i18n, onTabsChange = _a.onTabsChange;
return (_jsx("div", __assign({ className: "zent-cascader-v2__popup-inner", "data-zv": '10.0.17' }, { children: _jsx(Tabs, __assign({ activeId: activeId, onChange: onTabsChange, type: "card", className: "zent-cascader-v2__tabs" }, { children: this.renderPanels(i18n) }), void 0) }), void 0));
};
TabsContent.defaultProps = {
renderItemContent: defaultRenderItemContent,
getItemTooltip: defaultGetItemTooltip,
};
return TabsContent;
}(Component));
export default withPopover(TabsContent);