amis-ui 3.1.1 → 3.3.0

package/lib/components/Tabs.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v3.1.1
+ * 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',
@@ -39,19 +37,67 @@ var TabComponent = /** @class */ (function (_super) {
     tslib.__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 = tslib.__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;
-        return (React__default["default"].createElement(Transition__default["default"], { in: activeKey === eventKey, mountOnEnter: mountOnEnter, unmountOnExit: typeof reload === 'boolean' ? reload : unmountOnExit, timeout: 500 }, function (status) {
+        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 (_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) }, 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([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], TabComponent.prototype, "onTouchStart", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], TabComponent.prototype, "onTouchMove", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], TabComponent.prototype, "onTouchEnd", null);
     return TabComponent;
 }(React__default["default"].PureComponent));
 var Tab = amisCore.themeable(TabComponent);
@@ -127,6 +173,7 @@ var Tabs = /** @class */ (function (_super) {
             }));
     };
     Tabs.prototype.componentDidUpdate = function (preProps) {
+        var _a;
         // 只有 key 变化或者 tab 改变，才会重新计算，避免多次计算导致 顶部标签 滚动问题
         var isTabsModified = amisCore.isObjectShallowModified({
             activeKey: this.props.activeKey,
@@ -158,6 +205,25 @@ var Tabs = /** @class */ (function (_super) {
         if (!this.scroll && !this.draging && isTabsModified) {
             this.computedWidth();
         }
+        // 移动端取消箭头切换，改为滚动切换激活项居中
+        var _b = this.props; _b.classPrefix; var activeKey = _b.activeKey, useMobileUI = _b.useMobileUI;
+        var mobileUI = useMobileUI && amisCore.isMobile();
+        if (mobileUI && preProps.activeKey !== activeKey) {
+            var ns_1 = this.props.classPrefix;
+            var dom = ReactDOM.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 () {
@@ -359,38 +425,40 @@ var Tabs = /** @class */ (function (_super) {
             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;
-        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, hash = _b.hash;
+        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 () {
-                editable && _this.handleStartEdit(index, title);
+        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: 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) {
@@ -411,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;
@@ -432,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;
@@ -451,39 +519,44 @@ var Tabs = /** @class */ (function (_super) {
     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;
+        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, useMobileUI = _b.useMobileUI;
+        var mobileUI = useMobileUI && amisCore.isMobile();
         var isOverflow = this.state.isOverflow;
         if (!Array.isArray(children)) {
             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') },
-                    this.renderArrow('left'),
-                    React__default["default"].createElement("div", { className: cx('Tabs-linksContainer-main') },
-                        React__default["default"].createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist", ref: this.navMain },
+            !['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,
+                    _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)),
-                    this.renderArrow('right')),
-                isOverflow && toolButtons)) : (React__default["default"].createElement("div", { className: cx('Tabs-linksWrapper') },
-                React__default["default"].createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
+                    !mobileUI ? this.renderArrow('right') : null),
+                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: '',