@twreporter/react-article-components 1.6.5-rc.1 → 1.7.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.7.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.5-rc.1...@twreporter/react-article-components@1.7.0-rc.0) (2022-09-27)
+
+
+### Features
+
+* **react-article-components:** add lazyload to <img> ([43598a0](https://github.com/twreporter/twreporter-npm-packages/commit/43598a01a9aaa388ce47facdb7f87ead31670995))
+
+
+
+
+
 ## [1.6.5-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.6.5-rc.0...@twreporter/react-article-components@1.6.5-rc.1) (2022-09-21)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/img-with-placeholder/index.js

@@ -238,7 +238,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
           defaultImage = _this$props2.defaultImage,
           objectFit = _this$props2.objectFit,
           objectPosition = _this$props2.objectPosition,
-          sizes = _this$props2.sizes;
+          sizes = _this$props2.sizes,
+          isLazyLoaded = _this$props2.isLazyLoaded;
       var appendedClassName = className + ' avoid-break';
 
       var defaultImageOriginalUrl = _.get(defaultImage, 'url');
@@ -276,7 +277,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
         sizes: this._supportObjectFit ? sizes : '',
         src: defaultImageSrc,
         srcSet: this._supportObjectFit ? srcset : '',
-        hide: !this._supportObjectFit
+        hide: !this._supportObjectFit,
+        loading: isLazyLoaded ? 'lazy' : 'eager'
       }, imgProps)), this._supportObjectFit ? null : /*#__PURE__*/_react["default"].createElement(FallbackObjectFitImg, {
         url: _.get(defaultImage, 'url'),
         objectFit: objectFit,
@@ -287,7 +289,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
         ref: this._img,
         sizes: sizes,
         src: defaultImageSrc,
-        srcSet: srcset
+        srcSet: srcset,
+        loading: isLazyLoaded ? 'lazy' : 'eager'
       }, imgProps))));
     }
   }]);
@@ -313,7 +316,8 @@ _defineProperty(Img, "propTypes", {
   imageSet: _propTypes["default"].arrayOf(_imgWithPlaceholder["default"].imagePropType),
   objectFit: _propTypes["default"].oneOf([objectFitConsts.cover, objectFitConsts.contain]),
   objectPosition: _propTypes["default"].string,
-  sizes: _propTypes["default"].string.isRequired
+  sizes: _propTypes["default"].string.isRequired,
+  isLazyLoaded: _propTypes["default"].bool
 });
 
 _defineProperty(Img, "defaultProps", {
@@ -325,5 +329,6 @@ _defineProperty(Img, "defaultProps", {
   imgProps: {},
   placeholderNoBlur: false,
   noImgPlaceholder: false,
-  sizes: ''
+  sizes: '',
+  isLazyLoaded: true
 });

package/lib/components/leading/fullscreen.js

@@ -147,7 +147,8 @@ var FullScreenLeading = /*#__PURE__*/function (_React$PureComponent) {
         defaultImage: poster.mobile,
         objectFit: "cover",
         objectPostion: "center center",
-        sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px"
+        sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px",
+        isLazyLoaded: false
       }));
 
       if (!this.isEmptyPortraitPoster(portraitPoster)) {
@@ -157,7 +158,8 @@ var FullScreenLeading = /*#__PURE__*/function (_React$PureComponent) {
           imageSet: [portraitPoster.mobile],
           defaultImage: portraitPoster.mobile,
           objectFit: "cover",
-          objectPostion: "center center"
+          objectPostion: "center center",
+          isLazyLoaded: false
         })));
       }
 

package/lib/components/leading/normal.js

@@ -163,7 +163,8 @@ var NormalLeading = /*#__PURE__*/function (_React$PureComponent) {
         imgPlaceholderSrc: _.get(poster, 'tiny.url', ''),
         imageSet: [poster.mobile, poster.tablet, poster.desktop],
         defaultImage: poster.mobile,
-        sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px"
+        sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px",
+        isLazyLoaded: false
       }), figureCaption ? /*#__PURE__*/_react["default"].createElement(FigCaption, null, figureCaption) : null)));
     }
   }]);

package/lib/components/leading/pink.js

@@ -157,7 +157,8 @@ var LeadingBlock = /*#__PURE__*/function (_PureComponent) {
         defaultImage: poster.mobile,
         objectFit: "cover",
         objectPostion: "center center",
-        sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px"
+        sizes: "(max-width: 800px) 800px, (max-width: 1200px) 1200px, 2000px",
+        isLazyLoaded: false
       }))));
     }
   }]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.6.5-rc.1",
+  "version": "1.7.0-rc.0",
   "description": "The Reporter react article components, which are used in article page",
   "main": "lib/components/article-page.js",
   "repository": "https://github.com/twreporter/twreporter-npm-packages.git",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "145b9cb8d1412262ffae3cf50c7b756432ec37d6"
+  "gitHead": "19542aee7205187cc4ef21a908bf09a0fbb1572c"
 }