@fonixtree/magic-design 2.0.29 → 2.0.30

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

@@ -65,16 +65,47 @@ function (_super) {
   __extends(Carousel, _super);
 
   function Carousel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      show: false
+    };
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.intersectionObserver = null;
+    return _this;
   }
 
+  Carousel.prototype.componentDidMount = function () {
+    var _this = this;
+
+    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.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var show = this.state.show;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.carouselRef
+    }, show && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
-    }));
+    })));
   };
 
   Carousel.defaultProps = {};

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

@@ -247,7 +247,8 @@ function (_super) {
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        })
+        }),
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -272,7 +273,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 20
+        maxHeight: 20,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

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

@@ -280,7 +280,8 @@ function (_super) {
         }),
         maxHeight: item.image.content.pcImgSrc ? 'unset' : PC_IMG_SIZE[floorColNum].defH,
         minHeight: PC_IMG_SIZE[floorColNum].minH,
-        minWidth: PC_IMG_SIZE[floorColNum].minW
+        minWidth: PC_IMG_SIZE[floorColNum].minW,
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -305,7 +306,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 30
+        maxHeight: 30,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/es/meta-comp/components/Image/index.js

@@ -21,6 +21,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _decorator = require("../../../decorator");
 
+var _ImageLazy = _interopRequireDefault(require("../../../common/ImageLazy"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -165,7 +167,8 @@ function (_super) {
     var _c = this.props,
         data = _c.data,
         isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
+        hoverState = _c.hoverState,
+        notNeedLazy = _c.notNeedLazy;
     var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
     // console.log('--metaImage ', this.props);
 
@@ -190,7 +193,7 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notNeedLazy ? /*#__PURE__*/_react["default"].createElement("img", {
       ref: this.imgRef,
       onLoad: function onLoad() {
         var scale = _this.imgRef.current.clientWidth / 600;
@@ -203,6 +206,18 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: (0, _commonUtil.pxToRem)(this.getStyle())
+    }) : /*#__PURE__*/_react["default"].createElement(_ImageLazy["default"], {
+      onLoadFunc: function onLoadFunc(clientWidth) {
+        var scale = clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
+      onMouseEnter: this.mouseEnterImg,
+      onMouseLeave: this.mouseLeaveImg,
+      src: srcImg,
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -230,7 +245,8 @@ function (_super) {
     isBackground: false,
     hoverState: false,
     limitWidthHeight: false,
-    scale: 1
+    scale: 1,
+    notNeedLazy: false
   };
   Image = __decorate([_decorator.metaDecorator], Image);
   return Image;

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

@@ -65,16 +65,47 @@ function (_super) {
   __extends(Carousel, _super);
 
   function Carousel() {
-    return _super !== null && _super.apply(this, arguments) || this;
+    var _this = _super !== null && _super.apply(this, arguments) || this;
+
+    _this.state = {
+      show: false
+    };
+    _this.carouselRef = /*#__PURE__*/_react["default"].createRef();
+    _this.intersectionObserver = null;
+    return _this;
   }
 
+  Carousel.prototype.componentDidMount = function () {
+    var _this = this;
+
+    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.render = function () {
     var nodeData = this.props.nodeData;
-    return /*#__PURE__*/_react["default"].createElement("div", null, window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
+    var show = this.state.show;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      ref: this.carouselRef
+    }, show && (window.magicDesign.device === 'pc' ? /*#__PURE__*/_react["default"].createElement(_pc["default"], {
       data: nodeData
     }) : /*#__PURE__*/_react["default"].createElement(_mobile["default"], {
       data: nodeData
-    }));
+    })));
   };
 
   Carousel.defaultProps = {};

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

@@ -247,7 +247,8 @@ function (_super) {
         GAData: __assign(__assign({}, GAData), {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
-        })
+        }),
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -272,7 +273,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 20
+        maxHeight: 20,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

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

@@ -280,7 +280,8 @@ function (_super) {
         }),
         maxHeight: item.image.content.pcImgSrc ? 'unset' : PC_IMG_SIZE[floorColNum].defH,
         minHeight: PC_IMG_SIZE[floorColNum].minH,
-        minWidth: PC_IMG_SIZE[floorColNum].minW
+        minWidth: PC_IMG_SIZE[floorColNum].minW,
+        notNeedLazy: true
       })), layout === 'layout2' && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, item.title.open && !((0, _coreUtil.isPc)() && item.title.pcText === '') && /*#__PURE__*/_react["default"].createElement("div", {
         className: "title"
       }, /*#__PURE__*/_react["default"].createElement(_components.MetaText, {
@@ -305,7 +306,8 @@ function (_super) {
           groupId: item.id,
           groupName: (0, _ConfigPanel.getSecondConfigName)(data, item.id)
         }),
-        maxHeight: 30
+        maxHeight: 30,
+        notNeedLazy: true
       }), item.buttonTag.open && /*#__PURE__*/_react["default"].createElement(_components.MetaButton, {
         data: item.buttonTag,
         GAData: __assign(__assign({}, GAData), {

package/lib/meta-comp/components/Image/index.js

@@ -21,6 +21,8 @@ var _commonUtil = require("../../../utils/commonUtil");
 
 var _decorator = require("../../../decorator");
 
+var _ImageLazy = _interopRequireDefault(require("../../../common/ImageLazy"));
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
@@ -165,7 +167,8 @@ function (_super) {
     var _c = this.props,
         data = _c.data,
         isBackground = _c.isBackground,
-        hoverState = _c.hoverState;
+        hoverState = _c.hoverState,
+        notNeedLazy = _c.notNeedLazy;
     var hoverImgSrc = this.state.hoverImgSrc; // const { hoverSrc } = this.state;
     // console.log('--metaImage ', this.props);
 
@@ -190,7 +193,7 @@ function (_super) {
       onClick: function onClick() {
         (0, _coreUtil.clickUrl)(data.content.clickUrl);
       }
-    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("img", {
+    }, srcImg && /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, notNeedLazy ? /*#__PURE__*/_react["default"].createElement("img", {
       ref: this.imgRef,
       onLoad: function onLoad() {
         var scale = _this.imgRef.current.clientWidth / 600;
@@ -203,6 +206,18 @@ function (_super) {
       onMouseLeave: this.mouseLeaveImg,
       src: srcImg,
       style: (0, _commonUtil.pxToRem)(this.getStyle())
+    }) : /*#__PURE__*/_react["default"].createElement(_ImageLazy["default"], {
+      onLoadFunc: function onLoadFunc(clientWidth) {
+        var scale = clientWidth / 600;
+
+        _this.setState({
+          scale: scale
+        });
+      },
+      onMouseEnter: this.mouseEnterImg,
+      onMouseLeave: this.mouseLeaveImg,
+      src: srcImg,
+      style: (0, _commonUtil.pxToRem)(this.getStyle())
     }), areas && areas.length > 0 && areas.map(function (v, i) {
       var aStyle = {
         position: 'absolute',
@@ -230,7 +245,8 @@ function (_super) {
     isBackground: false,
     hoverState: false,
     limitWidthHeight: false,
-    scale: 1
+    scale: 1,
+    notNeedLazy: false
   };
   Image = __decorate([_decorator.metaDecorator], Image);
   return Image;

package/package.json

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