/**
 * amis-ui v6.14.0-beta.1
 * 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 };
