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

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 TwReporter
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/lib/components/body/embedded-code.js

@@ -78,8 +78,7 @@ var _ = {
 };
 var embedNamespace = {
   infogram: 'infogram',
-  twreporter: '__twreporterEmbeddedData',
-  storyTellingReporter: '@story-telling-reporter'
+  twreporter: '__twreporterEmbeddedData'
 };
 
 var Block = /*#__PURE__*/_styledComponents["default"].div.withConfig({
@@ -208,23 +207,17 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _createClass(EmbeddedCode, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$_embeddedCode, _this$_embeddedCode2;
-
-      //  !! WORKAROUND !!
-      //  After upgrading to react v18,
-      //  `EmbeddedCode` component becomes abnormal.
-      //  One case is that `EmbeddedCode` will `executeScript()` twice.
-      //  Therefore, the embedded code will generate duplicate contents.
-      //
-      //  To avoid `executeScript()` twice,
-      //  temporarily comment out the following condition.
-      //
-      //  Delay loading infogram in loadEmbed()
-      // if (!this._embeddedCodeWithoutScript?.includes(embedNamespace.infogram)) {
-      //   this.setState({ isLoaded: true }, this.executeScript)
-      // }
-      // Deliberately set z-index for embeded from @twreporter
-      if ((_this$_embeddedCode = this._embeddedCode) !== null && _this$_embeddedCode !== void 0 && _this$_embeddedCode.includes(embedNamespace.twreporter) || (_this$_embeddedCode2 = this._embeddedCode) !== null && _this$_embeddedCode2 !== void 0 && _this$_embeddedCode2.includes(embedNamespace.storyTellingReporter)) {
+      var _this$_embeddedCodeWi, _this$_embeddedCode;
+
+      // Delay loading infogram in loadEmbed()
+      if (!((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(embedNamespace.infogram))) {
+        this.setState({
+          isLoaded: true
+        }, this.executeScript);
+      } // Deliberately set z-index for embeded from @twreporter
+
+
+      if ((_this$_embeddedCode = this._embeddedCode) !== null && _this$_embeddedCode !== void 0 && _this$_embeddedCode.includes(embedNamespace.twreporter)) {
         this.setState({
           shouldEscalateZIndex: true
         });
@@ -241,7 +234,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "render",
     value: function render() {
-      var _this$_embeddedCodeWi;
+      var _this$_embeddedCodeWi2;
 
       var className = this.props.className;
       var shouldEscalateZIndex = this.state.shouldEscalateZIndex;
@@ -256,7 +249,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
         }
       }), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
 
-      if ((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(embedNamespace.infogram)) {
+      if ((_this$_embeddedCodeWi2 = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi2 !== void 0 && _this$_embeddedCodeWi2.includes(embedNamespace.infogram)) {
         return this.state.isLoaded ? embed : null;
       }
 
@@ -316,7 +309,7 @@ var WayPointWrapper = function WayPointWrapper(props) {
       onEnter: onEnter,
       onLeave: onLeave,
       fireOnRapidScroll: false,
-      topOffset: "-150%"
+      topOffset: 5
     }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
       ref: embedRef
     }))))

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.1-beta.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",
@@ -40,5 +40,6 @@
   },
   "files": [
     "lib"
-  ]
+  ],
+  "gitHead": "40ff2a4c83c47f90335072049e9bb65a789088a6"
 }