amis-ui 3.1.1 → 3.3.0

package/esm/components/Tabs.js

@@ -1,11 +1,11 @@
 /**
- * amis-ui v3.1.1
+ * amis-ui v3.3.0
  * Copyright 2018-2023 fex
  */
 
 import { __extends, __assign, __decorate, __metadata } from 'tslib';
 import React__default from 'react';
-import { themeable, guid, resizeSensor, isObjectShallowModified, generateIcon, autobind, localeable, uncontrollable } from 'amis-core';
+import { isMobile, 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';
@@ -28,19 +28,67 @@ 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;
+        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 && isMobile();
         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", { ref: _this.contentRef, className: cx(transitionStyles[status], activeKey === eventKey ? 'is-active' : '', 'Tabs-pane', className) }, children));
+            return (React__default.createElement("div", { 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 }, 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);
@@ -116,6 +164,7 @@ var Tabs = /** @class */ (function (_super) {
             }));
     };
     Tabs.prototype.componentDidUpdate = function (preProps) {
+        var _a;
         // 只有 key 变化或者 tab 改变，才会重新计算，避免多次计算导致 顶部标签 滚动问题
         var isTabsModified = isObjectShallowModified({
             activeKey: this.props.activeKey,
@@ -147,6 +196,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 && isMobile();
+        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 () {
@@ -348,10 +416,10 @@ 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 = generateIcon(cx, icon, 'Icon');
+        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) {
@@ -366,9 +434,11 @@ var Tabs = /** @class */ (function (_super) {
                 title))) : (title),
             React__default.isValidElement(toolbar) ? toolbar : null))));
         return (React__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);
+                editable &&
+                    typeof title === 'string' &&
+                    _this.handleStartEdit(index, title);
             } },
-            showTip ? (React__default.createElement(TooltipWrapper, { placement: "top", tooltip: title, trigger: "hover", tooltipClassName: showTipClassName }, link)) : (link),
+            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", { className: cx('Tabs-link-close'), onClick: function (e) {
                     e.stopPropagation();
                     _this.props.onClose &&
@@ -440,7 +510,8 @@ 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 && isMobile();
         var isOverflow = this.state.isOverflow;
         if (!Array.isArray(children)) {
             return null;
@@ -457,15 +528,19 @@ var Tabs = /** @class */ (function (_super) {
                 _a), className), style: style },
             !['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", { className: cx('Tabs-linksContainer', isOverflow && 'Tabs-linksContainer--overflow') },
-                    this.renderArrow('left'),
+                    !mobileUI ? this.renderArrow('left') : null,
                     React__default.createElement("div", { className: cx('Tabs-linksContainer-main') },
-                        React__default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist", ref: this.navMain },
+                        React__default.createElement("ul", { className: cx('Tabs-links', linksClassName, {
+                                'is-mobile': mobileUI
+                            }), role: "tablist", ref: this.navMain },
                             this.renderNavs(true),
                             additionBtns,
                             !isOverflow && toolButtons)),
-                    this.renderArrow('right')),
+                    !mobileUI ? this.renderArrow('right') : null),
                 isOverflow && toolButtons)) : (React__default.createElement("div", { className: cx('Tabs-linksWrapper') },
-                React__default.createElement("ul", { className: cx('Tabs-links', linksClassName), role: "tablist" },
+                React__default.createElement("ul", { className: cx('Tabs-links', linksClassName, {
+                        'is-mobile': mobileUI
+                    }), role: "tablist" },
                     this.renderNavs(),
                     additionBtns,
                     toolbar))),