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

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.0",
+  "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": "22127d74e0d0433e87b427aed82394972cade963"
+  "gitHead": "adbbd91639cb9a74438108b97083294acf57d8cf"
 }