amis-ui 6.13.0-beta.8 → 6.13.0

package/esm/components/Tabs.js

@@ -0,0 +1,607 @@
+/**
+ * amis-ui v6.13.0
+ * 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 };