@twreporter/universal-header 2.2.9-rc.5 → 2.2.9

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.
 
+## [2.2.9](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.9-rc.7...@twreporter/universal-header@2.2.9) (2022-06-07)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.2.9-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.9-rc.6...@twreporter/universal-header@2.2.9-rc.7) (2022-06-06)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.2.9-rc.6](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.9-rc.5...@twreporter/universal-header@2.2.9-rc.6) (2022-05-30)
+
+
+### Bug Fixes
+
+* clean members to null ([116fd6a](https://github.com/twreporter/twreporter-npm-packages/commit/116fd6a51a00daec61a6d80c4ddb4121e33b5ffd))
+* fix header part ([b5afe9b](https://github.com/twreporter/twreporter-npm-packages/commit/b5afe9bec836c5806377edf09592daae23cfd03a))
+
+
+
+
+
 ## [2.2.9-rc.5](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.9-rc.4...@twreporter/universal-header@2.2.9-rc.5) (2022-05-27)
 
 **Note:** Version bump only for package @twreporter/universal-header

package/lib/containers/header.js

@@ -39,8 +39,6 @@ var _get = _interopRequireDefault(require("lodash/get"));
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _throttle = _interopRequireDefault(require("lodash/throttle"));
-
 var _excluded = ["releaseBranch", "isAuthed", "isLinkExternal", "theme"];
 
 var _templateObject, _templateObject2, _templateObject3;
@@ -87,8 +85,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var _ = {
   get: _get["default"],
-  map: _map["default"],
-  throttle: _throttle["default"]
+  map: _map["default"]
 };
 var HIDE_HEADER_THRESHOLD = 46;
 var TRANSFORM_HEADER_THRESHOLD = 40;
@@ -125,7 +122,9 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
       toUseNarrow: false,
       hideHeader: false
     };
-    _this.handleScroll = _.throttle(_this.__handleScroll, 450).bind(_assertThisInitialized(_this)); // Below parameters are used to calculate scroll transform status.
+    _this.lastKnownPageYOffset = 0;
+    _this.ticking = false;
+    _this.handleScroll = _this.__handleScroll.bind(_assertThisInitialized(_this)); // Below parameters are used to calculate scroll transform status.
 
     _this.currentY = 0;
     _this.readyY = 0;
@@ -145,16 +144,38 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
     key: "componentWillUnmount",
     value: function componentWillUnmount() {
       window.removeEventListener('scroll', this.handleScroll);
+      this.lastKnownPageYOffset = null;
+      this.ticking = null;
       this.handleScroll = null;
       this.currentY = null;
       this.readyY = null;
       this.isTransforming = null;
       this.transformTimer = null;
     }
+    /**
+     * Wrap __handleScroll() with requestAnimationFrame() to avoid triggering browser reflow due to reading window.pageYOffset.
+     * ref: https://developer.mozilla.org/en-US/docs/web/api/document/scroll_event#Example
+     */
+
   }, {
     key: "__handleScroll",
-    value: function __handleScroll(event) {
-      var currentScrollTop = window.pageYOffset;
+    value: function __handleScroll() {
+      var _this2 = this;
+
+      this.lastKnownPageYOffset = window.pageYOffset;
+
+      if (!this.ticking) {
+        window.requestAnimationFrame(function () {
+          _this2.__updateScrollState(_this2.lastKnownPageYOffset);
+
+          _this2.ticking = false;
+        });
+        this.ticking = true;
+      }
+    }
+  }, {
+    key: "__updateScrollState",
+    value: function __updateScrollState(currentScrollTop) {
       var scrollDirection = currentScrollTop > this.currentY ? 'down' : 'up';
       this.currentY = currentScrollTop;
 
@@ -165,7 +186,7 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
   }, {
     key: "__getScrollState",
     value: function __getScrollState(scrollTop, scrollDirection) {
-      var _this2 = this;
+      var _this3 = this;
 
       var isCurrentNarrow = this.state.toUseNarrow;
       var nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
@@ -200,9 +221,9 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
         if (!this.transformTimer) {
           this.isTransforming = true;
           this.transformTimer = setTimeout(function () {
-            _this2.isTransforming = false;
-            _this2.readyY = _this2.currentY;
-            _this2.transformTimer = null;
+            _this3.isTransforming = false;
+            _this3.readyY = _this3.currentY;
+            _this3.transformTimer = null;
           }, TRANSFORM_TIMEOUT);
         }
       }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.2.9-rc.5",
+  "version": "2.2.9",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -18,8 +18,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@twreporter/core": "^1.4.0",
-    "@twreporter/react-components": "^8.9.0-rc.5",
+    "@twreporter/core": "^1.4.1",
+    "@twreporter/react-components": "^8.9.0",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -34,5 +34,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "8f2a6d0a3f503a52ac691f18e8e0ce78bb5b0026"
+  "gitHead": "073c0fdf93dbca043d66e4a5bdf2285c789c7111"
 }