@twreporter/react-article-components 1.6.1 → 1.6.2-rc.0

package/lib/components/article-page.js

@@ -15,8 +15,6 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _reactScroll = require("react-scroll");
-
 var _body = _interopRequireDefault(require("./body"));
 
 var _desktopAside = _interopRequireDefault(require("./aside/desktop-aside"));
@@ -384,14 +382,12 @@ var Article = /*#__PURE__*/function (_PureComponent) {
         key: _.get(post, 'slug', 'article-page-body-key'),
         brief: _.get(post, 'brief.api_data'),
         content: _.get(post, 'content.api_data')
-      })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_reactScroll.Element, {
-        name: _anchor.relatedPostAnchor
-      }, /*#__PURE__*/_react["default"].createElement(_license["default"], {
+      })), metadataAndToolsJSX), /*#__PURE__*/_react["default"].createElement(_donationBox["default"], null), /*#__PURE__*/_react["default"].createElement(_license["default"], {
         license: post.copyright,
         publishedDate: post.published_date,
-        id: _anchor.relatedPostAnchor // current scroll to releated post anchor
+        id: _anchor.RELATED_POST_ANCHOR_ID // current scroll to releated post anchor
 
-      })), /*#__PURE__*/_react["default"].createElement(StyledSeparationCurve, null), /*#__PURE__*/_react["default"].createElement(RelatedBlock, null, /*#__PURE__*/_react["default"].createElement(_related["default"], {
+      }), /*#__PURE__*/_react["default"].createElement(StyledSeparationCurve, null), /*#__PURE__*/_react["default"].createElement(RelatedBlock, null, /*#__PURE__*/_react["default"].createElement(_related["default"], {
         id: post.id,
         data: relatedPosts,
         hasMore: hasMoreRelateds,

package/lib/components/aside/mobile-tool-bar.js

@@ -13,8 +13,6 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _reactScroll = require("react-scroll");
-
 var _dynamicComponentsContext = _interopRequireDefault(require("../../contexts/dynamic-components-context"));
 
 var _aside = _interopRequireDefault(require("../../constants/prop-types/aside"));
@@ -43,6 +41,10 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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 _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 _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."); }
@@ -455,23 +457,18 @@ var RelatedPost = function RelatedPost() {
   var theme = themeContext.name === _theme["default"].article.v2.photo ? 'photography' : 'normal';
   var releaseBranch = themeContext.releaseBranch;
 
-  var scrollToBottom = function scrollToBottom() {
-    _reactScroll.scroller.scrollTo(_anchor.relatedPostAnchor, {
-      duration: 800,
-      smooth: 'easeInOutQuint'
-    });
-  };
+  var anchorScrollAttr = _defineProperty({}, _anchor.ARTICLE_ANCHOR_SCROLL, 'true');
 
-  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
-    onClick: scrollToBottom
-  }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
+  return /*#__PURE__*/_react["default"].createElement(ButtonContainer, null, /*#__PURE__*/_react["default"].createElement("a", _extends({
+    href: "#".concat(_anchor.RELATED_POST_ANCHOR_ID)
+  }, anchorScrollAttr), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
     text: "\u76F8\u95DC\u6587\u7AE0",
     iconComponent: /*#__PURE__*/_react["default"].createElement(_icon.Article, {
       releaseBranch: releaseBranch
     }),
     theme: theme,
     hideText: hideText
-  }));
+  })));
 };
 
 var ToolBar = function ToolBar(_ref9) {

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,32 @@ 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 _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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
 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 +112,8 @@ function dispatchWindowLoadEvent() {
   window.dispatchEvent(loadEvent);
 }
 
+var infogramEmbed = 'infogram';
+
 var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
   _inherits(EmbeddedCode, _React$PureComponent);
 
@@ -103,18 +125,15 @@ 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
+    });
 
-      var node = this._embedded.current;
+    _defineProperty(_assertThisInitialized(_this), "executeScript", function () {
+      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 +148,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 +174,73 @@ var EmbeddedCode = /*#__PURE__*/function (_React$PureComponent) {
 
         node.appendChild(scriptsFragment);
       }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "loadEmbed", function () {
+      if (!_this.state.isLoaded) {
+        _this.setState({
+          isLoaded: true
+        }, _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 +249,49 @@ _defineProperty(EmbeddedCode, "propTypes", {
 
 _defineProperty(EmbeddedCode, "defaultProps", {
   className: ''
-});
+});
+
+var WayPointWrapper = function WayPointWrapper(props) {
+  var isScrollingToAnchor = props.isScrollingToAnchor;
+
+  var _useState = (0, _react.useState)(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isInViewPort = _useState2[0],
+      setIsInViewPort = _useState2[1];
+
+  var embedRef = (0, _react.useRef)(null);
+  (0, _react.useEffect)(function () {
+    if (!isScrollingToAnchor && isInViewPort) {
+      embedRef.current.loadEmbed();
+    }
+  }, [isScrollingToAnchor]);
+
+  var onEnter = function onEnter() {
+    setIsInViewPort(true);
+
+    if (!isScrollingToAnchor) {
+      embedRef.current.loadEmbed();
+    }
+  };
+
+  var onLeave = function onLeave() {
+    setIsInViewPort(false);
+  };
+
+  return /*#__PURE__*/_react["default"].createElement(_reactWaypoint.Waypoint, {
+    onEnter: onEnter,
+    onLeave: onLeave,
+    fireOnRapidScroll: false
+  }, /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(EmbeddedCode, _extends({}, props, {
+    ref: embedRef
+  }))));
+};
+
+WayPointWrapper.defaultProps = {
+  isScrollingToAnchor: false
+};
+WayPointWrapper.propTypes = {
+  isScrollingToAnchor: _propTypes["default"].bool
+};
+var _default = WayPointWrapper;
+exports["default"] = _default;

package/lib/components/body/index.js

@@ -56,6 +56,10 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _smoothScroll = _interopRequireDefault(require("smooth-scroll/dist/smooth-scroll"));
+
+var _anchor = require("../../constants/anchor");
+
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21, _templateObject22, _templateObject23;
 
 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); }
@@ -203,12 +207,14 @@ var ClearFloat = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  *
  * @export
  * @param {ElementData} [data={}]
+ * @param {boolean} isScrollingToAnchor - state of scrolling to an anchor or not
  * @returns
  */
 
 
 function renderElement() {
   var data = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+  var isScrollingToAnchor = arguments.length > 1 ? arguments[1] : undefined;
   var isCenterAligned = data.alignment === _elementAlignment["default"].center || data.alignment === _elementAlignment["default"].centerSmall;
 
   switch (data.type) {
@@ -270,14 +276,16 @@ function renderElement() {
             return /*#__PURE__*/_react["default"].createElement(AlignRight, {
               key: data.id
             }, /*#__PURE__*/_react["default"].createElement(StyledEmbedded, {
-              data: data
+              data: data,
+              isScrollingToAnchor: isScrollingToAnchor
             }));
           }
 
         case _elementAlignment["default"].centerSmall:
           return /*#__PURE__*/_react["default"].createElement(StyledEmbeddedNormal, {
             key: data.id,
-            data: data
+            data: data,
+            isScrollingToAnchor: isScrollingToAnchor
           });
 
         case _elementAlignment["default"].center:
@@ -285,7 +293,8 @@ function renderElement() {
           {
             return /*#__PURE__*/_react["default"].createElement(StyledEmbedded, {
               key: data.id,
-              data: data
+              data: data,
+              isScrollingToAnchor: isScrollingToAnchor
             });
           }
       }
@@ -382,36 +391,77 @@ function renderElement() {
   }
 }
 
-var Body = /*#__PURE__*/function (_PureComponent) {
-  _inherits(Body, _PureComponent);
+var Body = /*#__PURE__*/function (_Component) {
+  _inherits(Body, _Component);
 
   var _super = _createSuper(Body);
 
-  function Body() {
+  function Body(props) {
     var _this;
 
     _classCallCheck(this, Body);
 
-    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
-      args[_key] = arguments[_key];
-    }
-
-    _this = _super.call.apply(_super, [this].concat(args));
+    _this = _super.call(this, props);
 
     _defineProperty(_assertThisInitialized(_this), "tocManager", _tableOfContents["default"].createManager());
 
+    _defineProperty(_assertThisInitialized(_this), "_scrollStartHandler", function () {
+      _this._onStartScrollingToAnchor(true);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_scrollStopHandler", function () {
+      // Wait for a short time to avoid trigger waypoint's onEnter() of infogram embed close to the anchor
+      setTimeout(function () {
+        return _this._onStartScrollingToAnchor(false);
+      }, _anchor.WAIT_AFTER_REACH_ANCHOR);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_onStartScrollingToAnchor", function (isScrollingToAnchor, callback) {
+      _this.setState({
+        isScrollingToAnchor: isScrollingToAnchor
+      }, function () {
+        if (callback) {
+          callback();
+        }
+      });
+    });
+
     _defineProperty(_assertThisInitialized(_this), "_buildContentElement", function (data, index) {
       if (!data.id) {
         data.id = "body_element_".concat(index);
       }
 
-      return renderElement(data);
+      return renderElement(data, _this.state.isScrollingToAnchor);
     });
 
+    _this.state = {
+      isScrollingToAnchor: false
+    };
     return _this;
   }
 
   _createClass(Body, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      // We apply smooth scroll only to ARTICLE_ANCHOR_SCROLL('article-anchor-scroll') selector
+      // ex: <a article-anchor-scroll="true" href="#..."" />
+      // eslint-disable-next-line no-new
+      new _smoothScroll["default"]("[".concat(_anchor.ARTICLE_ANCHOR_SCROLL, "]"), {
+        speed: _anchor.ANCHOR_SCROLL_DURATION,
+        speedAsDuration: true,
+        easing: 'easeInOutQuint',
+        emitEvents: true
+      });
+      document.addEventListener('scrollStart', this._scrollStartHandler, false);
+      document.addEventListener('scrollStop', this._scrollStopHandler, false);
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.removeEventListener('scrollStart', this._scrollStartHandler);
+      document.removeEventListener('scrollStop', this._scrollStopHandler);
+    }
+  }, {
     key: "render",
     value: function render() {
       var _this2 = this;
@@ -439,13 +489,14 @@ var Body = /*#__PURE__*/function (_PureComponent) {
       return /*#__PURE__*/_react["default"].createElement("div", null, /*#__PURE__*/_react["default"].createElement(StyledBrief, {
         data: brief
       }), contentJsx, /*#__PURE__*/_react["default"].createElement(ClearFloat, null), enableTOC ? /*#__PURE__*/_react["default"].createElement(_tableOfContents["default"].React.TableOfContents, {
-        manager: this.tocManager
+        manager: this.tocManager,
+        onStartScrollingToAnchor: this._onStartScrollingToAnchor
       }) : null);
     }
   }]);
 
   return Body;
-}(_react.PureComponent);
+}(_react.Component);
 
 exports["default"] = Body;
 

package/lib/components/body/infobox.js

@@ -7,17 +7,19 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _get = _interopRequireDefault(require("lodash/get"));
 
-var _css = _interopRequireDefault(require("../../constants/css"));
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
 
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
+var _body = _interopRequireDefault(require("../../constants/prop-types/body"));
+
+var _css = _interopRequireDefault(require("../../constants/css"));
 
 var _theme = _interopRequireDefault(require("../../constants/theme"));
 
@@ -25,16 +27,16 @@ var _typography = _interopRequireDefault(require("../../constants/typography"));
 
 var _color = _interopRequireDefault(require("../../constants/color"));
 
-var _get = _interopRequireDefault(require("lodash/get"));
+var _anchor = require("../../constants/anchor");
 
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
 
+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 _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 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); } }
@@ -121,11 +123,18 @@ var Infobox = /*#__PURE__*/function (_PureComponent) {
 
       var title = _.get(data, ['content', 0, 'title'], '');
 
-      return contentHtmlString ? /*#__PURE__*/_react["default"].createElement(Container, {
+      var anchorRegex = /<a([^>]*)>/g;
+      var hashRegex = /href={?["']#/;
+      var mutatedContentHtmlString = contentHtmlString === null || contentHtmlString === void 0 ? void 0 : contentHtmlString.replace(anchorRegex, function (anchorString, attrs) {
+        // Here we insert a custom attribute 'ARTICLE_ANCHOR_SCROLL' in order to apply
+        // smooth scroll effect on <a href="#..."> anchors inside infobox
+        return hashRegex.exec(anchorString) ? "<a ".concat(_anchor.ARTICLE_ANCHOR_SCROLL, "=\"true\" ").concat(attrs, ">") : anchorString;
+      });
+      return mutatedContentHtmlString ? /*#__PURE__*/_react["default"].createElement(Container, {
         className: className
       }, title ? /*#__PURE__*/_react["default"].createElement(Title, null, title) : null, /*#__PURE__*/_react["default"].createElement(Content, {
         dangerouslySetInnerHTML: {
-          __html: contentHtmlString
+          __html: mutatedContentHtmlString
         }
       })) : null;
     }

package/lib/components/table-of-contents/index.js

@@ -17,6 +17,8 @@ var _tableOfContents = _interopRequireDefault(require("@twreporter/react-compone
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+var _anchor = require("../../constants/anchor");
+
 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); }
@@ -136,7 +138,8 @@ var TableOfContents = /*#__PURE__*/function (_React$PureComponent) {
 
       var _this$props = this.props,
           className = _this$props.className,
-          manager = _this$props.manager;
+          manager = _this$props.manager,
+          onStartScrollingToAnchor = _this$props.onStartScrollingToAnchor;
       var isExpanded = this.state.isExpanded;
       return /*#__PURE__*/_react["default"].createElement("div", {
         className: "hidden-print",
@@ -144,13 +147,21 @@ var TableOfContents = /*#__PURE__*/function (_React$PureComponent) {
       }, /*#__PURE__*/_react["default"].createElement(_tableOfContents["default"].React.TableOfContents, {
         className: className,
         manager: manager,
+        scrollDuration: _anchor.ANCHOR_SCROLL_DURATION,
         render: function render(anchors, highlightAnchor, handleAnchorClick) {
           var anchorsJSX = _.map(anchors, function (anchor) {
             var toHighlight = anchor === highlightAnchor;
             return /*#__PURE__*/_react["default"].createElement(Styled.TOCRow, {
               key: anchor.anchorID,
               onClick: function onClick() {
-                return handleAnchorClick(anchor.anchorID);
+                onStartScrollingToAnchor(true, function () {
+                  return handleAnchorClick(anchor.anchorID, function () {
+                    // Wait for a short time to avoid trigger waypoint's onEnter() of infogram embed close to the anchor
+                    setTimeout(function () {
+                      return onStartScrollingToAnchor(false);
+                    }, _anchor.WAIT_AFTER_REACH_ANCHOR);
+                  });
+                });
               }
             }, /*#__PURE__*/_react["default"].createElement(Styled.TOCIndicator, {
               toHighlight: toHighlight,
@@ -178,7 +189,8 @@ var TableOfContents = /*#__PURE__*/function (_React$PureComponent) {
 
 _defineProperty(TableOfContents, "propTypes", {
   className: _propTypes["default"].string,
-  manager: _tableOfContents["default"].React.TableOfContents.propTypes.manager
+  manager: _tableOfContents["default"].React.TableOfContents.propTypes.manager,
+  onStartScrollingToAnchor: _propTypes["default"].func
 });
 
 _defineProperty(TableOfContents, "defaultProps", {

package/lib/constants/anchor.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.relatedPostAnchor = void 0;
-var relatedPostAnchor = 'related-post-anchor';
-exports.relatedPostAnchor = relatedPostAnchor;
+exports.ANCHOR_SCROLL_DURATION = exports.WAIT_AFTER_REACH_ANCHOR = exports.ARTICLE_ANCHOR_SCROLL = exports.RELATED_POST_ANCHOR_ID = void 0;
+var RELATED_POST_ANCHOR_ID = 'related-post-anchor';
+exports.RELATED_POST_ANCHOR_ID = RELATED_POST_ANCHOR_ID;
+var ARTICLE_ANCHOR_SCROLL = 'article-anchor-scroll';
+exports.ARTICLE_ANCHOR_SCROLL = ARTICLE_ANCHOR_SCROLL;
+var WAIT_AFTER_REACH_ANCHOR = 20;
+exports.WAIT_AFTER_REACH_ANCHOR = WAIT_AFTER_REACH_ANCHOR;
+var ANCHOR_SCROLL_DURATION = 500;
+exports.ANCHOR_SCROLL_DURATION = ANCHOR_SCROLL_DURATION;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.6.1",
+  "version": "1.6.2-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,21 +24,21 @@
     "webpack-dev-server": "^3.7.2"
   },
   "dependencies": {
-    "@twreporter/core": "^1.4.1",
-    "@twreporter/react-components": "^8.11.0",
+    "@twreporter/core": "^1.4.2-rc.0",
+    "@twreporter/react-components": "^8.11.1-rc.0",
     "@twreporter/redux": "^7.2.2",
-    "@twreporter/universal-header": "^2.2.11",
+    "@twreporter/universal-header": "^2.2.12-rc.0",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
     "prop-types": "^15.0.0",
     "react": "^16.3.0",
-    "react-scroll": "^1.8.7",
     "react-waypoint": "^9.0.2",
+    "smooth-scroll": "16.1.3",
     "styled-components": "^4.0.0"
   },
   "files": [
     "lib"
   ],
-  "gitHead": "244cb67b289aa61d0c847dc2f07036d2472269c6"
+  "gitHead": "adbbd91639cb9a74438108b97083294acf57d8cf"
 }