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

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.3.0-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.3.0-rc.0...@twreporter/react-article-components@2.3.0-rc.1) (2024-07-08)
+
+
+### Bug Fixes
+
+* fix comments ([6084a28](https://github.com/twreporter/twreporter-npm-packages/commit/6084a289944823cf43e8c063f5c797920d454ee9))
+* naming ([87d00f4](https://github.com/twreporter/twreporter-npm-packages/commit/87d00f456312ef1e7a522301e3e2d5c23c244d30))
+
+
+### Features
+
+* **react-article-components:** full screen image version2 ([49b1495](https://github.com/twreporter/twreporter-npm-packages/commit/49b1495a03f4b1c181e0b9fafc378f094fe651b7))
+
+
+
+
+
 # [2.3.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@2.2.2-rc.0...@twreporter/react-article-components@2.3.0-rc.0) (2024-07-08)
 
 

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

@@ -1,10 +1,11 @@
 "use strict";
 
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _react = _interopRequireDefault(require("react"));
+var _react = _interopRequireWildcard(require("react"));
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
@@ -19,24 +20,16 @@ var _imgWithPlaceholder = _interopRequireDefault(require("../../constants/prop-t
 var _get = _interopRequireDefault(require("lodash/get"));
 var _map = _interopRequireDefault(require("lodash/map"));
 var _debounce = _interopRequireDefault(require("lodash/debounce"));
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 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); }
-function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
-function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); } // @twreporter
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // @twreporter
 var PlaceholderIcon = function PlaceholderIcon(props) {
   return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("title", null, "Fill 1"), /*#__PURE__*/_react["default"].createElement("path", {
     d: "M5 112.563a5.001 5.001 0 0 1-5-5V4.999C0 3.298.866 1.713 2.298.794A5.003 5.003 0 0 1 7.08.451l42.724 19.521a5 5 0 0 1-4.156 9.097L10 12.783V99.78l49.843-22.775V32.014a5 5 0 0 1 3.669-4.82l37.105-10.247a4.999 4.999 0 0 1 6.331 4.819v67.44a5.003 5.003 0 0 1-6.142 4.868l-20.106-4.716a5 5 0 0 1 2.284-9.736l13.965 3.275V28.332L69.844 35.82v44.4a5 5 0 0 1-2.922 4.549L7.078 112.11a4.996 4.996 0 0 1-2.079.451",
@@ -59,11 +52,32 @@ var objectFitConsts = {
   contain: 'contain',
   cover: 'cover'
 };
+var CrossIconPos = Object.freeze({
+  INSIDE: 'inside',
+  TOP_RIGHT: 'top-right',
+  RIGHT_TOP: 'right-top'
+});
+
+// padding: 16px + width: 24px => 40px
+var iconPadding = 40;
+var CrossIconPosCss = function CrossIconPosCss(position) {
+  switch (position) {
+    case CrossIconPos.TOP_RIGHT:
+      return (0, _styledComponents.css)(["top:-", "px;right:0px;"], iconPadding);
+    case CrossIconPos.RIGHT_TOP:
+      return (0, _styledComponents.css)(["top:0px;right:-", "px;"], iconPadding);
+    case CrossIconPos.INSIDE:
+    default:
+      return (0, _styledComponents.css)(["top:0px;right:0px;"]);
+  }
+};
 var ImgContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgContainer",
   componentId: "c6mvsc-0"
-})(["position:relative;overflow:hidden;width:100%;", ""], function (props) {
+})(["position:relative;overflow:hidden;width:100%;", " ", ""], function (props) {
   return props.$heightString;
+}, function (props) {
+  return props.$clickable ? 'cursor: zoom-in;' : '';
 });
 var ImgPlaceholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgPlaceholder",
@@ -114,236 +128,245 @@ var FullScreenImageMask = /*#__PURE__*/_styledComponents["default"].div.withConf
 var FullScreenImage = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__FullScreenImage",
   componentId: "c6mvsc-7"
-})(["position:relative;img{max-width:90vw;max-height:90vh;}"]);
+})(["position:relative;img{max-width:100vw;max-height:100vh;}"]);
 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);
+})(["cursor:pointer;position:absolute;", " height:24px;width:24px;svg{background-color:", ";}"], function (props) {
+  return CrossIconPosCss(props.$crossIconPos);
+}, _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.
- *
- * @class Image
- * @extends {React.PureComponent}
  */
-var Img = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Img, _React$PureComponent);
-  var _super = _createSuper(Img);
-  function Img(props) {
-    var _this;
-    _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,
-      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;
-  }
-  _createClass(Img, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      // Check if browser support css object-fit.
-      // Ref: https://github.com/anselmh/object-fit/blob/c6e275b099caf59ca44bfc5cbbaf4c388ace9980/src/polyfill.object-fit.core.js#L396
-      this._supportObjectFit = 'objectFit' in document.documentElement.style === true;
-      this._isMounted = true;
-      // If the browser has cached the image already, the `load` event of `<img>` will never be triggered.
-      // Hence, we need to trigger `handleImageLoaded` manually.
-      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",
-    value: function handleImageLoaded() {
-      var _this2 = this;
-      // Progressive image
-      // Let user see the blur image,
-      // and slowly make the blur image clearer
+var Img = function Img(_ref) {
+  var _ref$alt = _ref.alt,
+    alt = _ref$alt === void 0 ? '' : _ref$alt,
+    _ref$className = _ref.className,
+    className = _ref$className === void 0 ? '' : _ref$className,
+    _ref$defaultImage = _ref.defaultImage,
+    defaultImage = _ref$defaultImage === void 0 ? {} : _ref$defaultImage,
+    _ref$imgPlaceholderSr = _ref.imgPlaceholderSrc,
+    imgPlaceholderSrc = _ref$imgPlaceholderSr === void 0 ? '' : _ref$imgPlaceholderSr,
+    _ref$placeholderNoBlu = _ref.placeholderNoBlur,
+    placeholderNoBlur = _ref$placeholderNoBlu === void 0 ? false : _ref$placeholderNoBlu,
+    _ref$noImgPlaceholder = _ref.noImgPlaceholder,
+    noImgPlaceholder = _ref$noImgPlaceholder === void 0 ? false : _ref$noImgPlaceholder,
+    _ref$imgProps = _ref.imgProps,
+    imgProps = _ref$imgProps === void 0 ? {} : _ref$imgProps,
+    _ref$imageSet = _ref.imageSet,
+    imageSet = _ref$imageSet === void 0 ? [] : _ref$imageSet,
+    objectFit = _ref.objectFit,
+    objectPosition = _ref.objectPosition,
+    _ref$sizes = _ref.sizes,
+    sizes = _ref$sizes === void 0 ? '' : _ref$sizes,
+    _ref$clickable = _ref.clickable,
+    clickable = _ref$clickable === void 0 ? false : _ref$clickable;
+  var themeContext = (0, _react.useContext)(_styledComponents.ThemeContext);
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    isLoaded = _useState2[0],
+    setIsLoaded = _useState2[1];
+  var _useState3 = (0, _react.useState)(true),
+    _useState4 = _slicedToArray(_useState3, 2),
+    toShowPlaceholder = _useState4[0],
+    setToShowPlaceholder = _useState4[1];
+  var _useState5 = (0, _react.useState)(false),
+    _useState6 = _slicedToArray(_useState5, 2),
+    showFullScreenImg = _useState6[0],
+    setShowFullScreenImg = _useState6[1];
+  var _useState7 = (0, _react.useState)(false),
+    _useState8 = _slicedToArray(_useState7, 2),
+    isMobile = _useState8[0],
+    setIsMobile = _useState8[1];
+  var imgRef = (0, _react.useRef)(null);
+  var _isMounted = (0, _react.useRef)(true);
+  var _useState9 = (0, _react.useState)(true),
+    _useState10 = _slicedToArray(_useState9, 2),
+    supportObjectFit = _useState10[0],
+    setSupportObjectFit = _useState10[1];
+  var fullScreenImageRef = (0, _react.useRef)(null);
+  var _useState11 = (0, _react.useState)(CrossIconPos.INSIDE),
+    _useState12 = _slicedToArray(_useState11, 2),
+    crossIconPos = _useState12[0],
+    setCrossIconPos = _useState12[1];
+  var handleImageLoaded = function handleImageLoaded() {
+    // Progressive image
+    // Let user see the blur image,
+    // and slowly make the blur image clearer
 
-      // in order to make sure users see the blur image,
-      // delay the clear image rendering
-      setTimeout(function () {
-        if (_this2._isMounted) {
-          _this2.setState({
-            isLoaded: true
-          });
+    // in order to make sure users see the blur image,
+    // delay the clear image rendering
+    setTimeout(function () {
+      if (_isMounted.current) {
+        setIsLoaded(true);
+      }
+    }, 500);
+    // after clear image rendered, not display placeholder anymore
+    setTimeout(function () {
+      if (_isMounted.current) {
+        setToShowPlaceholder(false);
+      }
+    }, 1500);
+  };
+  var checkFullScreenImageSize = function checkFullScreenImageSize() {
+    if (fullScreenImageRef.current) {
+      var img = fullScreenImageRef.current;
+      var imgWidth = img.offsetWidth;
+      var imgHeight = img.offsetHeight;
+      var vw = window.innerWidth;
+      var vh = window.innerHeight;
+      if (imgWidth === vw) {
+        if (vh - imgHeight < iconPadding * 2) {
+          setCrossIconPos(CrossIconPos.INSIDE);
+        } else {
+          setCrossIconPos(CrossIconPos.TOP_RIGHT);
         }
-      }, 500);
-
-      // after clear image rendered, not display placeholder anymore
-      setTimeout(function () {
-        if (_this2._isMounted) {
-          _this2.setState({
-            toShowPlaceholder: false
-          });
+      } else if (imgHeight === vh) {
+        if (vw - imgWidth < iconPadding * 2) {
+          setCrossIconPos(CrossIconPos.INSIDE);
+        } else {
+          setCrossIconPos(CrossIconPos.RIGHT_TOP);
         }
-      }, 1500);
-    }
-  }, {
-    key: "_renderImagePlaceholder",
-    value: function _renderImagePlaceholder() {
-      var toShowPlaceholder = this.state.toShowPlaceholder;
-      var _this$props = this.props,
-        imgPlaceholderSrc = _this$props.imgPlaceholderSrc,
-        placeholderNoBlur = _this$props.placeholderNoBlur,
-        noImgPlaceholder = _this$props.noImgPlaceholder;
-      if (noImgPlaceholder) {
-        return null;
-      }
-      if (imgPlaceholderSrc) {
-        return /*#__PURE__*/_react["default"].createElement(ImgPlaceholder, {
-          $src: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(imgPlaceholderSrc),
-          $toShow: toShowPlaceholder,
-          $noBlur: placeholderNoBlur
-        });
+      } else {
+        // default
+        setCrossIconPos(CrossIconPos.INSIDE);
       }
-      // render default placeholder
-      return /*#__PURE__*/_react["default"].createElement(Placeholder, {
-        $toShow: toShowPlaceholder
-      }, /*#__PURE__*/_react["default"].createElement(PlaceholderIcon, null));
     }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$context,
-        _this3 = this;
-      var _this$state = this.state,
-        isLoaded = _this$state.isLoaded,
-        showFullScreenImg = _this$state.showFullScreenImg,
-        isMobile = _this$state.isMobile;
-      var _this$props2 = this.props,
-        alt = _this$props2.alt,
-        className = _this$props2.className,
-        imgProps = _this$props2.imgProps,
-        imageSet = _this$props2.imageSet,
-        defaultImage = _this$props2.defaultImage,
-        objectFit = _this$props2.objectFit,
-        objectPosition = _this$props2.objectPosition,
-        sizes = _this$props2.sizes,
-        clickable = _this$props2.clickable;
-      var releaseBranch = (this === null || this === void 0 || (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.releaseBranch) || _releaseBranch["default"].release;
-      var openFullScreen = function openFullScreen() {
-        if (isMobile) return;
-        _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');
-      /* Render placeholder only if no valid image is given */
-      if (!defaultImageOriginalUrl && (!imageSet || imageSet.length === 0)) {
-        return /*#__PURE__*/_react["default"].createElement(ImgContainer, {
-          className: appendedClassName,
-          $heightString: "height: 100%;"
-        }, this._renderImagePlaceholder());
+  };
+  var handleESCClick = _.debounce(function (e) {
+    if (showFullScreenImg) {
+      if (e.key === 'Escape') {
+        closeFullScreen();
       }
-      var srcset = (0, _image.getSrcsetString)(imageSet);
-      var isObjectFit = Boolean(objectFit);
-      var heightWidthRatio = _.get(defaultImage, 'height') / _.get(defaultImage, 'width');
-      if (isObjectFit && !heightWidthRatio) {
-        console.warn('Warning on Img component:', 'The `objecFit` is set, but no valid height/width ratio of `props.defaultImage` is given.', '`props.defaultImage`:', defaultImage);
-      }
-      var defaultImageSrc = (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(defaultImage, 'url'));
-      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: 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({
-        alt: alt,
-        $objectFit: objectFit,
-        $objectPosition: objectPosition,
-        onLoad: this.handleImageLoaded,
-        ref: this._img,
-        sizes: this._supportObjectFit ? sizes : '',
-        src: defaultImageSrc,
-        srcSet: this._supportObjectFit ? srcset : '',
-        hide: !this._supportObjectFit
-      }, imgProps)), this._supportObjectFit ? null : /*#__PURE__*/_react["default"].createElement(FallbackObjectFitImg, {
-        $url: _.get(defaultImage, 'url'),
-        $objectFit: objectFit,
-        $objectPosition: objectPosition
-      })) : /*#__PURE__*/_react["default"].createElement("img", _extends({
-        alt: alt,
-        onLoad: this.handleImageLoaded,
-        ref: this._img,
-        sizes: sizes,
-        src: defaultImageSrc,
-        srcSet: srcset
-      }, 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
-      }))))));
     }
-  }]);
-  return Img;
-}(_react["default"].PureComponent);
-_defineProperty(Img, "contextType", _styledComponents.ThemeContext);
-_defineProperty(Img, "propTypes", {
+  }, 500);
+  var handleWindowResize = _.debounce(function () {
+    var windowWidth = window.innerWidth;
+    if (windowWidth <= _mediaQuery.DEFAULT_SCREEN.tablet.minWidth) {
+      setIsMobile(true);
+      closeFullScreen();
+    } else {
+      setIsMobile(false);
+    }
+    checkFullScreenImageSize();
+  }, 100);
+  (0, _react.useEffect)(function () {
+    // Check if browser support css object-fit.
+    // Ref: https://github.com/anselmh/object-fit/blob/c6e275b099caf59ca44bfc5cbbaf4c388ace9980/src/polyfill.object-fit.core.js#L396
+    setSupportObjectFit('objectFit' in document.documentElement.style);
+    _isMounted.current = true;
+    // If the browser has cached the image already, the `load` event of `<img>` will never be triggered.
+    // Hence, we need to trigger `handleImageLoaded` manually.
+    if (_.get(imgRef.current, 'complete')) {
+      handleImageLoaded();
+    }
+    window.addEventListener('resize', handleWindowResize);
+    handleWindowResize();
+    window.addEventListener('keydown', handleESCClick);
+    return function () {
+      _isMounted.current = false;
+      window.removeEventListener('resize', handleWindowResize);
+      window.removeEventListener('keydown', handleESCClick);
+    };
+  }, []);
+  (0, _react.useEffect)(function () {
+    checkFullScreenImageSize();
+  }, [showFullScreenImg]);
+  var openFullScreen = function openFullScreen() {
+    if (isMobile) return;
+    setShowFullScreenImg(true);
+    document.body.classList.add('disable-scroll');
+  };
+  var closeFullScreen = function closeFullScreen() {
+    setShowFullScreenImg(false);
+    document.body.classList.remove('disable-scroll');
+  };
+  var renderImagePlaceholder = function renderImagePlaceholder() {
+    if (noImgPlaceholder) return null;
+    if (imgPlaceholderSrc) {
+      return /*#__PURE__*/_react["default"].createElement(ImgPlaceholder, {
+        $src: (0, _storageUrlProcessor.replaceGCSUrlOrigin)(imgPlaceholderSrc),
+        $toShow: toShowPlaceholder,
+        $noBlur: placeholderNoBlur
+      });
+    }
+    // render default placeholder
+    return /*#__PURE__*/_react["default"].createElement(Placeholder, {
+      $toShow: toShowPlaceholder
+    }, /*#__PURE__*/_react["default"].createElement(PlaceholderIcon, null));
+  };
+  var releaseBranch = (themeContext === null || themeContext === void 0 ? void 0 : themeContext.releaseBranch) || _releaseBranch["default"].release;
+  var appendedClassName = className + ' avoid-break';
+  var defaultImageOriginalUrl = _.get(defaultImage, 'url');
+  if (!defaultImageOriginalUrl && (!imageSet || imageSet.length === 0)) {
+    return /*#__PURE__*/_react["default"].createElement(ImgContainer, {
+      className: appendedClassName,
+      $heightString: "height: 100%;"
+    }, renderImagePlaceholder());
+  }
+  var srcset = (0, _image.getSrcsetString)(imageSet);
+  var isObjectFit = Boolean(objectFit);
+  var heightWidthRatio = _.get(defaultImage, 'height') / _.get(defaultImage, 'width');
+  if (isObjectFit && !heightWidthRatio) {
+    console.warn('Warning on Img component:', 'The `objecFit` is set, but no valid height/width ratio of `props.defaultImage` is given.', '`props.defaultImage`:', defaultImage);
+  }
+  var defaultImageSrc = (0, _storageUrlProcessor.replaceGCSUrlOrigin)(_.get(defaultImage, 'url'));
+  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: clickable ? openFullScreen : undefined,
+    $clickable: clickable
+  }, renderImagePlaceholder(), /*#__PURE__*/_react["default"].createElement(ImgBox, {
+    $toShow: isLoaded
+  }, isObjectFit ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(ImgWithObjectFit, _extends({
+    alt: alt,
+    $objectFit: objectFit,
+    $objectPosition: objectPosition,
+    onLoad: handleImageLoaded,
+    ref: imgRef,
+    sizes: supportObjectFit ? sizes : '',
+    src: defaultImageSrc,
+    srcSet: supportObjectFit ? srcset : '',
+    hide: !supportObjectFit
+  }, imgProps)), supportObjectFit ? null : /*#__PURE__*/_react["default"].createElement(FallbackObjectFitImg, {
+    $url: _.get(defaultImage, 'url'),
+    $objectFit: objectFit,
+    $objectPosition: objectPosition
+  })) : /*#__PURE__*/_react["default"].createElement("img", _extends({
+    alt: alt,
+    onLoad: handleImageLoaded,
+    ref: imgRef,
+    sizes: sizes,
+    src: defaultImageSrc,
+    srcSet: srcset
+  }, 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: fullScreenImageRef,
+    sizes: sizes,
+    src: defaultImageSrc,
+    srcSet: srcset
+  }), /*#__PURE__*/_react["default"].createElement(CrossIcon, {
+    $crossIconPos: crossIconPos
+  }, /*#__PURE__*/_react["default"].createElement(_icon.Cross, {
+    releaseBranch: releaseBranch
+  }))))));
+};
+Img.propTypes = {
   alt: _propTypes["default"].string,
   className: _propTypes["default"].string,
   defaultImage: _imgWithPlaceholder["default"].imagePropType,
-  // If the default image is not provided, this component will take the first item in `imageSet` as the default image.
-  // The usage of default image:
-  //   1. `img.src = defaultImage.url` for the browser not supporting `srcset`.
-  //   2. The height/width ratio of the default image is used for this component. (no matter which candidate is acturally rendered)
   imgPlaceholderSrc: _propTypes["default"].string,
   placeholderNoBlur: _propTypes["default"].bool,
   noImgPlaceholder: _propTypes["default"].bool,
   imgProps: _propTypes["default"].object,
-  // The properties of `imgProps` will all be passed to `<img />` element.
   imageSet: _propTypes["default"].arrayOf(_imgWithPlaceholder["default"].imagePropType),
   objectFit: _propTypes["default"].oneOf([objectFitConsts.cover, objectFitConsts.contain]),
   objectPosition: _propTypes["default"].string,
   sizes: _propTypes["default"].string.isRequired,
   clickable: _propTypes["default"].bool
-});
-_defineProperty(Img, "defaultProps", {
-  alt: '',
-  className: '',
-  defaultImage: {},
-  imageSet: [],
-  imgPlaceholderSrc: '',
-  imgProps: {},
-  placeholderNoBlur: false,
-  noImgPlaceholder: false,
-  sizes: '',
-  clickable: false
-});
+};
+var _default = exports["default"] = Img;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "2.3.0-rc.0",
+  "version": "2.3.0-rc.1",
   "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",
@@ -41,5 +41,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "62b8eed6f31e3a4f05aa3ed05101d31d4d15cb47"
+  "gitHead": "d0b553e3d3df415f0be4bcac782669612828f225"
 }