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

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.1.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.0.0...@twreporter/react-article-components@2.1.0-rc.0) (2024-05-27)
+
+
+### Features
+
+* article page show full screen image after click ([af25372](https://github.com/twreporter/twreporter-npm-packages/commit/af2537208ae236e2b8ea861ce32682295a52fd98))
+* disable body scroll while image open ([46f35df](https://github.com/twreporter/twreporter-npm-packages/commit/46f35dffea145fa54a6ab981864207d5650aac1a))
+
+
+
+
+
 # [2.0.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.0.0-rc.5...@twreporter/react-article-components@2.0.0) (2024-05-20)
 
 **Note:** Version bump only for package @twreporter/react-article-components

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

@@ -7,22 +7,36 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _image = require("../../utils/image");
+var _react = _interopRequireDefault(require("react"));
 
-var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _imgWithPlaceholder = _interopRequireDefault(require("../../constants/prop-types/img-with-placeholder"));
+var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
 
-var _react = _interopRequireDefault(require("react"));
+var _color = require("@twreporter/core/lib/constants/color");
+
+var _rwd = require("@twreporter/react-components/lib/rwd");
+
+var _icon = require("@twreporter/react-components/lib/icon");
 
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
+
+var _zIndex = _interopRequireDefault(require("@twreporter/core/src/constants/z-index"));
+
+var _image = require("../../utils/image");
+
+var _imgWithPlaceholder = _interopRequireDefault(require("../../constants/prop-types/img-with-placeholder"));
 
 var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+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; }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -125,6 +139,21 @@ var ImgBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 })(["position:absolute;top:0;left:0;width:100%;height:100%;opacity:", ";transition:opacity 0.5s;& > img{width:100%;}"], function (props) {
   return props.$toShow ? '1' : '0';
 });
+
+var FullScreenImageMask = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "img-with-placeholder__FullScreenImageMask",
+  componentId: "c6mvsc-6"
+})(["position:fixed;left:0px;top:0px;width:100vw;height:100vh;background-color:", ";z-index:", ";display:flex;justify-content:center;align-items:center;"], _color.colorOpacity['black_0.5'], _zIndex["default"].articleImgFullScreenMask);
+
+var FullScreenImage = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "img-with-placeholder__FullScreenImage",
+  componentId: "c6mvsc-7"
+})(["position:relative;img{max-width:90vw;max-height:90vh;}"]);
+
+var CrossIcon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "img-with-placeholder__CrossIcon",
+  componentId: "c6mvsc-8"
+})(["cursor:pointer;position:absolute;top:0px;right:-40px;height:24px;width:24px;svg{background-color:", ";}"], _color.colorGrayscale.white);
 /**
  * An image element with placeholder.
  * The width and height of the image are required to preserve the space on the page for image.
@@ -147,7 +176,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     _this = _super.call(this, props);
     _this.state = {
       isLoaded: false,
-      toShowPlaceholder: true
+      toShowPlaceholder: true,
+      showFullScreenImg: false
     };
     _this._img = /*#__PURE__*/_react["default"].createRef();
     _this.handleImageLoaded = _this.handleImageLoaded.bind(_assertThisInitialized(_this));
@@ -229,7 +259,12 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var isLoaded = this.state.isLoaded;
+      var _this$context,
+          _this3 = this;
+
+      var _this$state = this.state,
+          isLoaded = _this$state.isLoaded,
+          showFullScreenImg = _this$state.showFullScreenImg;
       var _this$props2 = this.props,
           alt = _this$props2.alt,
           className = _this$props2.className,
@@ -239,6 +274,24 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
           objectFit = _this$props2.objectFit,
           objectPosition = _this$props2.objectPosition,
           sizes = _this$props2.sizes;
+      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() {
+        _this3.setState({
+          showFullScreenImg: true
+        });
+
+        document.body.classList.add('disable-scroll');
+      };
+
+      var closeFullScreen = function closeFullScreen() {
+        _this3.setState({
+          showFullScreenImg: false
+        });
+
+        document.body.classList.remove('disable-scroll');
+      };
+
       var appendedClassName = className + ' avoid-break';
 
       var defaultImageOriginalUrl = _.get(defaultImage, 'url');
@@ -262,9 +315,10 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       }
 
       var defaultImageSrc = (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(defaultImage, 'url'));
-      return /*#__PURE__*/_react["default"].createElement(ImgContainer, {
+      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, "%;")
+        $heightString: isObjectFit ? "height: 100%;" : "padding-top: ".concat(heightWidthRatio * 100, "%;"),
+        onClick: openFullScreen
       }, this._renderImagePlaceholder(), /*#__PURE__*/_react["default"].createElement(ImgBox, {
         $toShow: isLoaded
       }, isObjectFit ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgWithObjectFit, _extends({
@@ -288,7 +342,17 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
         sizes: sizes,
         src: defaultImageSrc,
         srcSet: srcset
-      }, imgProps))));
+      }, imgProps)))), showFullScreenImg && /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, /*#__PURE__*/_react["default"].createElement(FullScreenImageMask, {
+        onClick: closeFullScreen
+      }, /*#__PURE__*/_react["default"].createElement(FullScreenImage, null, /*#__PURE__*/_react["default"].createElement("img", {
+        alt: alt,
+        ref: this._img,
+        sizes: sizes,
+        src: defaultImageSrc,
+        srcSet: srcset
+      }), /*#__PURE__*/_react["default"].createElement(CrossIcon, null, /*#__PURE__*/_react["default"].createElement(_icon.Cross, {
+        releaseBranch: releaseBranch
+      }))))));
     }
   }]);
 
@@ -297,6 +361,8 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
 
 exports["default"] = Img;
 
+_defineProperty(Img, "contextType", _styledComponents.ThemeContext);
+
 _defineProperty(Img, "propTypes", {
   alt: _propTypes["default"].string,
   className: _propTypes["default"].string,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.0.0",
+  "version": "2.1.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",
@@ -24,10 +24,10 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.21.0",
-    "@twreporter/react-components": "^9.0.0",
-    "@twreporter/redux": "^8.0.0",
-    "@twreporter/universal-header": "^3.0.0",
+    "@twreporter/core": "^1.22.0-rc.0",
+    "@twreporter/react-components": "^9.0.1-rc.0",
+    "@twreporter/redux": "^8.0.1-rc.0",
+    "@twreporter/universal-header": "^3.0.1-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "ff7609c0fa1440606ca7bfc0696435fda029eac6"
+  "gitHead": "7e9bb7b3ac2991d660649e25e99982adae6f0f52"
 }