@twreporter/react-article-components 1.4.12-rc.4 → 1.4.12-rc.7

package/CHANGELOG.md

@@ -3,6 +3,34 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.4.12-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.6...@twreporter/react-article-components@1.4.12-rc.7) (2022-06-06)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
+## [1.4.12-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.5...@twreporter/react-article-components@1.4.12-rc.6) (2022-05-30)
+
+
+### Bug Fixes
+
+* clean members to null ([116fd6a](https://github.com/twreporter/twreporter-npm-packages/commit/116fd6a51a00daec61a6d80c4ddb4121e33b5ffd))
+* fix mobile aside scroll part ([575aebd](https://github.com/twreporter/twreporter-npm-packages/commit/575aebd0e995d92907dc0ea4caf47cb3befd5177))
+
+
+
+
+
+## [1.4.12-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.4...@twreporter/react-article-components@1.4.12-rc.5) (2022-05-27)
+
+**Note:** Version bump only for package @twreporter/react-article-components
+
+
+
+
+
 ## [1.4.12-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/react-article-components@1.4.12-rc.3...@twreporter/react-article-components@1.4.12-rc.4) (2022-05-27)
 
 **Note:** Version bump only for package @twreporter/react-article-components

package/lib/components/article-page.js

@@ -51,8 +51,6 @@ var _map = _interopRequireDefault(require("lodash/map"));
 
 var _merge = _interopRequireDefault(require("lodash/merge"));
 
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
 var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11, _templateObject12, _templateObject13, _templateObject14, _templateObject15, _templateObject16, _templateObject17, _templateObject18, _templateObject19, _templateObject20, _templateObject21;
 
 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); }
@@ -88,8 +86,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 var _ = {
   get: _get["default"],
   map: _map["default"],
-  merge: _merge["default"],
-  throttle: _throttle["default"]
+  merge: _merge["default"]
 };
 var fontFamilyCss = /*#__PURE__*/(0, _styledComponents.css)(["font-family:", ";"], _typography["default"].font.family["default"]);
 var shiftLeftCss = /*#__PURE__*/(0, _styledComponents.css)(["position:relative;width:calc(100% + 20px);left:-10px;"]);
@@ -278,24 +275,27 @@ var Article = /*#__PURE__*/function (_PureComponent) {
     });
 
     _this.mobileAsideRef = /*#__PURE__*/_react["default"].createRef();
+    _this.lastKnownScrollPosition = 0;
+    _this.ticking = false;
     _this.scrollPosition = {
       y: 0
     };
+    _this.onScroll = _this._onScroll.bind(_assertThisInitialized(_this));
     _this.toggleMobileAside = _this._toggleMobileAside.bind(_assertThisInitialized(_this));
-    _this.onScroll = _.throttle(_this.toggleMobileAside, 300).bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Article, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      // detect sroll position
       window.addEventListener('scroll', this.onScroll);
     }
   }, {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       window.removeEventListener('scroll', this.onScroll);
+      this.lastKnownScrollPosition = null;
+      this.ticking = null;
       this.scrollPosition = {
         y: 0
       };
@@ -321,6 +321,27 @@ var Article = /*#__PURE__*/function (_PureComponent) {
           }
       }
     }
+    /**
+     * Wrap toggleMobileAside() with requestAnimationFrame() to avoid triggering browser reflow due to reading window.scrollY.
+     * ref: https://developer.mozilla.org/en-US/docs/web/api/document/scroll_event#Example
+     */
+
+  }, {
+    key: "_onScroll",
+    value: function _onScroll() {
+      var _this2 = this;
+
+      this.lastKnownScrollPosition = window.scrollY;
+
+      if (!this.ticking) {
+        window.requestAnimationFrame(function () {
+          _this2.toggleMobileAside(_this2.lastKnownScrollPosition);
+
+          _this2.ticking = false;
+        });
+        this.ticking = true;
+      }
+    }
     /**
      * If users scroll up, and the scrolling distance is more than a certain distance as well, show mobile aside.
      * Otherwise, if users scroll down, hide the mobile aside.
@@ -328,10 +349,9 @@ var Article = /*#__PURE__*/function (_PureComponent) {
 
   }, {
     key: "_toggleMobileAside",
-    value: function _toggleMobileAside() {
+    value: function _toggleMobileAside(currentTopY) {
       if (this.mobileAsideRef) {
-        var mAside = this.mobileAsideRef;
-        var currentTopY = window.scrollY; // Calculate scrolling distance to determine whether to display aside
+        var mAside = this.mobileAsideRef; // Calculate scrolling distance to determine whether to display aside
 
         var lastY = this.scrollPosition.y;
         var distance = currentTopY - lastY;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/react-article-components",
-  "version": "1.4.12-rc.4",
+  "version": "1.4.12-rc.7",
   "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.4.0",
-    "@twreporter/react-components": "^8.9.0-rc.4",
+    "@twreporter/core": "^1.4.1-rc.0",
+    "@twreporter/react-components": "^8.9.0-rc.6",
     "@twreporter/redux": "^7.2.1",
-    "@twreporter/universal-header": "^2.2.9-rc.4",
+    "@twreporter/universal-header": "^2.2.9-rc.7",
     "howler": "^2.2.3",
     "lodash": "^4.17.11",
     "memoize-one": "^5.0.5",
@@ -39,5 +39,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "6cb23fc834f432e3b1a45decaf5ff5a7b7f77400"
+  "gitHead": "74facca540e4dd26eeb29f3a61e0032cdd52c8a8"
 }