@twreporter/react-article-components 2.1.0 → 2.1.1-rc.0

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.1.1-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.0...@twreporter/react-article-components@2.1.1-rc.0) (2024-06-03)
+
+
+### Bug Fixes
+
+* add isMobile condition ([7145260](https://github.com/twreporter/twreporter-npm-packages/commit/71452608c2638bf107da28889c20dd7df8fc7d93))
+* follow style guide ([c71f9a0](https://github.com/twreporter/twreporter-npm-packages/commit/c71f9a02d29c1c255dd62ce1cd442d812b12f06b))
+* get minWidth ([96a6bc8](https://github.com/twreporter/twreporter-npm-packages/commit/96a6bc8e2c401e0d59a92a1ac36bef4ade4a3714))
+* use core screen tablet value ([25c0b9a](https://github.com/twreporter/twreporter-npm-packages/commit/25c0b9a2c7c558f18ad3e2b35da1068da503155b))
+
+
+
+
+
 # [2.1.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.1.0-rc.2...@twreporter/react-article-components@2.1.0) (2024-05-30)
 
 **Note:** Version bump only for package @twreporter/react-article-components

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

@@ -25,6 +25,8 @@ var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/consta
 
 var _zIndex = _interopRequireDefault(require("@twreporter/core/lib/constants/z-index"));
 
+var _mediaQuery = require("@twreporter/core/lib/utils/media-query");
+
 var _image = require("../../utils/image");
 
 var _imgWithPlaceholder = _interopRequireDefault(require("../../constants/prop-types/img-with-placeholder"));
@@ -33,6 +35,8 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _debounce = _interopRequireDefault(require("lodash/debounce"));
+
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -79,7 +83,8 @@ PlaceholderIcon.defaultProps = {
 };
 var _ = {
   get: _get["default"],
-  map: _map["default"]
+  map: _map["default"],
+  debounce: _debounce["default"]
 };
 var objectFitConsts = {
   contain: 'contain',
@@ -174,13 +179,24 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     _classCallCheck(this, Img);
 
     _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "_handleWindowResize", function () {
+      var windowWidth = window.innerWidth;
+
+      _this.setState({
+        isMobile: windowWidth < _mediaQuery.DEFAULT_SCREEN.tablet.minWidth
+      });
+    });
+
     _this.state = {
       isLoaded: false,
       toShowPlaceholder: true,
-      showFullScreenImg: false
+      showFullScreenImg: false,
+      isMobile: false
     };
     _this._img = /*#__PURE__*/_react["default"].createRef();
     _this.handleImageLoaded = _this.handleImageLoaded.bind(_assertThisInitialized(_this));
+    _this.handleWindowResize = _.debounce(_this._handleWindowResize, 500).bind(_assertThisInitialized(_this));
     _this._isMounted = false;
     _this._supportObjectFit = true;
     return _this;
@@ -198,11 +214,15 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       if (_.get(this._img.current, 'complete')) {
         this.handleImageLoaded();
       }
+
+      window.addEventListener('resize', this.handleWindowResize);
+      this.handleWindowResize();
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       this._isMounted = false;
+      window.removeEventListener('resize', this.handleWindowResize);
     }
   }, {
     key: "handleImageLoaded",
@@ -264,7 +284,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
 
       var _this$state = this.state,
           isLoaded = _this$state.isLoaded,
-          showFullScreenImg = _this$state.showFullScreenImg;
+          showFullScreenImg = _this$state.showFullScreenImg,
+          isMobile = _this$state.isMobile;
       var _this$props2 = this.props,
           alt = _this$props2.alt,
           className = _this$props2.className,
@@ -278,7 +299,7 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       var releaseBranch = (this === null || this === void 0 ? void 0 : (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.releaseBranch) || _releaseBranch["default"].release;
 
       var openFullScreen = function openFullScreen() {
-        if (!clickable) return;
+        if (isMobile) return;
 
         _this3.setState({
           showFullScreenImg: true
@@ -321,7 +342,7 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgContainer, {
         className: appendedClassName,
         $heightString: isObjectFit ? "height: 100%;" : "padding-top: ".concat(heightWidthRatio * 100, "%;"),
-        onClick: openFullScreen
+        onClick: clickable ? openFullScreen : undefined
       }, this._renderImagePlaceholder(), /*#__PURE__*/_react["default"].createElement(ImgBox, {
         $toShow: isLoaded
       }, isObjectFit ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgWithObjectFit, _extends({

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.1.0",
+  "version": "2.1.1-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",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.22.0",
-    "@twreporter/react-components": "^9.0.1",
-    "@twreporter/redux": "^8.0.1",
-    "@twreporter/universal-header": "^3.0.1",
+    "@twreporter/core": "^1.22.1-rc.0",
+    "@twreporter/react-components": "^9.0.2-rc.0",
+    "@twreporter/redux": "^8.0.2-rc.0",
+    "@twreporter/universal-header": "^3.0.2-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "140b33e61fd76615028d242dc55a63f9a1792a36"
+  "gitHead": "40ff2a4c83c47f90335072049e9bb65a789088a6"
 }