amis-ui 1.0.0-beta.0

package/dist/components/Tabs.js

@@ -0,0 +1,486 @@
+/**
+ * amis-ui v1.0.0-beta.0
+ * Copyright 2018-2022 fex
+ */
+
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var tslib = require('tslib');
+var React = require('react');
+var Transition = require('react-transition-group/Transition');
+var amisCore = require('amis-core');
+var uncontrollable = require('uncontrollable');
+var icons = require('./icons.js');
+var debounce = require('lodash/debounce');
+var ReactDOM = require('react-dom');
+var TooltipWrapper = require('./TooltipWrapper.js');
+var Sortable = require('sortablejs');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+var Transition__default = /*#__PURE__*/_interopDefaultLegacy(Transition);
+var debounce__default = /*#__PURE__*/_interopDefaultLegacy(debounce);
+var Sortable__default = /*#__PURE__*/_interopDefaultLegacy(Sortable);
+
+/**
+ * @file Tabs
+ * @description 选项卡
+ * @author fex
+ */
+var _a;
+var transitionStyles = (_a = {},
+    _a[Transition.ENTERING] = 'in',
+    _a[Transition.ENTERED] = 'in',
+    _a);
+var TabComponent = /** @class */ (function (_super) {
+    tslib.__extends(TabComponent, _super);
+    function TabComponent() {
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
+        return _this;
+    }
+    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) {
+            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 TabComponent;
+}(React__default["default"].PureComponent));
+var Tab = amisCore.themeable(TabComponent);
+var Tabs = /** @class */ (function (_super) {
+    tslib.__extends(Tabs, _super);
+    function Tabs(props) {
+        var _this = _super.call(this, props) || this;
+        _this.navMain = React__default["default"].createRef(); // HTMLDivElement
+        _this.scroll = false;
+        _this.id = amisCore.guid();
+        _this.draging = false;
+        _this.toDispose = [];
+        _this.resizeDom = React__default["default"].createRef();
+        _this.checkArrowStatus = debounce__default["default"](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(amisCore.resizeSensor(this.resizeDom.current, function () {
+                return _this.computedWidth();
+            }));
+    };
+    Tabs.prototype.componentDidUpdate = function () {
+        // 判断是否是由滚动触发的数据更新，如果是则不需要再次判断容器与内容的关系
+        if (!this.scroll && !this.draging) {
+            this.computedWidth();
+        }
+        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.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 = ReactDOM.findDOMNode(this);
+        this.sortable = new Sortable__default["default"](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, _c;
+        var _d = this.navMain.current || {
+            scrollLeft: 0,
+            scrollWidth: 0,
+            clientWidth: 0
+        }, scrollLeft = _d.scrollLeft, scrollWidth = _d.scrollWidth, clientWidth = _d.clientWidth;
+        if (type === 'left' && scrollLeft > 0) {
+            (_a = this.navMain.current) === null || _a === void 0 ? void 0 : _a.scrollTo({
+                left: 0,
+                behavior: 'smooth'
+            });
+            this.setState({
+                arrowRightDisabled: false,
+                arrowLeftDisabled: true
+            });
+        }
+        else if (type === 'right' && scrollWidth > scrollLeft + clientWidth) {
+            (_b = this.navMain.current) === null || _b === void 0 ? void 0 : _b.scrollTo({
+                left: (_c = this.navMain.current) === null || _c === void 0 ? void 0 : _c.scrollWidth,
+                behavior: 'smooth'
+            });
+            this.setState({
+                arrowRightDisabled: true,
+                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;
+    };
+    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;
+        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;
+        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) {
+                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,
+                title,
+                " ",
+                iconElement)) : (React__default["default"].createElement(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: eventKey !== null && eventKey !== void 0 ? eventKey : index, onClick: function () { return (disabled ? '' : _this.handleSelect(eventKey)); }, onDoubleClick: function () {
+                editable && _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) {
+                    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));
+    };
+    Tabs.prototype.renderTab = function (child, index) {
+        if (!child) {
+            return;
+        }
+        var _a = this.props, activeKeyProp = _a.activeKey, classnames = _a.classnames;
+        var eventKey = child.props.eventKey;
+        var activeKey = activeKeyProp === undefined && index === 0 ? eventKey : activeKeyProp;
+        return React__default["default"].cloneElement(child, tslib.__assign(tslib.__assign({}, child.props), { key: eventKey, classnames: classnames, activeKey: activeKey }));
+    };
+    Tabs.prototype.renderArrow = function (type) {
+        var _this = this;
+        var _a = this.props, dMode = _a.mode, tabsMode = _a.tabsMode;
+        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["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;
+    };
+    Tabs.prototype.handleAddBtn = function () {
+        var onAdd = this.props.onAdd;
+        onAdd && onAdd();
+    };
+    Tabs.prototype.render = function () {
+        var _a;
+        var _this = this;
+        var _b = this.props, cx = _b.classnames, contentClassName = _b.contentClassName, className = _b.className, 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 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') }),
+                addBtnText)),
+            toolbar));
+        return (React__default["default"].createElement("div", { className: cx("Tabs", (_a = {},
+                _a["Tabs--".concat(mode)] = mode,
+                _a["sidebar--".concat(sidePosition)] = mode === 'sidebar',
+                _a), className) },
+            !['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 },
+                            children.map(function (tab, index) {
+                                return _this.renderNav(tab, index, 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" },
+                    children.map(function (tab, index) { return _this.renderNav(tab, index, false); }),
+                    additionBtns,
+                    toolbar))),
+            React__default["default"].createElement("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 }))));
+    };
+    Tabs.defaultProps = {
+        mode: '',
+        contentClassName: '',
+        showTip: false,
+        showTipClassName: '',
+        sidePosition: 'left',
+        addBtnText: '新增' // 由于组件用的地方比较多，这里暂时不好改翻译
+    };
+    Tabs.Tab = Tab;
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Number, String]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "handleStartEdit", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "handleEditInputChange", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "handleEdit", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [Object]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "dragTipRef", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "destroyDragging", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", []),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "initDragging", null);
+    tslib.__decorate([
+        amisCore.autobind,
+        tslib.__metadata("design:type", Function),
+        tslib.__metadata("design:paramtypes", [WheelEvent]),
+        tslib.__metadata("design:returntype", void 0)
+    ], Tabs.prototype, "handleWheel", null);
+    return Tabs;
+}(React__default["default"].Component));
+var ThemedTabs = amisCore.themeable(uncontrollable.uncontrollable(Tabs, {
+    activeKey: 'onSelect'
+}));
+
+exports.Tab = Tab;
+exports.Tabs = Tabs;
+exports["default"] = ThemedTabs;