amis-ui 6.13.0-beta.6 → 6.13.0-beta.8

package/esm/components/Tabs.js

@@ -1,607 +0,0 @@
-/**
- * amis-ui v6.13.0-beta.6
- * Copyright 2018-2025 fex
- */
-
-import { __extends, __assign, __decorate, __metadata } from 'tslib';
-import React__default from 'react';
-import { noop, autobind, themeable, guid, resizeSensor, isObjectShallowModified, localeable, uncontrollable } from 'amis-core';
-import Transition, { ENTERING, ENTERED } from 'react-transition-group/Transition';
-import { Icon } from './icons.js';
-import debounce from 'lodash/debounce';
-import { findDOMNode } from 'react-dom';
-import TooltipWrapper from './TooltipWrapper.js';
-import { PopOverContainer } from './PopOverContainer.js';
-import Sortable from 'sortablejs';
-
-/**
- * @file Tabs
- * @description 选项卡
- * @author fex
- */
-var _a;
-var transitionStyles = (_a = {},
-    _a[ENTERING] = 'in',
-    _a[ENTERED] = 'in',
-    _a);
-var TabComponent = /** @class */ (function (_super) {
-    __extends(TabComponent, _super);
-    function TabComponent() {
-        var _this = _super !== null && _super.apply(this, arguments) || this;
-        _this.touch = {};
-        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
-        return _this;
-    }
-    TabComponent.prototype.onTouchStart = function (event) {
-        this.touch.startX = event.touches[0].clientX;
-        this.touch.startY = event.touches[0].clientY;
-        this.touchStartTime = Date.now();
-    };
-    TabComponent.prototype.onTouchMove = function (event) {
-        var touch = event.touches[0];
-        var newState = __assign({}, this.touch);
-        newState.deltaX = touch.clientX < 0 ? 0 : touch.clientX - newState.startX;
-        newState.deltaY = touch.clientY - newState.startY;
-        newState.offsetX = Math.abs(newState.deltaX);
-        newState.offsetY = Math.abs(newState.deltaY);
-        this.touch = newState;
-    };
-    TabComponent.prototype.onTouchEnd = function () {
-        var duration = Date.now() - this.touchStartTime;
-        var speed = this.touch.deltaX / duration;
-        var shouldSwipe = Math.abs(speed) > 0.25;
-        var _a = this.props, prevKey = _a.prevKey, nextKey = _a.nextKey, onSelect = _a.onSelect;
-        if (shouldSwipe) {
-            if (this.touch.deltaX > 0) {
-                prevKey !== undefined && (onSelect === null || onSelect === void 0 ? void 0 : onSelect(prevKey));
-            }
-            else {
-                nextKey && (onSelect === null || onSelect === void 0 ? void 0 : onSelect(nextKey));
-            }
-        }
-    };
-    TabComponent.prototype.render = function () {
-        var _this = this;
-        var _a = this.props, cx = _a.classnames, mountOnEnter = _a.mountOnEnter, reload = _a.reload, unmountOnExit = _a.unmountOnExit, eventKey = _a.eventKey, activeKey = _a.activeKey, children = _a.children, className = _a.className, swipeable = _a.swipeable, mobileUI = _a.mobileUI, testIdBuilder = _a.testIdBuilder;
-        return (React__default.createElement(Transition, { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
-            if (status === ENTERING) {
-                _this.contentDom.offsetWidth;
-            }
-            return (React__default.createElement("div", __assign({ ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className), onTouchStart: swipeable && mobileUI ? _this.onTouchStart : noop, onTouchMove: swipeable && mobileUI ? _this.onTouchMove : noop, onTouchEnd: swipeable && mobileUI ? _this.onTouchEnd : noop, onTouchCancel: swipeable && mobileUI ? _this.onTouchEnd : noop }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId()), children));
-        }));
-    };
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], TabComponent.prototype, "onTouchStart", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], TabComponent.prototype, "onTouchMove", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], TabComponent.prototype, "onTouchEnd", null);
-    return TabComponent;
-}(React__default.PureComponent));
-var Tab = themeable(TabComponent);
-var Tabs = /** @class */ (function (_super) {
-    __extends(Tabs, _super);
-    function Tabs(props) {
-        var _this = _super.call(this, props) || this;
-        _this.navMain = React__default.createRef(); // HTMLDivElement
-        _this.scroll = false;
-        _this.id = guid();
-        _this.draging = false;
-        _this.toDispose = [];
-        _this.resizeDom = React__default.createRef();
-        _this.checkArrowStatus = debounce(function () {
-            var _a = _this.navMain.current || {
-                scrollLeft: 0,
-                scrollWidth: 0,
-                clientWidth: 0
-            }, scrollLeft = _a.scrollLeft, scrollWidth = _a.scrollWidth, clientWidth = _a.clientWidth;
-            var _b = _this.state, arrowRightDisabled = _b.arrowRightDisabled, arrowLeftDisabled = _b.arrowLeftDisabled;
-            if (scrollLeft === 0 && !arrowLeftDisabled) {
-                _this.setState({
-                    arrowRightDisabled: false,
-                    arrowLeftDisabled: true
-                });
-            }
-            else if (scrollWidth === scrollLeft + clientWidth &&
-                !arrowRightDisabled) {
-                _this.setState({
-                    arrowRightDisabled: true,
-                    arrowLeftDisabled: false
-                });
-            }
-            else if (scrollLeft !== 0 && arrowLeftDisabled) {
-                _this.setState({
-                    arrowLeftDisabled: false
-                });
-            }
-            else if (scrollWidth !== scrollLeft + clientWidth &&
-                arrowRightDisabled) {
-                _this.setState({
-                    arrowRightDisabled: false
-                });
-            }
-        }, 100, {
-            trailing: true,
-            leading: false
-        });
-        _this.state = {
-            isOverflow: false,
-            arrowLeftDisabled: false,
-            arrowRightDisabled: false,
-            dragIndicator: null,
-            editingIndex: null,
-            editInputText: null,
-            editOriginText: null
-        };
-        return _this;
-    }
-    Tabs.prototype.componentDidMount = function () {
-        var _this = this;
-        var _a, _b;
-        this.computedWidth();
-        if (this.navMain) {
-            (_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.addEventListener('wheel', this.handleWheel, {
-                passive: false
-            });
-            this.checkArrowStatus();
-        }
-        ((_b = this.resizeDom) === null || _b === void 0 ? void 0 : _b.current) &&
-            this.toDispose.push(resizeSensor(this.resizeDom.current, function () {
-                return _this.computedWidth();
-            }));
-    };
-    Tabs.prototype.componentDidUpdate = function (preProps) {
-        var _a;
-        // 只有 key 变化或者 tab 改变，才会重新计算，避免多次计算导致 顶部标签 滚动问题
-        var isTabsModified = isObjectShallowModified({
-            activeKey: this.props.activeKey,
-            children: Array.isArray(this.props.children)
-                ? this.props.children.map(function (item) {
-                    var _a, _b;
-                    return ({
-                        eventKey: (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.eventKey,
-                        // 这里 title 可能是 React.ReactNode，只对比 string
-                        title: typeof ((_b = item === null || item === void 0 ? void 0 : item.props) === null || _b === void 0 ? void 0 : _b.title) === 'string'
-                            ? item.props.title
-                            : ''
-                    });
-                })
-                : []
-        }, {
-            activeKey: preProps.activeKey,
-            children: Array.isArray(preProps.children)
-                ? preProps.children.map(function (item) {
-                    var _a, _b;
-                    return ({
-                        eventKey: (_a = item === null || item === void 0 ? void 0 : item.props) === null || _a === void 0 ? void 0 : _a.eventKey,
-                        title: typeof ((_b = item === null || item === void 0 ? void 0 : item.props) === null || _b === void 0 ? void 0 : _b.title) === 'string' ? item.props.title : ''
-                    });
-                })
-                : []
-        });
-        // 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
-        if (!this.scroll && !this.draging && isTabsModified) {
-            this.computedWidth();
-        }
-        // 移动端取消箭头切换，改为滚动切换激活项居中
-        var _b = this.props; _b.classPrefix; var activeKey = _b.activeKey, mobileUI = _b.mobileUI;
-        if (mobileUI && preProps.activeKey !== activeKey) {
-            var ns_1 = this.props.classPrefix;
-            var dom = findDOMNode(this);
-            var activeTab = dom.querySelector(".".concat(ns_1, "Tabs-link.is-active"));
-            var parentWidth = ((_a = activeTab.parentNode) === null || _a === void 0 ? void 0 : _a.parentNode).offsetWidth;
-            var offsetLeft = activeTab.offsetLeft;
-            var offsetWidth = activeTab.offsetWidth;
-            if (activeTab.parentNode) {
-                activeTab.parentNode.scrollLeft =
-                    offsetLeft > parentWidth
-                        ? (offsetLeft / parentWidth) * parentWidth -
-                            parentWidth / 2 +
-                            offsetWidth / 2
-                        : offsetLeft - parentWidth / 2 + offsetWidth / 2;
-            }
-        }
-        this.scroll = false;
-    };
-    Tabs.prototype.componentWillUnmount = function () {
-        this.checkArrowStatus.cancel();
-        this.toDispose.forEach(function (fn) { return fn(); });
-        this.toDispose = [];
-    };
-    /**
-     * 处理内容与容器之间的位置关系
-     */
-    Tabs.prototype.computedWidth = function () {
-        var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
-        var mode = tabsMode || dMode;
-        if (['vertical', 'sidebar'].includes(mode)) {
-            return;
-        }
-        var navMainRef = this.navMain.current;
-        var clientWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.clientWidth) || 0;
-        var scrollWidth = (navMainRef === null || navMainRef === void 0 ? void 0 : navMainRef.scrollWidth) || 0;
-        var isOverflow = scrollWidth > clientWidth;
-        // 内容超出容器长度标记溢出
-        if (isOverflow !== this.state.isOverflow) {
-            this.setState({ isOverflow: isOverflow });
-        }
-        // 正在拖动的不自动定位
-        if (isOverflow && !this.draging) {
-            this.showSelected();
-        }
-    };
-    /**
-     * 保证选中的tab始终显示在可视区域
-     */
-    Tabs.prototype.showSelected = function (key) {
-        var _a, _b, _c, _d, _e;
-        var _f = this.props, dMode = _f.mode, tabsMode = _f.tabsMode;
-        var isOverflow = this.state.isOverflow;
-        var mode = tabsMode || dMode;
-        if (['vertical', 'sidebar'].includes(mode) || !isOverflow) {
-            return;
-        }
-        var _g = this.props, activeKey = _g.activeKey, children = _g.children;
-        var currentKey = key !== undefined ? key : activeKey;
-        var currentIndex = children === null || children === void 0 ? void 0 : children.findIndex(function (item) {
-            return item === null ? false : item.props.eventKey === currentKey;
-        });
-        var li = ((_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.children) || [];
-        var currentLi = li[currentIndex];
-        var liOffsetLeft = currentLi === null || currentLi === void 0 ? void 0 : currentLi.offsetLeft;
-        var liClientWidth = currentLi === null || currentLi === void 0 ? void 0 : currentLi.clientWidth;
-        var scrollLeft = ((_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) || 0;
-        var clientWidth = ((_c = this.navMain.current) === null || _c === void 0 ? void 0 : _c.clientWidth) || 0;
-        // 左边被遮住了
-        if (scrollLeft > liOffsetLeft) {
-            (_d = this.navMain.current) === null || _d === void 0 ? void 0 : _d.scrollTo({
-                left: liOffsetLeft,
-                behavior: 'smooth'
-            });
-        }
-        // 右边被遮住了
-        if (liOffsetLeft + liClientWidth > scrollLeft + clientWidth) {
-            (_e = this.navMain.current) === null || _e === void 0 ? void 0 : _e.scrollTo({
-                left: liOffsetLeft + liClientWidth - clientWidth,
-                behavior: 'smooth'
-            });
-        }
-    };
-    Tabs.prototype.handleSelect = function (key) {
-        var _this = this;
-        var onSelect = this.props.onSelect;
-        this.showSelected(key);
-        setTimeout(function () {
-            _this.checkArrowStatus();
-        }, 500);
-        onSelect && onSelect(key);
-    };
-    Tabs.prototype.handleStartEdit = function (index, title) {
-        this.setState({
-            editingIndex: index,
-            editInputText: title,
-            editOriginText: title
-        });
-    };
-    Tabs.prototype.handleEditInputChange = function (e) {
-        this.setState({
-            editInputText: e.currentTarget.value
-        });
-    };
-    Tabs.prototype.handleEdit = function () {
-        var _a = this.state, editingIndex = _a.editingIndex, editInputText = _a.editInputText, editOriginText = _a.editOriginText;
-        var onEdit = this.props.onEdit;
-        this.setState({
-            editingIndex: null,
-            editInputText: null,
-            editOriginText: null
-        });
-        onEdit &&
-            (editInputText = String(editInputText).trim()) &&
-            editInputText !== editOriginText &&
-            onEdit(editingIndex, editInputText);
-    };
-    Tabs.prototype.dragTipRef = function (ref) {
-        if (!this.dragTip && ref) {
-            this.initDragging();
-        }
-        else if (this.dragTip && !ref) {
-            this.destroyDragging();
-        }
-        this.dragTip = ref;
-    };
-    Tabs.prototype.destroyDragging = function () {
-        this.sortable && this.sortable.destroy();
-    };
-    Tabs.prototype.initDragging = function () {
-        var _this = this;
-        var _a = this.props, ns = _a.classPrefix, onDragChange = _a.onDragChange;
-        var dom = findDOMNode(this);
-        this.sortable = new Sortable(dom.querySelector(".".concat(ns, "Tabs-links")), {
-            group: this.id,
-            animation: 250,
-            handle: ".".concat(ns, "Tabs-link"),
-            ghostClass: "".concat(ns, "Tabs-link--dragging"),
-            onStart: function () {
-                _this.draging = true;
-            },
-            onEnd: function (e) {
-                // 没有移动
-                if (e.newIndex === e.oldIndex) {
-                    return;
-                }
-                // 再交换回来
-                var parent = e.to;
-                if (e.oldIndex < parent.childNodes.length - 1) {
-                    parent.insertBefore(e.item, parent.childNodes[e.oldIndex > e.newIndex ? e.oldIndex + 1 : e.oldIndex]);
-                }
-                else {
-                    parent.appendChild(e.item);
-                }
-                setTimeout(function () {
-                    _this.draging = false;
-                });
-                onDragChange && onDragChange(e);
-            }
-        });
-    };
-    Tabs.prototype.handleArrow = function (type) {
-        var _a, _b;
-        var _c = this.navMain.current || {
-            scrollLeft: 0,
-            scrollWidth: 0,
-            clientWidth: 0
-        }, scrollLeft = _c.scrollLeft, scrollWidth = _c.scrollWidth, clientWidth = _c.clientWidth;
-        if (type === 'left' && scrollLeft > 0) {
-            var newScrollLeft = scrollLeft - clientWidth;
-            (_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                left: newScrollLeft > 0 ? newScrollLeft : 0,
-                behavior: 'smooth'
-            });
-            this.setState({
-                arrowRightDisabled: false,
-                arrowLeftDisabled: newScrollLeft <= 0
-            });
-        }
-        else if (type === 'right' && scrollWidth > scrollLeft + clientWidth) {
-            var newScrollLeft = scrollLeft + clientWidth;
-            (_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
-                left: newScrollLeft > scrollWidth ? scrollWidth : newScrollLeft,
-                behavior: 'smooth'
-            });
-            this.setState({
-                arrowRightDisabled: newScrollLeft > scrollWidth - clientWidth,
-                arrowLeftDisabled: false
-            });
-        }
-        this.scroll = true;
-    };
-    /**
-     * 监听导航上的滚动事件
-     */
-    Tabs.prototype.handleWheel = function (e) {
-        var _a, _b;
-        var deltaY = e.deltaY, deltaX = e.deltaX;
-        var absX = Math.abs(deltaX);
-        var absY = Math.abs(deltaY);
-        // 当鼠标上下滚动时转换为左右滚动
-        if (absY > absX) {
-            (_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
-                left: ((_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollLeft) + deltaY
-            });
-            e.preventDefault();
-        }
-        this.checkArrowStatus();
-        this.scroll = true;
-    };
-    // 处理 hash 作为 key 时重复的问题
-    Tabs.prototype.generateTabKey = function (hash, eventKey, index) {
-        return (hash === eventKey ? 'hash-' : '') + (eventKey !== null && eventKey !== void 0 ? eventKey : index);
-    };
-    Tabs.prototype.renderNav = function (child, index, showClose) {
-        var _this = this;
-        if (!child) {
-            return;
-        }
-        var _a = this.props, cx = _a.classnames, activeKeyProp = _a.activeKey, mode = _a.mode, closable = _a.closable; _a.draggable; var showTip = _a.showTip, showTipClassName = _a.showTipClassName, editable = _a.editable, testIdBuilder = _a.testIdBuilder, titleClassName = _a.titleClassName;
-        var _b = child.props, eventKey = _b.eventKey, disabled = _b.disabled, icon = _b.icon, iconPosition = _b.iconPosition, title = _b.title, toolbar = _b.toolbar, className = _b.className, tabClassName = _b.tabClassName, tabClosable = _b.closable, tip = _b.tip, hash = _b.hash;
-        var _c = this.state, editingIndex = _c.editingIndex, editInputText = _c.editInputText;
-        var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
-        var iconElement = React__default.createElement(Icon, { cx: cx, icon: icon, className: "Icon" });
-        var link = (React__default.createElement("a", { title: typeof title === 'string' ? title : undefined }, editable && editingIndex === index ? (React__default.createElement("input", { className: cx('Tabs-link-edit'), type: "text", value: editInputText, autoFocus: true, onFocus: function (e) {
-                return e.currentTarget.select();
-            }, onChange: this.handleEditInputChange, onBlur: this.handleEdit, onKeyPress: function (e) {
-                return e && e.key === 'Enter' && _this.handleEdit();
-            } })) : (React__default.createElement(React__default.Fragment, null,
-            icon ? (iconPosition === 'right' ? (React__default.createElement(React__default.Fragment, null,
-                React__default.createElement("span", { className: cx('Tabs-link-text mr-1') }, title),
-                iconElement)) : (React__default.createElement(React__default.Fragment, null,
-                iconElement,
-                React__default.createElement("span", { className: cx('Tabs-link-text ml-1') }, title)))) : (React__default.createElement("span", { className: cx('Tabs-link-text') }, title)),
-            React__default.isValidElement(toolbar) ? toolbar : null))));
-        var tabTestIdBuidr = testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("tab-".concat(typeof title === 'string' ? title : index));
-        return (React__default.createElement("li", __assign({ className: cx('Tabs-link', titleClassName, activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', className, tabClassName), key: this.generateTabKey(hash, eventKey, index), onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); }, onDoubleClick: function () {
-                editable &&
-                    typeof title === 'string' &&
-                    _this.handleStartEdit(index, title);
-            } }, tabTestIdBuidr === null || tabTestIdBuidr === void 0 ? void 0 : tabTestIdBuidr.getChild('link').getTestId()),
-            showTip ? (React__default.createElement(TooltipWrapper, { placement: "top", tooltip: tip !== null && tip !== void 0 ? tip : (typeof title === 'string' ? title : ''), trigger: "hover", tooltipClassName: showTipClassName }, link)) : (link),
-            showClose && (tabClosable !== null && tabClosable !== void 0 ? tabClosable : closable) && (React__default.createElement("span", __assign({ className: cx('Tabs-link-close'), onClick: function (e) {
-                    e.stopPropagation();
-                    _this.props.onClose && _this.props.onClose(eventKey);
-                } }, tabTestIdBuidr === null || tabTestIdBuidr === void 0 ? void 0 : tabTestIdBuidr.getChild('close').getTestId()),
-                React__default.createElement(Icon, { icon: "close", className: cx('Tabs-link-close-icon') }))),
-            mode === 'chrome' ? (React__default.createElement("div", { className: "chrome-tab-background" },
-                React__default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--right" },
-                    React__default.createElement("path", { d: "M0,0 C0,68.483309 55.516691,124 124,124 L0,124 L0,-1 C0.00132103964,-0.667821298 0,-0.334064922 0,0 Z" })),
-                React__default.createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--left" },
-                    React__default.createElement("path", { d: "M124,0 L124,125 L0,125 L0,125 C68.483309,125 124,69.483309 124,1 L123.992,0 L124,0 Z" })))) : null));
-    };
-    Tabs.prototype.renderTab = function (child, index) {
-        if (!child) {
-            return;
-        }
-        var _a = (child === null || child === void 0 ? void 0 : child.props) || {}, hash = _a.hash, eventKey = _a.eventKey;
-        var _b = this.props, activeKeyProp = _b.activeKey, classnames = _b.classnames;
-        var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
-        return React__default.cloneElement(child, __assign(__assign({}, child.props), { key: this.generateTabKey(hash, eventKey, index), classnames: classnames, activeKey: activeKey }));
-    };
-    Tabs.prototype.renderArrow = function (type) {
-        var _this = this;
-        var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode, testIdBuilder = _a.testIdBuilder;
-        var mode = tabsMode || dMode;
-        if (['vertical', 'sidebar'].includes(mode)) {
-            return;
-        }
-        var cx = this.props.classnames;
-        var _b = this.state, isOverflow = _b.isOverflow, arrowLeftDisabled = _b.arrowLeftDisabled, arrowRightDisabled = _b.arrowRightDisabled;
-        var disabled = type === 'left' ? arrowLeftDisabled : arrowRightDisabled;
-        return isOverflow ? (React__default.createElement("div", __assign({ onClick: function () { return _this.handleArrow(type); }, className: cx('Tabs-linksContainer-arrow', 'Tabs-linksContainer-arrow--' + type, disabled && 'Tabs-linksContainer-arrow--disabled') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild("arrow-".concat(type)).getTestId()),
-            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" }))) : null;
-    };
-    Tabs.prototype.handleAddBtn = function () {
-        var onAdd = this.props.onAdd;
-        onAdd && onAdd();
-    };
-    Tabs.prototype.renderNavs = function (showClose) {
-        var _this = this;
-        if (showClose === void 0) { showClose = false; }
-        var _a = this.props, children = _a.children, collapseOnExceed = _a.collapseOnExceed, __ = _a.translate, cx = _a.classnames, popOverContainer = _a.popOverContainer, collapseBtnLabel = _a.collapseBtnLabel, titleClassName = _a.titleClassName;
-        if (!Array.isArray(children)) {
-            return null;
-        }
-        var doms = children.map(function (tab, index) {
-            return _this.renderNav(tab, index, showClose);
-        });
-        if (typeof collapseOnExceed == 'number' &&
-            collapseOnExceed &&
-            doms.length > collapseOnExceed) {
-            var rest_1 = doms.splice(collapseOnExceed - 1, doms.length + 1 - collapseOnExceed);
-            doms.push(React__default.createElement(PopOverContainer, { key: "togglor", placement: "center-bottom-center-top center-top-center-bottom", popOverClassName: cx('Tabs-PopOver'), popOverContainer: popOverContainer || (function () { return findDOMNode(_this); }), popOverRender: function (_a) {
-                    var onClose = _a.onClose;
-                    return (React__default.createElement("ul", { className: cx('Tabs-PopOverList', 'DropDown-menu'), onClick: onClose }, rest_1));
-                } }, function (_a) {
-                var onClick = _a.onClick; _a.ref; var isOpened = _a.isOpened;
-                return (React__default.createElement("li", { className: cx('Tabs-link', titleClassName, rest_1.some(function (item) { return ~item.props.className.indexOf('is-active'); })
-                        ? 'is-active'
-                        : '') },
-                    React__default.createElement("a", { className: cx('Tabs-togglor', isOpened ? 'is-opened' : ''), onClick: onClick },
-                        React__default.createElement("span", null, __(collapseBtnLabel || 'more')),
-                        React__default.createElement("span", { className: cx('Tabs-togglor-arrow') },
-                            React__default.createElement(Icon, { icon: "right-arrow-bold", className: "icon" })))));
-            }));
-        }
-        return doms;
-    };
-    Tabs.prototype.render = function () {
-        var _a;
-        var _this = this;
-        var _b = this.props, cx = _b.classnames, contentClassName = _b.contentClassName, className = _b.className, style = _b.style, dMode = _b.mode, tabsMode = _b.tabsMode, children = _b.children, additionBtns = _b.additionBtns, toolbar = _b.toolbar, linksClassName = _b.linksClassName, addable = _b.addable, draggable = _b.draggable, sidePosition = _b.sidePosition, addBtnText = _b.addBtnText, mobileUI = _b.mobileUI, testIdBuilder = _b.testIdBuilder;
-        var isOverflow = this.state.isOverflow;
-        if (!Array.isArray(children)) {
-            return null;
-        }
-        var mode = tabsMode || dMode;
-        var toolButtons = (React__default.createElement(React__default.Fragment, null,
-            addable && (React__default.createElement("div", __assign({ className: cx('Tabs-addable'), onClick: function () { return _this.handleAddBtn(); } }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('add-tab').getTestId()),
-                React__default.createElement(Icon, { icon: "plus", className: cx('Tabs-addable-icon') }),
-                addBtnText)),
-            toolbar));
-        return (React__default.createElement("div", __assign({ className: cx("Tabs", (_a = {},
-                _a["Tabs--".concat(mode)] = mode,
-                _a["sidebar--".concat(sidePosition)] = mode === 'sidebar',
-                _a), className), style: style }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getTestId(), { "data-role": "container" }),
-            !['vertical', 'sidebar', 'chrome'].includes(mode) ? (React__default.createElement("div", { className: cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar'), ref: this.resizeDom },
-                React__default.createElement("div", __assign({ className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('links').getTestId()),
-                    !mobileUI ? this.renderArrow('left') : null,
-                    React__default.createElement("div", { className: cx('Tabs-linksContainer-main') },
-                        React__default.createElement("ul", { className: cx('Tabs-links', linksClassName, {
-                                'is-mobile': mobileUI
-                            }), role: "tablist", ref: this.navMain },
-                            this.renderNavs(true),
-                            additionBtns,
-                            !isOverflow && toolButtons)),
-                    !mobileUI ? this.renderArrow('right') : null),
-                isOverflow && toolButtons)) : (React__default.createElement("div", { className: cx('Tabs-linksWrapper') },
-                React__default.createElement("ul", __assign({ className: cx('Tabs-links', linksClassName, {
-                        'is-mobile': mobileUI
-                    }), role: "tablist" }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('links').getTestId()),
-                    this.renderNavs(),
-                    additionBtns,
-                    toolbar))),
-            React__default.createElement("div", { className: cx('Tabs-content', contentClassName) }, children.map(function (child, index) {
-                return _this.renderTab(child, index);
-            })),
-            draggable && (React__default.createElement("div", __assign({ className: cx('Tabs-drag-tip'), ref: this.dragTipRef }, testIdBuilder === null || testIdBuilder === void 0 ? void 0 : testIdBuilder.getChild('drag').getTestId())))));
-    };
-    Tabs.defaultProps = {
-        mode: '',
-        contentClassName: '',
-        showTip: false,
-        showTipClassName: '',
-        sidePosition: 'left',
-        addBtnText: '新增',
-        collapseBtnLabel: 'more'
-    };
-    Tabs.Tab = Tab;
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Number, String]),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "handleStartEdit", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "handleEditInputChange", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "handleEdit", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [Object]),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "dragTipRef", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "destroyDragging", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", []),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "initDragging", null);
-    __decorate([
-        autobind,
-        __metadata("design:type", Function),
-        __metadata("design:paramtypes", [WheelEvent]),
-        __metadata("design:returntype", void 0)
-    ], Tabs.prototype, "handleWheel", null);
-    return Tabs;
-}(React__default.Component));
-var ThemedTabs = localeable(themeable(uncontrollable(Tabs, {
-    activeKey: 'onSelect'
-})));
-
-export { Tab, Tabs, ThemedTabs as default };