@twreporter/react-article-components 1.5.0 → 1.6.0-rc.0

package/CHANGELOG.md

@@ -3,6 +3,32 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.6.0-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0...@twreporter/react-article-components@1.6.0-rc.0) (2022-07-08)
+
+
+### Bug Fixes
+
+* add comment ([1d1ef89](https://github.com/twreporter/twreporter-npm-packages/commit/1d1ef89b9aeacecc225b0875e7ebec27459aac1d))
+* add destructor ([3b0e699](https://github.com/twreporter/twreporter-npm-packages/commit/3b0e69973d95d561d95b0b4933ac45de112869d0))
+* refactor import ([f514e5b](https://github.com/twreporter/twreporter-npm-packages/commit/f514e5b78a84cfad55259b423502068094ed04de))
+* refactor private members ([90fe033](https://github.com/twreporter/twreporter-npm-packages/commit/90fe033615a5860f2a05bad2f5987ee0835bce13))
+* rename constant ([7195d43](https://github.com/twreporter/twreporter-npm-packages/commit/7195d437014664f5939e84681344f7b3509b8473))
+* rewire execute script logic ([762f57e](https://github.com/twreporter/twreporter-npm-packages/commit/762f57efd309447e4b20e95f598cb552735e9746))
+* rewire loading logic ([98f368d](https://github.com/twreporter/twreporter-npm-packages/commit/98f368d0e6dde093f6f40abbe197c3d2354d1bf3))
+* shorter keyword to infogram ([260d83c](https://github.com/twreporter/twreporter-npm-packages/commit/260d83c71ff877685f76f9f1d53e5a656d537923))
+* simplify isLoaded ([5872dbb](https://github.com/twreporter/twreporter-npm-packages/commit/5872dbb3a7bf929388949fab55f3d3c809af56bd))
+
+
+### Features
+
+* add load script ([7136740](https://github.com/twreporter/twreporter-npm-packages/commit/7136740ad4f8152dc92bfcdb677924a7f1b37613))
+* add waypoint wrapper ([0a02cdf](https://github.com/twreporter/twreporter-npm-packages/commit/0a02cdf7cd0e5d53e8c62cf1666be51688464784))
+* enable delay loading of infogram ([e312e97](https://github.com/twreporter/twreporter-npm-packages/commit/e312e97fcc000a7bf211f55db5675a08cee99ee9))
+
+
+
+
+
 # [1.5.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.5.0-rc.5...@twreporter/react-article-components@1.5.0) (2022-07-06)
 
 **Note:** Version bump only for package @twreporter/react-article-components

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

@@ -7,17 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = exports.Caption = exports.Block = void 0;
 
-var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _react = _interopRequireDefault(require("react"));
-
 var _styledComponents = _interopRequireDefault(require("styled-components"));
 
-var _theme = _interopRequireDefault(require("../../constants/theme"));
-
-var _color = _interopRequireDefault(require("../../constants/color"));
+var _reactWaypoint = require("react-waypoint");
 
 var _forEach = _interopRequireDefault(require("lodash/forEach"));
 
@@ -25,8 +21,20 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _merge = _interopRequireDefault(require("lodash/merge"));
 
+var _theme = _interopRequireDefault(require("../../constants/theme"));
+
+var _color = _interopRequireDefault(require("../../constants/color"));
+
+var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+
 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 _extends() { _extends = Object.assign || 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); } }
@@ -92,6 +100,8 @@ function dispatchWindowLoadEvent() {
   window.dispatchEvent(loadEvent);
 }
 
+var infogramEmbed = 'infogram';
+
 var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(EmbeddedCode, _React$PureComponent);
 
@@ -103,18 +113,19 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
     _classCallCheck(this, EmbeddedCode);
 
     _this = _super.call(this, props);
-    _this._embedded = /*#__PURE__*/_react["default"].createRef();
-    return _this;
-  }
 
-  _createClass(EmbeddedCode, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      var _this2 = this;
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isLoaded: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "executeScript", function () {
+      _this.setState({
+        isLoaded: true
+      });
 
-      var node = this._embedded.current;
+      var node = _this._embedded.current;
 
-      var scripts = _.get(this.props, ['data', 'content', 0, 'scripts']);
+      var scripts = _.get(_this.props, ['data', 'content', 0, 'scripts']);
 
       if (node && Array.isArray(scripts)) {
         var scriptsCount = scripts.length;
@@ -129,7 +140,7 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
             try {
               scriptEle.setAttribute(name, value);
             } catch (err) {
-              console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this2.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
+              console.error('Failed to set an attribute to the embbeded script.\n', "embedded element id: ".concat(_.get(_this.props, 'data.id', ''), "\n"), "attribute name: ".concat(name, "\n"), "attribute value: ".concat(value, "\n"), 'error:\n', err);
             }
           });
 
@@ -155,31 +166,71 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
 
         node.appendChild(scriptsFragment);
       }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "loadEmbed", function () {
+      if (!_this.state.isLoaded) {
+        _this.executeScript();
+      }
+    });
+
+    _this._embedded = /*#__PURE__*/_react["default"].createRef();
+
+    var _$get = _.get(_this.props, ['data', 'content', 0], {}),
+        caption = _$get.caption,
+        embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
+
+    _this._caption = caption;
+    _this._embeddedCodeWithoutScript = embeddedCodeWithoutScript;
+    return _this;
+  }
+
+  _createClass(EmbeddedCode, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      var _this$_embeddedCodeWi;
+
+      // Delay loading infogram in loadEmbed()
+      if (!((_this$_embeddedCodeWi = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi !== void 0 && _this$_embeddedCodeWi.includes(infogramEmbed))) {
+        this.executeScript();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      this._embedded = null;
+      this._caption = null;
+      this._embeddedCodeWithoutScript = null;
     }
   }, {
     key: "render",
     value: function render() {
-      var className = this.props.className;
+      var _this$_embeddedCodeWi2;
 
-      var _$get = _.get(this.props, ['data', 'content', 0], {}),
-          caption = _$get.caption,
-          embeddedCodeWithoutScript = _$get.embeddedCodeWithoutScript;
+      var className = this.props.className;
 
-      return /*#__PURE__*/_react["default"].createElement("div", {
+      var embed = /*#__PURE__*/_react["default"].createElement("div", {
         className: className
       }, /*#__PURE__*/_react["default"].createElement(Block, {
         ref: this._embedded,
         dangerouslySetInnerHTML: {
-          __html: embeddedCodeWithoutScript
+          __html: this._embeddedCodeWithoutScript
         }
-      }), caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, caption) : null);
+      }), this._caption ? /*#__PURE__*/_react["default"].createElement(Caption, null, this._caption) : null);
+
+      if ((_this$_embeddedCodeWi2 = this._embeddedCodeWithoutScript) !== null && _this$_embeddedCodeWi2 !== void 0 && _this$_embeddedCodeWi2.includes(infogramEmbed)) {
+        return this.state.isLoaded ? embed : null;
+      }
+
+      return embed;
     }
   }]);
 
   return EmbeddedCode;
-}(_react["default"].PureComponent);
+}(_react["default"].PureComponent); // Serious layout shifts show up when loading bunch of infograms due to lack of heights,
+// so here we apply waypoint wrapper to load infogram dynamically to avoid layout shifts for anchors.
+// https://twreporter-org.atlassian.net/browse/TWREPORTER-60
 
-exports["default"] = EmbeddedCode;
 
 _defineProperty(EmbeddedCode, "propTypes", {
   className: _propTypes["default"].string,
@@ -188,4 +239,22 @@ _defineProperty(EmbeddedCode, "propTypes", {
 
 _defineProperty(EmbeddedCode, "defaultProps", {
   className: ''
-});
+});
+
+var WayPointWrapper = function WayPointWrapper(props) {
+  var embedRef = (0, _react.useRef)(null);
+
+  var onEnter = function onEnter() {
+    embedRef.current.loadEmbed();
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
+    onEnter: onEnter,
+    fireOnRapidScroll: false
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
+    ref: embedRef
+  }))));
+};
+
+var _default = WayPointWrapper;
+exports["default"] = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.5.0",
+  "version": "1.6.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",
@@ -40,5 +40,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "675d3d3bd4bb0d2086d3b47ca3fe867cc084a26f"
+  "gitHead": "5ff16a85b38a7668e29e94a2d2e9d2ee8261bc52"
 }