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

package/lib/components/body/youtube.js

@@ -1,82 +1,54 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
-
 var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
-
 var _multimedia = _interopRequireDefault(require("./multimedia"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 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 _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, descriptor.key, descriptor); } }
-
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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); }
 var _ = {
   get: _get["default"]
 };
 var Block = _multimedia["default"].Block;
-
 var IframeBlock = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "youtube__IframeBlock",
   componentId: "sc-7pioae-0"
 })(["padding-bottom:56.25%;position:relative;> iframe{position:absolute;top:0;left:0;width:100%;height:100%;}"]);
-
 var Desc = _multimedia["default"].Caption;
-
-var Youtube = /*#__PURE__*/function (_React$PureComponent) {
+var Youtube = exports["default"] = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(Youtube, _React$PureComponent);
-
   var _super = _createSuper(Youtube);
-
   function Youtube() {
     _classCallCheck(this, Youtube);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(Youtube, [{
     key: "render",
     value: function render() {
       var _this$props = this.props,
-          className = _this$props.className,
-          data = _this$props.data;
-
+        className = _this$props.className,
+        data = _this$props.data;
       var id = _.get(data, 'content.0.youtubeId');
-
       var desc = _.get(data, 'content.0.description');
-
       return /*#__PURE__*/_react["default"].createElement(Block, {
         className: className
       }, /*#__PURE__*/_react["default"].createElement(IframeBlock, null, /*#__PURE__*/_react["default"].createElement("iframe", {
@@ -87,17 +59,12 @@ var Youtube = /*#__PURE__*/function (_React$PureComponent) {
       })), desc ? /*#__PURE__*/_react["default"].createElement(Desc, null, desc) : null);
     }
   }]);
-
   return Youtube;
 }(_react["default"].PureComponent);
-
-exports["default"] = Youtube;
-
 _defineProperty(Youtube, "propTypes", {
   className: _propTypes["default"].string,
   data: _body["default"].elementData.isRequired
 });
-
 _defineProperty(Youtube, "defaultProps", {
   className: ''
 });

package/lib/components/donation-box.js

@@ -1,101 +1,70 @@
 "use strict";
 
-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); }
-
+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 = _interopRequireWildcard(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
-
 var _externalLinks = _interopRequireDefault(require("@twreporter/core/lib/constants/external-links"));
-
 var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
-
 var _donationLinkAnchor = require("@twreporter/core/lib/constants/donation-link-anchor");
-
 var _color = require("@twreporter/core/lib/constants/color");
-
 var _css = _interopRequireDefault(require("../constants/css"));
-
 var _typography = _interopRequireDefault(require("../constants/typography"));
-
-var _templateObject, _templateObject2, _templateObject3;
-
+var _templateObject, _templateObject2, _templateObject3; // @twreporter
+// constants
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-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 _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 _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, descriptor.key, descriptor); } }
-
+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 _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); }
 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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
-
 var _content = {
   title: '用行動支持報導者',
   desc: ['獨立的精神，是自由思想的條件。獨立的媒體，才能守護公共領域，讓自由的討論和真相浮現。', '在艱困的媒體環境，《報導者》堅持以非營利組織的模式投入公共領域的調查與深度報導。我們透過讀者的贊助支持來營運，不仰賴商業廣告置入，在獨立自主的前提下，穿梭在各項重要公共議題中。', '你的支持能幫助《報導者》持續追蹤國內外新聞事件的真相，邀請你加入 3 種支持方案，和我們一起推動這場媒體小革命。'],
   bt: '立即支持'
 };
-
 var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box__Container",
   componentId: "sc-1uszvr7-0"
 })(["margin:60px auto 55px auto;padding:40px 30px 30px 30px;width:502px;min-height:284px;background:", ";border-left:solid 1px ", ";", ""], _color.colorGrayscale.white, function (props) {
   return props.theme.colors.secondary.support;
 }, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    margin: 40px auto;\n    width: 100%;\n    min-height: 335px;\n  "]))));
-
 var Title = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "donation-box__Title",
   componentId: "sc-1uszvr7-1"
 })(["display:inline-block;background:", ";padding-right:2px;box-shadow:5px 15px 0 ", " inset;font-size:22px;font-weight:", ";color:", ";margin-bottom:15px;", ""], function (props) {
   return props.theme.colors.secondary.background;
 }, _color.colorGrayscale.white, _typography["default"].font.weight.bold, _color.colorGrayscale.gray900, _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    margin-bottom: 18px;\n  "]))));
-
 var Text = /*#__PURE__*/_styledComponents["default"].p.withConfig({
   displayName: "donation-box__Text",
   componentId: "sc-1uszvr7-2"
 })(["font-size:16px;line-height:1.75;color:", ";margin-bottom:0.5em;&:last-of-type{margin-bottom:0;}", ""], _color.colorGrayscale.gray900, _css["default"].linkChildren);
-
 var Donate = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "donation-box__Donate",
   componentId: "sc-1uszvr7-3"
 })(["width:100%;height:55px;margin-top:50px;", " a{width:140px;height:55px;background:", ";display:table;float:right;cursor:pointer;text-decoration:none;p{display:table-cell;text-align:center;vertical-align:middle;font-size:14px;color:", ";font-weight:", ";letter-spacing:1.3px;}&:hover{background:", ";}}"], _mediaQuery["default"].mobileOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    margin-top: 40px;\n  "]))), _color.colorGrayscale.black, _color.colorGrayscale.white, _typography["default"].font.weight.normal, function (props) {
   return props.theme.colors.secondary.accent;
 });
-
-var DonationBox = /*#__PURE__*/function (_PureComponent) {
+var DonationBox = exports["default"] = /*#__PURE__*/function (_PureComponent) {
   _inherits(DonationBox, _PureComponent);
-
   var _super = _createSuper(DonationBox);
-
   function DonationBox() {
     _classCallCheck(this, DonationBox);
-
     return _super.apply(this, arguments);
   }
-
   _createClass(DonationBox, [{
     key: "render",
     value: function render() {
@@ -110,8 +79,5 @@ var DonationBox = /*#__PURE__*/function (_PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement("p", null, _content.bt))));
     }
   }]);
-
   return DonationBox;
-}(_react.PureComponent);
-
-exports["default"] = DonationBox;
+}(_react.PureComponent);

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

@@ -1,72 +1,42 @@
 "use strict";
 
-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); }
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _storageUrlProcessor = require("@twreporter/core/lib/utils/storage-url-processor");
-
 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 _releaseBranch = _interopRequireDefault(require("@twreporter/core/lib/constants/release-branch"));
-
 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"));
-
 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; }
-
+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, descriptor.key, descriptor); } }
-
+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) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
-
+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
 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",
@@ -74,13 +44,12 @@ var PlaceholderIcon = function PlaceholderIcon(props) {
     fillRule: "evenodd"
   }));
 };
-
 PlaceholderIcon.defaultProps = {
   width: "54",
   height: "57",
   viewBox: "0 0 107 113",
   xmlns: "http://www.w3.org/2000/svg"
-};
+}; // lodash
 var _ = {
   get: _get["default"],
   map: _map["default"],
@@ -90,14 +59,12 @@ var objectFitConsts = {
   contain: 'contain',
   cover: 'cover'
 };
-
 var ImgContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgContainer",
   componentId: "c6mvsc-0"
 })(["position:relative;overflow:hidden;width:100%;", ""], function (props) {
   return props.$heightString;
 });
-
 var ImgPlaceholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgPlaceholder",
   componentId: "c6mvsc-1"
@@ -108,14 +75,12 @@ var ImgPlaceholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 }, function (props) {
   return props.$src;
 });
-
 var Placeholder = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__Placeholder",
   componentId: "c6mvsc-2"
 })(["width:100%;height:100%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);display:", ";svg{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}"], function (props) {
   return props.$toShow ? 'block' : 'none';
 });
-
 var ImgWithObjectFit = /*#__PURE__*/_styledComponents["default"].img.withConfig({
   displayName: "img-with-placeholder__ImgWithObjectFit",
   componentId: "c6mvsc-3"
@@ -126,7 +91,6 @@ var ImgWithObjectFit = /*#__PURE__*/_styledComponents["default"].img.withConfig(
 }, function (props) {
   return props.toShowFallback ? '0' : '1';
 });
-
 var FallbackObjectFitImg = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__FallbackObjectFitImg",
   componentId: "c6mvsc-4"
@@ -137,28 +101,25 @@ var FallbackObjectFitImg = /*#__PURE__*/_styledComponents["default"].div.withCon
 }, function (props) {
   return props.$url;
 });
-
 var ImgBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "img-with-placeholder__ImgBox",
   componentId: "c6mvsc-5"
 })(["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.
@@ -166,28 +127,19 @@ var CrossIcon = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  * @class Image
  * @extends {React.PureComponent}
  */
-
-
-var Img = /*#__PURE__*/function (_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,
@@ -201,20 +153,18 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     _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.
+      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();
     }
@@ -228,10 +178,10 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     key: "handleImageLoaded",
     value: function handleImageLoaded() {
       var _this2 = this;
-
       // 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 () {
@@ -240,8 +190,9 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
             isLoaded: true
           });
         }
-      }, 500); // after clear image rendered, not display placeholder anymore
+      }, 500);
 
+      // after clear image rendered, not display placeholder anymore
       setTimeout(function () {
         if (_this2._isMounted) {
           _this2.setState({
@@ -255,23 +206,20 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     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;
-
+        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
         });
-      } // render default placeholder
-
-
+      }
+      // render default placeholder
       return /*#__PURE__*/_react["default"].createElement(Placeholder, {
         $toShow: toShowPlaceholder
       }, /*#__PURE__*/_react["default"].createElement(PlaceholderIcon, null));
@@ -280,64 +228,50 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
     key: "render",
     value: function render() {
       var _this$context,
-          _this3 = this;
-
+        _this3 = this;
       var _this$state = this.state,
-          isLoaded = _this$state.isLoaded,
-          showFullScreenImg = _this$state.showFullScreenImg,
-          isMobile = _this$state.isMobile;
+        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 ? void 0 : (_this$context = this.context) === null || _this$context === void 0 ? void 0 : _this$context.releaseBranch) || _releaseBranch["default"].release;
-
+        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 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,
@@ -379,14 +313,9 @@ var Img = /*#__PURE__*/function (_React$PureComponent) {
       }))))));
     }
   }]);
-
   return Img;
 }(_react["default"].PureComponent);
-
-exports["default"] = Img;
-
 _defineProperty(Img, "contextType", _styledComponents.ThemeContext);
-
 _defineProperty(Img, "propTypes", {
   alt: _propTypes["default"].string,
   className: _propTypes["default"].string,
@@ -406,7 +335,6 @@ _defineProperty(Img, "propTypes", {
   sizes: _propTypes["default"].string.isRequired,
   clickable: _propTypes["default"].bool
 });
-
 _defineProperty(Img, "defaultProps", {
   alt: '',
   className: '',