amis-ui 2.2.0 → 2.3.1

package/lib/components/Spinner.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.1
  * Copyright 2018-2022 fex
  */
 
@@ -12,6 +12,8 @@ var React = require('react');
 var amisCore = require('amis-core');
 var Transition = require('react-transition-group/Transition');
 var icons = require('./icons.js');
+var mobxStateTree = require('mobx-state-tree');
+var mobx = require('mobx');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
@@ -29,35 +31,132 @@ var fadeStyles = (_a = {},
     _a[Transition.ENTERED] = 'in',
     _a[Transition.ENTERING] = 'in',
     _a);
+var SpinnerSharedStore = mobxStateTree.types
+    .model('SpinnerSharedStore', {})
+    .volatile(function (self) {
+    return {
+        // 保存所有可以进入 loading 状态（props.show = true）的 Spinner 的父级容器
+        spinnerContainers: mobx.observable.set([], {
+            deep: false
+        })
+    };
+})
+    .actions(function (self) {
+    return {
+        push: function (spinnerContainer) {
+            if (self.spinnerContainers.has(spinnerContainer)) {
+                return;
+            }
+            self.spinnerContainers.add(spinnerContainer);
+        },
+        remove: function (spinnerContainer) {
+            if (self.spinnerContainers.has(spinnerContainer)) {
+                self.spinnerContainers.delete(spinnerContainer);
+            }
+        },
+        /**
+         *  判断当前 Spinner 是否可以进入 loading 状态
+         * @param spinnerContainerWillCheck 待检查的 Spinner 父容器
+         * @returns {boolean} 是否可以进入 loading
+         */
+        checkLoading: function (spinnerContainerWillCheck) {
+            if (self.spinnerContainers.has(spinnerContainerWillCheck)) {
+                if (!self.spinnerContainers.size) {
+                    return false;
+                }
+                var loading_1 = true;
+                // 检查缓存的容器中是否有当前容器的父级元素
+                self.spinnerContainers.forEach(function (container) {
+                    if (container.contains(spinnerContainerWillCheck) &&
+                        container !== spinnerContainerWillCheck) {
+                        loading_1 = false;
+                    }
+                });
+                return loading_1;
+            }
+            return false;
+        }
+    };
+});
+var store = SpinnerSharedStore.create({});
 var Spinner = /** @class */ (function (_super) {
     tslib.__extends(Spinner, _super);
     function Spinner() {
-        return _super !== null && _super.apply(this, arguments) || this;
+        var _this = _super !== null && _super.apply(this, arguments) || this;
+        _this.state = {
+            spinning: false,
+            showMark: true
+        };
+        _this.parent = null;
+        /**
+         * 解决同级（same parent node） spinner 的 show 不全为 true 时
+         * 辅助控制 spinning; push: + 1 ; remove: -1;
+         * > 0 : spinning = checkLoading
+         * = 0 : spinning = false; cannot remove
+         */
+        _this.count = 0;
+        _this.spinnerRef = function (dom) {
+            if (dom) {
+                _this.parent = dom.parentNode;
+                _this.setState({
+                    showMark: false
+                });
+            }
+        };
+        /**
+         * 监控着 spinnerContainers 的变化
+         */
+        _this.loadingChecker = mobx.reaction(function () { return store.spinnerContainers.size; }, function () {
+            _this.setState({
+                spinning: store.checkLoading(_this.parent) && _this.count > 0
+            });
+        });
+        return _this;
     }
+    Spinner.prototype.componentDidUpdate = function () {
+        if (this.parent) {
+            if (this.props.show) {
+                this.count++;
+                store.push(this.parent);
+            }
+            else if (this.state.spinning && this.count > 0) {
+                store.remove(this.parent);
+                this.count--;
+            }
+        }
+    };
+    Spinner.prototype.componentWillUnmount = function () {
+        // 卸载 reaction
+        this.loadingChecker();
+        // 删除 当前 parent 元素
+        store.remove(this.parent);
+    };
     Spinner.prototype.render = function () {
-        var _a = this.props, cx = _a.classnames, show = _a.show, className = _a.className, spinnerClassName = _a.spinnerClassName, _b = _a.size, size = _b === void 0 ? '' : _b, overlay = _a.overlay, delay = _a.delay, icon = _a.icon, tip = _a.tip, _c = _a.tipPlacement, tipPlacement = _c === void 0 ? '' : _c;
+        var _a = this.props, cx = _a.classnames, className = _a.className, spinnerClassName = _a.spinnerClassName, _b = _a.size, size = _b === void 0 ? '' : _b, overlay = _a.overlay, delay = _a.delay, icon = _a.icon, tip = _a.tip, _c = _a.tipPlacement, tipPlacement = _c === void 0 ? '' : _c;
         var isCustomIcon = icon && React__default["default"].isValidElement(icon);
         var timeout = { enter: delay, exit: 0 };
-        return (React__default["default"].createElement(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, in: show, timeout: timeout }, function (status) {
-            var _a, _b, _c;
-            return (React__default["default"].createElement(React__default["default"].Fragment, null,
-                overlay ? (React__default["default"].createElement("div", { className: cx("Spinner-overlay", fadeStyles[status]) })) : null,
-                React__default["default"].createElement("div", { "data-testid": "spinner", className: cx("Spinner", tip && (_a = {},
-                        _a["Spinner-tip--".concat(tipPlacement)] = [
-                            'top',
-                            'right',
-                            'bottom',
-                            'left'
-                        ].includes(tipPlacement),
-                        _a), (_b = {}, _b["Spinner--overlay"] = overlay, _b), fadeStyles[status], className) },
-                    React__default["default"].createElement("div", { className: cx("Spinner-icon", (_c = {},
-                            _c["Spinner-icon--".concat(size)] = ['lg', 'sm'].includes(size),
-                            _c["Spinner-icon--default"] = !icon,
-                            _c["Spinner-icon--simple"] = !isCustomIcon && icon,
-                            _c["Spinner-icon--custom"] = isCustomIcon,
-                            _c), spinnerClassName) }, icon ? (isCustomIcon ? (icon) : icons.hasIcon(icon) ? (React__default["default"].createElement(icons.Icon, { icon: icon, className: "icon" })) : (amisCore.generateIcon(cx, icon, 'icon'))) : null),
-                    tip ? React__default["default"].createElement("span", { className: cx("Spinner-tip") }, tip) : '')));
-        }));
+        return (React__default["default"].createElement(React__default["default"].Fragment, null,
+            this.state.showMark && (React__default["default"].createElement("span", { className: cx('Spinner-mark'), ref: this.spinnerRef })),
+            React__default["default"].createElement(Transition__default["default"], { mountOnEnter: true, unmountOnExit: true, in: this.state.spinning, timeout: timeout }, function (status) {
+                var _a, _b, _c;
+                return (React__default["default"].createElement(React__default["default"].Fragment, null,
+                    overlay ? (React__default["default"].createElement("div", { className: cx("Spinner-overlay", fadeStyles[status]) })) : null,
+                    React__default["default"].createElement("div", { "data-testid": "spinner", className: cx("Spinner", tip && (_a = {},
+                            _a["Spinner-tip--".concat(tipPlacement)] = [
+                                'top',
+                                'right',
+                                'bottom',
+                                'left'
+                            ].includes(tipPlacement),
+                            _a), (_b = {}, _b["Spinner--overlay"] = overlay, _b), fadeStyles[status], className) },
+                        React__default["default"].createElement("div", { className: cx("Spinner-icon", (_c = {},
+                                _c["Spinner-icon--".concat(size)] = ['lg', 'sm'].includes(size),
+                                _c["Spinner-icon--default"] = !icon,
+                                _c["Spinner-icon--simple"] = !isCustomIcon && icon,
+                                _c["Spinner-icon--custom"] = isCustomIcon,
+                                _c), spinnerClassName) }, icon ? (isCustomIcon ? (icon) : icons.hasIcon(icon) ? (React__default["default"].createElement(icons.Icon, { icon: icon, className: "icon" })) : (amisCore.generateIcon(cx, icon, 'icon'))) : null),
+                        tip ? React__default["default"].createElement("span", { className: cx("Spinner-tip") }, tip) : '')));
+            })));
     };
     Spinner.defaultProps = {
         show: true,

package/lib/components/Steps.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.1
  * Copyright 2018-2022 fex
  */
 

package/lib/components/Switch.js

@@ -1,5 +1,5 @@
 /**
- * amis-ui v2.2.0
+ * amis-ui v2.3.1
  * Copyright 2018-2022 fex
  */