amis-ui 3.2.0 → 3.3.0

package/lib/components/Tabs.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.2.0
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
@@ -25,11 +25,9 @@ var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
 var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
 var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
 
-/**
- * @file Tabs
- * @description 选项卡
- * @author fex
- */
+var __react_jsx__ = require('react');
+var _J$X_ = (__react_jsx__["default"] || __react_jsx__).createElement;
+(__react_jsx__["default"] || __react_jsx__).Fragment;
 var _a;
 var transitionStyles = (_a = {},
     _a[Transition.ENTERING] = 'in',
@@ -75,11 +73,11 @@ var TabComponent = /** @class */ (function (_super) {
         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, useMobileUI = _a.useMobileUI;
         var mobileUI = useMobileUI && amisCore.isMobile();
-        return (React__default["default"].createElement(Transition__default["default"], { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
+        return (_J$X_(Transition__default["default"], { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
             if (status === Transition.ENTERING) {
                 _this.contentDom.offsetWidth;
             }
-            return (React__default["default"].createElement("div", { ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className), onTouchStart: swipeable && mobileUI ? _this.onTouchStart : amisCore.noop, onTouchMove: swipeable && mobileUI ? _this.onTouchMove : amisCore.noop, onTouchEnd: swipeable && mobileUI ? _this.onTouchEnd : amisCore.noop, onTouchCancel: swipeable && mobileUI ? _this.onTouchEnd : amisCore.noop }, children));
+            return (_J$X_("div", { ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className), onTouchStart: swipeable && mobileUI ? _this.onTouchStart : amisCore.noop, onTouchMove: swipeable && mobileUI ? _this.onTouchMove : amisCore.noop, onTouchEnd: swipeable && mobileUI ? _this.onTouchEnd : amisCore.noop, onTouchCancel: swipeable && mobileUI ? _this.onTouchEnd : amisCore.noop }, children));
         }));
     };
     tslib.__decorate([
@@ -430,37 +428,37 @@ var Tabs = /** @class */ (function (_super) {
         var _b = child.props, eventKey = _b.eventKey, disabled = _b.disabled, icon = _b.icon, iconPosition = _b.iconPosition, title = _b.title, toolbar = _b.toolbar, 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 = amisCore.generateIcon(cx, icon, 'Icon');
-        var link = (React__default["default"].createElement("a", { title: typeof title === 'string' ? title : undefined }, editable && editingIndex === index ? (React__default["default"].createElement("input", { className: cx('Tabs-link-edit'), type: "text", value: editInputText, autoFocus: true, onFocus: function (e) {
+        var iconElement = _J$X_(icons.Icon, { cx: cx, icon: icon, className: "Icon" });
+        var link = (_J$X_("a", { title: typeof title === 'string' ? title : undefined }, editable && editingIndex === index ? (_J$X_("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["default"].createElement(React__default["default"].Fragment, null,
-            icon ? (iconPosition === 'right' ? (React__default["default"].createElement(React__default["default"].Fragment, null,
+            } })) : (_J$X_(React__default["default"].Fragment, null,
+            icon ? (iconPosition === 'right' ? (_J$X_(React__default["default"].Fragment, null,
                 title,
                 " ",
-                iconElement)) : (React__default["default"].createElement(React__default["default"].Fragment, null,
+                iconElement)) : (_J$X_(React__default["default"].Fragment, null,
                 iconElement,
                 " ",
                 title))) : (title),
             React__default["default"].isValidElement(toolbar) ? toolbar : null))));
-        return (React__default["default"].createElement("li", { className: cx('Tabs-link', activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', tabClassName), key: this.generateTabKey(hash, eventKey, index), onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); }, onDoubleClick: function () {
+        return (_J$X_("li", { className: cx('Tabs-link', activeKey === eventKey ? 'is-active' : '', disabled ? 'is-disabled' : '', tabClassName), key: this.generateTabKey(hash, eventKey, index), onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); }, onDoubleClick: function () {
                 editable &&
                     typeof title === 'string' &&
                     _this.handleStartEdit(index, title);
             } },
-            showTip ? (React__default["default"].createElement(TooltipWrapper["default"], { 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["default"].createElement("span", { className: cx('Tabs-link-close'), onClick: function (e) {
+            showTip ? (_J$X_(TooltipWrapper["default"], { 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) && (_J$X_("span", { className: cx('Tabs-link-close'), onClick: function (e) {
                     e.stopPropagation();
                     _this.props.onClose &&
                         _this.props.onClose(index, eventKey !== null && eventKey !== void 0 ? eventKey : index);
                 } },
-                React__default["default"].createElement(icons.Icon, { icon: "close", className: cx('Tabs-link-close-icon') }))),
-            mode === 'chrome' ? (React__default["default"].createElement("div", { className: "chrome-tab-background" },
-                React__default["default"].createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--right" },
-                    React__default["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["default"].createElement("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--left" },
-                    React__default["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));
+                _J$X_(icons.Icon, { icon: "close", className: cx('Tabs-link-close-icon') }))),
+            mode === 'chrome' ? (_J$X_("div", { className: "chrome-tab-background" },
+                _J$X_("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--right" },
+                    _J$X_("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" })),
+                _J$X_("svg", { viewBox: "0 0 124 124", className: "chrome-tab-background--left" },
+                    _J$X_("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) {
@@ -481,8 +479,8 @@ var Tabs = /** @class */ (function (_super) {
         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["default"].createElement("div", { onClick: function () { return _this.handleArrow(type); }, className: cx('Tabs-linksContainer-arrow', 'Tabs-linksContainer-arrow--' + type, disabled && 'Tabs-linksContainer-arrow--disabled') },
-            React__default["default"].createElement("i", { className: 'iconfont icon-arrow-' + type }))) : null;
+        return isOverflow ? (_J$X_("div", { onClick: function () { return _this.handleArrow(type); }, className: cx('Tabs-linksContainer-arrow', 'Tabs-linksContainer-arrow--' + type, disabled && 'Tabs-linksContainer-arrow--disabled') },
+            _J$X_("i", { className: 'iconfont icon-arrow-' + type }))) : null;
     };
     Tabs.prototype.handleAddBtn = function () {
         var onAdd = this.props.onAdd;
@@ -502,18 +500,18 @@ var Tabs = /** @class */ (function (_super) {
             collapseOnExceed &&
             doms.length > collapseOnExceed) {
             var rest_1 = doms.splice(collapseOnExceed - 1, doms.length + 1 - collapseOnExceed);
-            doms.push(React__default["default"].createElement(PopOverContainer.PopOverContainer, { key: "togglor", placement: "center-bottom-center-top center-top-center-bottom", popOverClassName: cx('Tabs-PopOver'), popOverContainer: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), popOverRender: function (_a) {
+            doms.push(_J$X_(PopOverContainer.PopOverContainer, { key: "togglor", placement: "center-bottom-center-top center-top-center-bottom", popOverClassName: cx('Tabs-PopOver'), popOverContainer: popOverContainer || (function () { return ReactDOM.findDOMNode(_this); }), popOverRender: function (_a) {
                     var onClose = _a.onClose;
-                    return (React__default["default"].createElement("ul", { className: cx('Tabs-PopOverList', 'DropDown-menu'), onClick: onClose }, rest_1));
+                    return (_J$X_("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["default"].createElement("li", { className: cx('Tabs-link', rest_1.some(function (item) { return ~item.props.className.indexOf('is-active'); })
+                return (_J$X_("li", { className: cx('Tabs-link', rest_1.some(function (item) { return ~item.props.className.indexOf('is-active'); })
                         ? 'is-active'
                         : '') },
-                    React__default["default"].createElement("a", { className: cx('Tabs-togglor', isOpened ? 'is-opened' : ''), onClick: onClick },
-                        React__default["default"].createElement("span", null, __(collapseBtnLabel || 'more')),
-                        React__default["default"].createElement("span", { className: cx('Tabs-togglor-arrow') },
-                            React__default["default"].createElement(icons.Icon, { icon: "right-arrow-bold", className: "icon" })))));
+                    _J$X_("a", { className: cx('Tabs-togglor', isOpened ? 'is-opened' : ''), onClick: onClick },
+                        _J$X_("span", null, __(collapseBtnLabel || 'more')),
+                        _J$X_("span", { className: cx('Tabs-togglor-arrow') },
+                            _J$X_(icons.Icon, { icon: "right-arrow-bold", className: "icon" })))));
             }));
         }
         return doms;
@@ -528,37 +526,37 @@ var Tabs = /** @class */ (function (_super) {
             return null;
         }
         var mode = tabsMode || dMode;
-        var toolButtons = (React__default["default"].createElement(React__default["default"].Fragment, null,
-            addable && (React__default["default"].createElement("div", { className: cx('Tabs-addable'), onClick: function () { return _this.handleAddBtn(); } },
-                React__default["default"].createElement(icons.Icon, { icon: "plus", className: cx('Tabs-addable-icon') }),
+        var toolButtons = (_J$X_(React__default["default"].Fragment, null,
+            addable && (_J$X_("div", { className: cx('Tabs-addable'), onClick: function () { return _this.handleAddBtn(); } },
+                _J$X_(icons.Icon, { icon: "plus", className: cx('Tabs-addable-icon') }),
                 addBtnText)),
             toolbar));
-        return (React__default["default"].createElement("div", { className: cx("Tabs", (_a = {},
+        return (_J$X_("div", { className: cx("Tabs", (_a = {},
                 _a["Tabs--".concat(mode)] = mode,
                 _a["sidebar--".concat(sidePosition)] = mode === 'sidebar',
                 _a), className), style: style },
-            !['vertical', 'sidebar', 'chrome'].includes(mode) ? (React__default["default"].createElement("div", { className: cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar'), ref: this.resizeDom },
-                React__default["default"].createElement("div", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
+            !['vertical', 'sidebar', 'chrome'].includes(mode) ? (_J$X_("div", { className: cx('Tabs-linksContainer-wrapper', toolbar && 'Tabs-linksContainer-wrapper--toolbar'), ref: this.resizeDom },
+                _J$X_("div", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
                     !mobileUI ? this.renderArrow('left') : null,
-                    React__default["default"].createElement("div", { className: cx('Tabs-linksContainer-main') },
-                        React__default["default"].createElement("ul", { className: cx('Tabs-links', linksClassName, {
+                    _J$X_("div", { className: cx('Tabs-linksContainer-main') },
+                        _J$X_("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["default"].createElement("div", { className: cx('Tabs-linksWrapper') },
-                React__default["default"].createElement("ul", { className: cx('Tabs-links', linksClassName, {
+                isOverflow && toolButtons)) : (_J$X_("div", { className: cx('Tabs-linksWrapper') },
+                _J$X_("ul", { className: cx('Tabs-links', linksClassName, {
                         'is-mobile': mobileUI
                     }), role: "tablist" },
                     this.renderNavs(),
                     additionBtns,
                     toolbar))),
-            React__default["default"].createElement("div", { className: cx('Tabs-content', contentClassName) }, children.map(function (child, index) {
+            _J$X_("div", { className: cx('Tabs-content', contentClassName) }, children.map(function (child, index) {
                 return _this.renderTab(child, index);
             })),
-            draggable && (React__default["default"].createElement("div", { className: cx('Tabs-drag-tip'), ref: this.dragTipRef }))));
+            draggable && (_J$X_("div", { className: cx('Tabs-drag-tip'), ref: this.dragTipRef }))));
     };
     Tabs.defaultProps = {
         mode: '',