@fonixtree/magic-design 2.0.30 → 2.0.31

package/es/common/ImageLazy/index.js

@@ -100,9 +100,11 @@ function (_super) {
 
     this.intersectionObserver = new IntersectionObserver(function (entries) {
       if (entries[0].isIntersecting) {
-        _this.setState({
-          show: true
-        });
+        if (!_this.state.show) {
+          _this.setState({
+            show: true
+          });
+        }
       }
     }, {
       root: (_a = this.props) === null || _a === void 0 ? void 0 : _a.rootContainer(),
@@ -120,14 +122,13 @@ function (_super) {
     var _this = this;
 
     var _a = this.props,
-        root = _a.root,
         _b = _a.lazy,
         lazy = _b === void 0 ? true : _b,
         src = _a.src,
         onLoadFunc = _a.onLoadFunc,
         style = _a.style,
         className = _a.className,
-        rest = __rest(_a, ["root", "lazy", "src", "onLoadFunc", "style", "className"]);
+        rest = __rest(_a, ["lazy", "src", "onLoadFunc", "style", "className"]);
 
     var show = this.state.show;
     var isShow = lazy ? show : true;

package/es/composite-comp/bol/components/Carousel/index.js

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _decorator = require("../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -68,40 +70,26 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      show: false
+      lazyShow: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.intersectionObserver = null;
     return _this;
   }
 
-  Carousel.prototype.componentDidMount = function () {
-    var _this = this;
+  Carousel.prototype.componentDidMount = function () {};
 
-    this.intersectionObserver = new IntersectionObserver(function (entries) {
-      if (entries[0].isIntersecting) {
-        _this.setState({
-          show: true
-        });
-      }
-    }, {
-      root: null,
-      // threshold: 0.8,
-      rootMargin: '0px 0px 100px 0px'
-    });
-    this.intersectionObserver.observe(this.carouselRef.current);
-  };
-
-  Carousel.prototype.componentWillUnmount = function () {
-    this.intersectionObserver.disconnect(this.carouselRef.current);
-  };
+  Carousel.prototype.componentWillUnmount = function () {};
 
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    var show = this.state.show;
+    var lazyShow = this.state.lazyShow;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      ref: this.carouselRef
-    }, show && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+      ref: this.carouselRef,
+      style: {
+        height: lazyShow ? 'auto' : 300
+      }
+    }, lazyShow && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
@@ -111,6 +99,11 @@ function (_super) {
   Carousel.defaultProps = {};
   Carousel.type = 'CAROUSEL';
   Carousel.getDefaultJSON = _defaultJSON.getDefaultJSON;
+
+  __decorate([(0, _decorator.lazy)('carouselRef')], Carousel.prototype, "componentDidMount", null);
+
+  __decorate([_decorator.lazyDestroy], Carousel.prototype, "componentWillUnmount", null);
+
   Carousel = __decorate([_compositeDecorator["default"]], Carousel);
   return Carousel;
 }(_react.Component);

package/es/composite-comp/bol/components/Carousel/mobile/index.js

@@ -73,24 +73,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxH: 282
-  },
-  2: {
-    maxH: 137
-  },
-  3: {
-    maxH: 87
-  },
-  4: {
-    maxH: 66
-  },
-  5: {
-    maxH: 50
-  }
-};
-
+// const MOBILE_IMG_SIZE = {
+//   1: { maxH: 282 },
+//   2: { maxH: 137 },
+//   3: { maxH: 87 },
+//   4: { maxH: 66 },
+//   5: { maxH: 50 },
+// };
 var CarouselMobile =
 /** @class */
 function (_super) {

package/es/decorator/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "compositeDecorator", {
     return _compositeDecorator["default"];
   }
 });
+Object.defineProperty(exports, "lazy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazy;
+  }
+});
+Object.defineProperty(exports, "lazyDestroy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazyDestroy;
+  }
+});
 Object.defineProperty(exports, "metaDecorator", {
   enumerable: true,
   get: function get() {
@@ -28,4 +40,6 @@ var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
 var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
 
+var _lazyLoadDecorator = require("./lazyLoadDecorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/es/decorator/lazyLoadDecorator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazy = lazy;
+exports.lazyDestroy = void 0;
+
+/**
+ * 组件懒加载
+ * @param refName 所需懒加载的组件ref名
+ * @returns
+ */
+function lazy(refName) {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function () {
+      var _this = this;
+
+      var rest = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+      }
+
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          if (!_this.state.lazyShow) {
+            _this.setState({
+              lazyShow: true
+            });
+          }
+        }
+      }, {
+        root: null,
+        // threshold: 0.8,
+        rootMargin: '0px 0px 100px 0px'
+      });
+      this.intersectionObserver.observe(this[refName].current);
+      /** 监听状态变化 */
+
+      this._intersectionObserverDestroy = function () {
+        _this.intersectionObserver.disconnect(_this[refName].current);
+      };
+
+      fn.apply(this, rest);
+    };
+  };
+}
+/**
+ * 销毁lazy监听
+ */
+
+
+var lazyDestroy = function lazyDestroy(target, name, descriptor) {
+  var fn = descriptor.value;
+
+  descriptor.value = function () {
+    var rest = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      rest[_i] = arguments[_i];
+    }
+
+    if (this._intersectionObserverDestroy) {
+      this._intersectionObserverDestroy();
+    } // this._intersectionObserverDestroy && this._intersectionObserverDestroy();
+
+
+    fn.apply(this, rest);
+  };
+};
+
+exports.lazyDestroy = lazyDestroy;

package/lib/common/ImageLazy/index.js

@@ -100,9 +100,11 @@ function (_super) {
 
     this.intersectionObserver = new IntersectionObserver(function (entries) {
       if (entries[0].isIntersecting) {
-        _this.setState({
-          show: true
-        });
+        if (!_this.state.show) {
+          _this.setState({
+            show: true
+          });
+        }
       }
     }, {
       root: (_a = this.props) === null || _a === void 0 ? void 0 : _a.rootContainer(),
@@ -120,14 +122,13 @@ function (_super) {
     var _this = this;
 
     var _a = this.props,
-        root = _a.root,
         _b = _a.lazy,
         lazy = _b === void 0 ? true : _b,
         src = _a.src,
         onLoadFunc = _a.onLoadFunc,
         style = _a.style,
         className = _a.className,
-        rest = __rest(_a, ["root", "lazy", "src", "onLoadFunc", "style", "className"]);
+        rest = __rest(_a, ["lazy", "src", "onLoadFunc", "style", "className"]);
 
     var show = this.state.show;
     var isShow = lazy ? show : true;

package/lib/composite-comp/bol/components/Carousel/index.js

@@ -15,6 +15,8 @@ var _defaultJSON = require("./defaultJSON");
 
 var _compositeDecorator = _interopRequireDefault(require("../../../../decorator/compositeDecorator"));
 
+var _decorator = require("../../../../decorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -68,40 +70,26 @@ function (_super) {
     var _this = _super !== null && _super.apply(this, arguments) || this;
 
     _this.state = {
-      show: false
+      lazyShow: false
     };
     _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
     _this.intersectionObserver = null;
     return _this;
   }
 
-  Carousel.prototype.componentDidMount = function () {
-    var _this = this;
+  Carousel.prototype.componentDidMount = function () {};
 
-    this.intersectionObserver = new IntersectionObserver(function (entries) {
-      if (entries[0].isIntersecting) {
-        _this.setState({
-          show: true
-        });
-      }
-    }, {
-      root: null,
-      // threshold: 0.8,
-      rootMargin: '0px 0px 100px 0px'
-    });
-    this.intersectionObserver.observe(this.carouselRef.current);
-  };
-
-  Carousel.prototype.componentWillUnmount = function () {
-    this.intersectionObserver.disconnect(this.carouselRef.current);
-  };
+  Carousel.prototype.componentWillUnmount = function () {};
 
   Carousel.prototype.render = function () {
     var nodeData = this.props.nodeData;
-    var show = this.state.show;
+    var lazyShow = this.state.lazyShow;
     return /*#__PURE__*/_react["default"].createElement("div", {
-      ref: this.carouselRef
-    }, show && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+      ref: this.carouselRef,
+      style: {
+        height: lazyShow ? 'auto' : 300
+      }
+    }, lazyShow && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
@@ -111,6 +99,11 @@ function (_super) {
   Carousel.defaultProps = {};
   Carousel.type = 'CAROUSEL';
   Carousel.getDefaultJSON = _defaultJSON.getDefaultJSON;
+
+  __decorate([(0, _decorator.lazy)('carouselRef')], Carousel.prototype, "componentDidMount", null);
+
+  __decorate([_decorator.lazyDestroy], Carousel.prototype, "componentWillUnmount", null);
+
   Carousel = __decorate([_compositeDecorator["default"]], Carousel);
   return Carousel;
 }(_react.Component);

package/lib/composite-comp/bol/components/Carousel/mobile/index.js

@@ -73,24 +73,13 @@ var __assign = void 0 && (void 0).__assign || function () {
   return __assign.apply(this, arguments);
 };
 
-var MOBILE_IMG_SIZE = {
-  1: {
-    maxH: 282
-  },
-  2: {
-    maxH: 137
-  },
-  3: {
-    maxH: 87
-  },
-  4: {
-    maxH: 66
-  },
-  5: {
-    maxH: 50
-  }
-};
-
+// const MOBILE_IMG_SIZE = {
+//   1: { maxH: 282 },
+//   2: { maxH: 137 },
+//   3: { maxH: 87 },
+//   4: { maxH: 66 },
+//   5: { maxH: 50 },
+// };
 var CarouselMobile =
 /** @class */
 function (_super) {

package/lib/decorator/index.js

@@ -9,6 +9,18 @@ Object.defineProperty(exports, "compositeDecorator", {
     return _compositeDecorator["default"];
   }
 });
+Object.defineProperty(exports, "lazy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazy;
+  }
+});
+Object.defineProperty(exports, "lazyDestroy", {
+  enumerable: true,
+  get: function get() {
+    return _lazyLoadDecorator.lazyDestroy;
+  }
+});
 Object.defineProperty(exports, "metaDecorator", {
   enumerable: true,
   get: function get() {
@@ -28,4 +40,6 @@ var _metaDecorator = _interopRequireDefault(require("./metaDecorator"));
 
 var _updateConfigDecorator = _interopRequireDefault(require("./updateConfigDecorator"));
 
+var _lazyLoadDecorator = require("./lazyLoadDecorator");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

package/lib/decorator/lazyLoadDecorator.js

@@ -0,0 +1,75 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.lazy = lazy;
+exports.lazyDestroy = void 0;
+
+/**
+ * 组件懒加载
+ * @param refName 所需懒加载的组件ref名
+ * @returns
+ */
+function lazy(refName) {
+  return function (target, name, descriptor) {
+    var fn = descriptor.value;
+
+    descriptor.value = function () {
+      var _this = this;
+
+      var rest = [];
+
+      for (var _i = 0; _i < arguments.length; _i++) {
+        rest[_i] = arguments[_i];
+      }
+
+      this.intersectionObserver = new IntersectionObserver(function (entries) {
+        if (entries[0].isIntersecting) {
+          if (!_this.state.lazyShow) {
+            _this.setState({
+              lazyShow: true
+            });
+          }
+        }
+      }, {
+        root: null,
+        // threshold: 0.8,
+        rootMargin: '0px 0px 100px 0px'
+      });
+      this.intersectionObserver.observe(this[refName].current);
+      /** 监听状态变化 */
+
+      this._intersectionObserverDestroy = function () {
+        _this.intersectionObserver.disconnect(_this[refName].current);
+      };
+
+      fn.apply(this, rest);
+    };
+  };
+}
+/**
+ * 销毁lazy监听
+ */
+
+
+var lazyDestroy = function lazyDestroy(target, name, descriptor) {
+  var fn = descriptor.value;
+
+  descriptor.value = function () {
+    var rest = [];
+
+    for (var _i = 0; _i < arguments.length; _i++) {
+      rest[_i] = arguments[_i];
+    }
+
+    if (this._intersectionObserverDestroy) {
+      this._intersectionObserverDestroy();
+    } // this._intersectionObserverDestroy && this._intersectionObserverDestroy();
+
+
+    fn.apply(this, rest);
+  };
+};
+
+exports.lazyDestroy = lazyDestroy;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@fonixtree/magic-design",
   "author": "Cylon Team",
-  "version": "2.0.30",
+  "version": "2.0.31",
   "description": "Magic Design",
   "license": "MIT",
   "module": "es/index.js",