@twreporter/universal-header 3.0.3-rc.0 → 3.0.3-rc.2

package/lib/constants/external-links.js

@@ -17,5 +17,4 @@ var links = {
   kidsReporter: 'https://kids.twreporter.org/',
   publicationAndMerchandise: 'https://twreporter.backme.tw/shops/3619?locale=zh-TW'
 };
-var _default = links;
-exports["default"] = _default;
+var _default = exports["default"] = links;

package/lib/constants/fonts.js

@@ -4,10 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _font = require("@twreporter/core/lib/constants/font");
-
-var _default = {
+var _default = exports["default"] = {
   size: {
     xsmall: '9px',
     small: '12px',
@@ -30,5 +28,4 @@ var _default = {
   family: {
     serif: 'source-han-serif-tc, serif'
   }
-};
-exports["default"] = _default;
+};

package/lib/constants/footer.js

@@ -4,12 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.footerKey = exports.MEMBER_ORDER = exports.FOOTER_PATH = exports.FOOTER_ORDER = exports.FOOTER_LABEL = exports.FOOTER_KEY = exports.FOOTER_ICON = void 0;
-
 var _FOOTER_PATH, _FOOTER_LABEL, _FOOTER_ICON;
-
-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; }
-
-var footerKey = {
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var footerKey = exports.footerKey = {
   foundation: 'foundation',
   aboutUs: 'about-us',
   influenceReport: 'influence-report',
@@ -20,16 +20,9 @@ var footerKey = {
   history: 'history',
   publicationAndMerchandise: 'publication-and-merchandise'
 };
-exports.footerKey = footerKey;
-var FOOTER_KEY = Object.freeze(footerKey);
-exports.FOOTER_KEY = FOOTER_KEY;
-var FOOTER_PATH = (_FOOTER_PATH = {}, _defineProperty(_FOOTER_PATH, footerKey.foundation, '/categories/foundation'), _defineProperty(_FOOTER_PATH, footerKey.aboutUs, '/about-us'), _defineProperty(_FOOTER_PATH, footerKey.influenceReport, '/a/impact-and-annual-report'), _defineProperty(_FOOTER_PATH, footerKey.member, '/account'), _defineProperty(_FOOTER_PATH, footerKey.myReading, '/myreading'), _defineProperty(_FOOTER_PATH, footerKey.bookmark, '/myreading/saved'), _defineProperty(_FOOTER_PATH, footerKey.history, '/myreading/history'), _FOOTER_PATH);
-exports.FOOTER_PATH = FOOTER_PATH;
-var FOOTER_LABEL = (_FOOTER_LABEL = {}, _defineProperty(_FOOTER_LABEL, footerKey.foundation, '基金會消息'), _defineProperty(_FOOTER_LABEL, footerKey.aboutUs, '關於我們'), _defineProperty(_FOOTER_LABEL, footerKey.influenceReport, '影響力報告'), _defineProperty(_FOOTER_LABEL, footerKey.openLab, '報導者開放實驗室'), _defineProperty(_FOOTER_LABEL, footerKey.member, '個人專區'), _defineProperty(_FOOTER_LABEL, footerKey.myReading, '我的閱讀'), _defineProperty(_FOOTER_LABEL, footerKey.bookmark, '已收藏'), _defineProperty(_FOOTER_LABEL, footerKey.history, '造訪紀錄'), _defineProperty(_FOOTER_LABEL, footerKey.publicationAndMerchandise, '出版品與周邊'), _FOOTER_LABEL);
-exports.FOOTER_LABEL = FOOTER_LABEL;
-var FOOTER_ICON = (_FOOTER_ICON = {}, _defineProperty(_FOOTER_ICON, footerKey.member, 'member'), _defineProperty(_FOOTER_ICON, footerKey.myReading, 'kid_star'), _defineProperty(_FOOTER_ICON, footerKey.bookmark, 'bookmark_basic'), _defineProperty(_FOOTER_ICON, footerKey.history, 'history'), _FOOTER_ICON);
-exports.FOOTER_ICON = FOOTER_ICON;
-var FOOTER_ORDER = [footerKey.foundation, footerKey.aboutUs, footerKey.influenceReport, footerKey.openLab, footerKey.publicationAndMerchandise];
-exports.FOOTER_ORDER = FOOTER_ORDER;
-var MEMBER_ORDER = [footerKey.member, footerKey.myReading, footerKey.bookmark, footerKey.history];
-exports.MEMBER_ORDER = MEMBER_ORDER;
+var FOOTER_KEY = exports.FOOTER_KEY = Object.freeze(footerKey);
+var FOOTER_PATH = exports.FOOTER_PATH = (_FOOTER_PATH = {}, _defineProperty(_FOOTER_PATH, footerKey.foundation, '/categories/foundation'), _defineProperty(_FOOTER_PATH, footerKey.aboutUs, '/about-us'), _defineProperty(_FOOTER_PATH, footerKey.influenceReport, '/a/impact-and-annual-report'), _defineProperty(_FOOTER_PATH, footerKey.member, '/account'), _defineProperty(_FOOTER_PATH, footerKey.myReading, '/myreading'), _defineProperty(_FOOTER_PATH, footerKey.bookmark, '/myreading/saved'), _defineProperty(_FOOTER_PATH, footerKey.history, '/myreading/history'), _FOOTER_PATH);
+var FOOTER_LABEL = exports.FOOTER_LABEL = (_FOOTER_LABEL = {}, _defineProperty(_FOOTER_LABEL, footerKey.foundation, '基金會消息'), _defineProperty(_FOOTER_LABEL, footerKey.aboutUs, '關於我們'), _defineProperty(_FOOTER_LABEL, footerKey.influenceReport, '影響力報告'), _defineProperty(_FOOTER_LABEL, footerKey.openLab, '報導者開放實驗室'), _defineProperty(_FOOTER_LABEL, footerKey.member, '個人專區'), _defineProperty(_FOOTER_LABEL, footerKey.myReading, '我的閱讀'), _defineProperty(_FOOTER_LABEL, footerKey.bookmark, '已收藏'), _defineProperty(_FOOTER_LABEL, footerKey.history, '造訪紀錄'), _defineProperty(_FOOTER_LABEL, footerKey.publicationAndMerchandise, '出版品與周邊'), _FOOTER_LABEL);
+var FOOTER_ICON = exports.FOOTER_ICON = (_FOOTER_ICON = {}, _defineProperty(_FOOTER_ICON, footerKey.member, 'member'), _defineProperty(_FOOTER_ICON, footerKey.myReading, 'kid_star'), _defineProperty(_FOOTER_ICON, footerKey.bookmark, 'bookmark_basic'), _defineProperty(_FOOTER_ICON, footerKey.history, 'history'), _FOOTER_ICON);
+var FOOTER_ORDER = exports.FOOTER_ORDER = [footerKey.foundation, footerKey.aboutUs, footerKey.influenceReport, footerKey.openLab, footerKey.publicationAndMerchandise];
+var MEMBER_ORDER = exports.MEMBER_ORDER = [footerKey.member, footerKey.myReading, footerKey.bookmark, footerKey.history];

package/lib/constants/hamburger-menu.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.MENU_WIDTH = void 0;
-var MENU_WIDTH = {
+var MENU_WIDTH = exports.MENU_WIDTH = {
   hd: '280px',
   desktop: '280px',
   tablet: '320px',
   mobile: '100vw'
-};
-exports.MENU_WIDTH = MENU_WIDTH;
+};

package/lib/constants/prop-types.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.LINK_PROP = exports.HAMBURGER_CONTEXT_PROP = exports.CONTEXT_PROP = void 0;
-
 var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _releaseBranch = require("@twreporter/core/lib/constants/release-branch");
-
 var _theme = require("@twreporter/core/lib/constants/theme");
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 // @twreporter
+
 var contextPropTypes = {
   theme: _theme.THEME_PROP_TYPES,
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
@@ -44,17 +40,14 @@ var hamburgerContextDefaultProps = {
   closeHamburgerMenu: function closeHamburgerMenu() {},
   isHamburgerMenuOpen: false
 };
-var CONTEXT_PROP = {
+var CONTEXT_PROP = exports.CONTEXT_PROP = {
   propTypes: contextPropTypes,
   defaultProps: contextDefaultProps
 };
-exports.CONTEXT_PROP = CONTEXT_PROP;
-var HAMBURGER_CONTEXT_PROP = {
+var HAMBURGER_CONTEXT_PROP = exports.HAMBURGER_CONTEXT_PROP = {
   propTypes: hamburgerContextPropTypes,
   defaultProps: hamburgerContextDefaultProps
 };
-exports.HAMBURGER_CONTEXT_PROP = HAMBURGER_CONTEXT_PROP;
-var LINK_PROP = {
+var LINK_PROP = exports.LINK_PROP = {
   propTypes: linkPropTypes
-};
-exports.LINK_PROP = LINK_PROP;
+};

package/lib/constants/slogan.js

@@ -5,5 +5,4 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 var slogan = '深度 × 開放 × 非營利';
-var _default = slogan;
-exports["default"] = _default;
+var _default = exports["default"] = slogan;

package/lib/constants/social-media.js

@@ -10,7 +10,5 @@ var socialMediaKey = {
   twitter: 'twitter',
   youtube: 'youtube'
 };
-var SOCIAL_MEDIA_KEY = socialMediaKey;
-exports.SOCIAL_MEDIA_KEY = SOCIAL_MEDIA_KEY;
-var SOCIAL_MEDIA_ORDER = [socialMediaKey.facebook, socialMediaKey.instagram, socialMediaKey.twitter, socialMediaKey.youtube];
-exports.SOCIAL_MEDIA_ORDER = SOCIAL_MEDIA_ORDER;
+var SOCIAL_MEDIA_KEY = exports.SOCIAL_MEDIA_KEY = socialMediaKey;
+var SOCIAL_MEDIA_ORDER = exports.SOCIAL_MEDIA_ORDER = [socialMediaKey.facebook, socialMediaKey.instagram, socialMediaKey.twitter, socialMediaKey.youtube];

package/lib/constants/theme.js

@@ -4,10 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-var _default = {
+var _default = exports["default"] = {
   transparent: 'transparent',
   normal: 'normal',
   photography: 'photography',
   index: 'index'
-};
-exports["default"] = _default;
+};

package/lib/containers/header.js

@@ -1,227 +1,135 @@
 "use strict";
 
-function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
-
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
-var _react = _interopRequireDefault(require("react"));
-
+var _react = _interopRequireWildcard(require("react"));
 var _reactRedux = require("react-redux");
-
 var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
-
 var _propTypes = require("../constants/prop-types");
-
 var _header = _interopRequireDefault(require("../components/header"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
-
-function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
-
-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); } }
-
-function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
-
-function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
-
-function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
-
-function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
-
-function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
-
-function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
-
-function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
-
-function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
-
-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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+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(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; } // constant
+// Header
+// lodash
 var _ = {
   get: _get["default"]
 };
 var HIDE_HEADER_THRESHOLD = 8;
 var TRANSFORM_HEADER_THRESHOLD = 40;
 var TRANSFORM_TIMEOUT = 800;
-
-var Container = /*#__PURE__*/function (_React$PureComponent) {
-  _inherits(Container, _React$PureComponent);
-
-  var _super = _createSuper(Container);
-
-  function Container(props) {
-    var _this;
-
-    _classCallCheck(this, Container);
-
-    _this = _super.call(this, props);
-    _this.state = {
-      toUseNarrow: false,
-      hideHeader: false
-    };
-    _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;
-    _this.isTransforming = false;
-    _this.transformTimer = null;
-    return _this;
-  }
-
-  _createClass(Container, [{
-    key: "componentDidMount",
-    value: function componentDidMount() {
-      window.addEventListener('scroll', this.handleScroll, {
-        passive: true
+var Container = function Container(_ref) {
+  var releaseBranch = _ref.releaseBranch,
+    isLinkExternal = _ref.isLinkExternal,
+    theme = _ref.theme,
+    pathname = _ref.pathname,
+    referrerPath = _ref.referrerPath,
+    hamburgerContext = _ref.hamburgerContext;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    toUseNarrow = _useState2[0],
+    setToUseNarrow = _useState2[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    hideHeader = _useState4[0],
+    setHideHeader = _useState4[1];
+  var isAuthed = (0, _reactRedux.useSelector)(function (state) {
+    return _.get(state, 'auth.isAuthed', false);
+  });
+  var lastKnownPageYOffset = (0, _react.useRef)(0);
+  var ticking = (0, _react.useRef)(false);
+  var currentY = (0, _react.useRef)(0);
+  var readyY = (0, _react.useRef)(0);
+  var isTransforming = (0, _react.useRef)(false);
+  var transformTimer = (0, _react.useRef)(null);
+  var handleScroll = (0, _react.useCallback)(function () {
+    lastKnownPageYOffset.current = window.pageYOffset;
+    if (!ticking.current) {
+      window.requestAnimationFrame(function () {
+        updateScrollState(lastKnownPageYOffset.current);
+        ticking.current = false;
       });
+      ticking.current = true;
     }
-  }, {
-    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;
+  }, []);
+  var updateScrollState = (0, _react.useCallback)(function (currentScrollTop) {
+    var scrollDirection = currentScrollTop > currentY.current ? 'down' : 'up';
+    currentY.current = currentScrollTop;
+    var updateState = getScrollState(currentScrollTop, scrollDirection);
+    setToUseNarrow(updateState.toUseNarrow);
+    setHideHeader(updateState.hideHeader);
+  }, []);
+  var getScrollState = (0, _react.useCallback)(function (scrollTop, scrollDirection) {
+    var isCurrentNarrow = toUseNarrow;
+    var nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
+    var scrollState = {};
+    if (isTransforming.current) {
+      return scrollState;
     }
-    /**
-     * 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() {
-      var _this2 = this;
-
-      this.lastKnownPageYOffset = window.pageYOffset;
-
-      if (!this.ticking) {
-        window.requestAnimationFrame(function () {
-          _this2.__updateScrollState(_this2.lastKnownPageYOffset);
-
-          _this2.ticking = false;
-        });
-        this.ticking = true;
+    if (scrollDirection === 'up') {
+      readyY.current = scrollTop;
+      scrollState.hideHeader = false;
+    }
+    if (scrollDirection === 'down') {
+      if (isCurrentNarrow && scrollTop - readyY.current > HIDE_HEADER_THRESHOLD) {
+        scrollState.hideHeader = true;
       }
     }
-  }, {
-    key: "__updateScrollState",
-    value: function __updateScrollState(currentScrollTop) {
-      var scrollDirection = currentScrollTop > this.currentY ? 'down' : 'up';
-      this.currentY = currentScrollTop;
-
-      var updateState = this.__getScrollState(currentScrollTop, scrollDirection);
-
-      this.setState(updateState);
+    if (isCurrentNarrow) {
+      scrollState.toUseNarrow = scrollDirection === 'down' ? true : nextToUseNarrow;
+    } else {
+      scrollState.toUseNarrow = scrollDirection === 'up' ? false : nextToUseNarrow;
     }
-  }, {
-    key: "__getScrollState",
-    value: function __getScrollState(scrollTop, scrollDirection) {
-      var _this3 = this;
-
-      var isCurrentNarrow = this.state.toUseNarrow;
-      var nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
-      var scrollState = {};
-
-      if (this.isTransforming) {
-        return scrollState;
-      }
-
-      if (scrollDirection === 'up') {
-        this.readyY = scrollTop;
-        scrollState.hideHeader = false;
+    if (isCurrentNarrow !== scrollState.toUseNarrow) {
+      if (!transformTimer.current) {
+        isTransforming.current = true;
+        transformTimer.current = setTimeout(function () {
+          isTransforming.current = false;
+          readyY.current = currentY.current;
+          transformTimer.current = null;
+        }, TRANSFORM_TIMEOUT);
       }
-
-      if (scrollDirection === 'down') {
-        // after transforming to narrow header, header should hide when scroll down
-        if (isCurrentNarrow && scrollTop - this.readyY > HIDE_HEADER_THRESHOLD) {
-          scrollState.hideHeader = true;
-        }
-      }
-
-      if (isCurrentNarrow) {
-        // after transforming to narrow header, always remain narrow when scroll down
-        scrollState.toUseNarrow = scrollDirection === 'down' ? true : nextToUseNarrow;
-      } else {
-        // after transfroming to wide header, always remain wide when scroll up
-        scrollState.toUseNarrow = scrollDirection === 'up' ? false : nextToUseNarrow;
-      } // register transform timer to mark header transform status
-
-
-      if (isCurrentNarrow !== scrollState.toUseNarrow) {
-        if (!this.transformTimer) {
-          this.isTransforming = true;
-          this.transformTimer = setTimeout(function () {
-            _this3.isTransforming = false;
-            _this3.readyY = _this3.currentY;
-            _this3.transformTimer = null;
-          }, TRANSFORM_TIMEOUT);
-        }
-      }
-
-      return scrollState;
-    }
-  }, {
-    key: "render",
-    value: function render() {
-      var _this$props = this.props,
-          releaseBranch = _this$props.releaseBranch,
-          isAuthed = _this$props.isAuthed,
-          isLinkExternal = _this$props.isLinkExternal,
-          theme = _this$props.theme,
-          pathname = _this$props.pathname,
-          referrerPath = _this$props.referrerPath,
-          hamburgerContext = _this$props.hamburgerContext;
-      var _this$state = this.state,
-          toUseNarrow = _this$state.toUseNarrow,
-          hideHeader = _this$state.hideHeader;
-      var contextValue = {
-        releaseBranch: releaseBranch,
-        isAuthed: isAuthed,
-        isLinkExternal: isLinkExternal,
-        theme: theme,
-        pathname: pathname,
-        referrerPath: referrerPath,
-        toUseNarrow: toUseNarrow,
-        hideHeader: hideHeader
-      };
-      return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
-        value: contextValue
-      }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
-        hamburgerContext: hamburgerContext
-      }));
     }
-  }]);
-
-  return Container;
-}(_react["default"].PureComponent);
-
-_defineProperty(Container, "defaultProps", _objectSpread({}, _propTypes.CONTEXT_PROP.defaultProps));
-
-_defineProperty(Container, "propTypes", _objectSpread({}, _propTypes.CONTEXT_PROP.propTypes));
-
-function mapStateToProps(state) {
-  return {
-    isAuthed: _.get(state, 'auth.isAuthed', false)
+    return scrollState;
+  }, [toUseNarrow]);
+  (0, _react.useEffect)(function () {
+    window.addEventListener('scroll', handleScroll, {
+      passive: true
+    });
+    return function () {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [handleScroll]);
+  var contextValue = {
+    releaseBranch: releaseBranch,
+    isAuthed: isAuthed,
+    isLinkExternal: isLinkExternal,
+    theme: theme,
+    pathname: pathname,
+    referrerPath: referrerPath,
+    toUseNarrow: toUseNarrow,
+    hideHeader: hideHeader
   };
-}
-
-var _default = (0, _reactRedux.connect)(mapStateToProps)(Container);
-
-exports["default"] = _default;
+  return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Provider, {
+    value: contextValue
+  }, /*#__PURE__*/_react["default"].createElement(_header["default"], {
+    hamburgerContext: hamburgerContext
+  }));
+};
+Container.propTypes = _objectSpread({}, _propTypes.CONTEXT_PROP.propTypes);
+var _default = exports["default"] = Container;

package/lib/contexts/header-context.js

@@ -4,13 +4,8 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.HamburgerContext = void 0;
-
 var _react = require("react");
-
 var _propTypes = require("../constants/prop-types");
-
 var HeaderContext = /*#__PURE__*/(0, _react.createContext)(_propTypes.CONTEXT_PROP);
-var HamburgerContext = /*#__PURE__*/(0, _react.createContext)(_propTypes.HAMBURGER_CONTEXT_PROP);
-exports.HamburgerContext = HamburgerContext;
-var _default = HeaderContext;
-exports["default"] = _default;
+var HamburgerContext = exports.HamburgerContext = /*#__PURE__*/(0, _react.createContext)(_propTypes.HAMBURGER_CONTEXT_PROP);
+var _default = exports["default"] = HeaderContext;

package/lib/index.js

@@ -4,17 +4,11 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = exports.Header = void 0;
-
 var _standaloneHeader = _interopRequireDefault(require("./standalone-header"));
-
 var _header = _interopRequireDefault(require("./containers/header"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
-var Header = _header["default"];
-exports.Header = Header;
-var _default = {
+var Header = exports.Header = _header["default"];
+var _default = exports["default"] = {
   Header: Header,
   StandaloneHeader: _standaloneHeader["default"]
-};
-exports["default"] = _default;
+};

package/lib/reducers/auth.js

@@ -4,16 +4,12 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = auth;
-
 var _actionTypes = _interopRequireDefault(require("../constants/action-types"));
-
 var _jwt = _interopRequireDefault(require("../utils/jwt"));
-
 var _get = _interopRequireDefault(require("lodash/get"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 // lodash
+
 var _ = {
   get: _get["default"]
 };
@@ -25,6 +21,7 @@ var initState = {
   isRequesting: false,
   userInfo: null
 };
+
 /**
  *  @param {Object} state - redux state
  *  @param {bool} state.isRequesting - requst is in progress
@@ -43,18 +40,15 @@ var initState = {
  *  @param {Object} action.payload.options - request options
  *  @param {string} action.payload.message - error message
  */
-
 function auth() {
   var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initState;
   var action = arguments.length > 1 ? arguments[1] : undefined;
-
   switch (action.type) {
     case _actionTypes["default"].AUTH_CLEAR:
       {
         // return empty state
         return initState;
       }
-
     case _actionTypes["default"].REQUEST_AUTH:
       {
         return {
@@ -68,7 +62,6 @@ function auth() {
           userInfo: initState.userInfo
         };
       }
-
     case _actionTypes["default"].AUTH_FAILURE:
       {
         return {
@@ -82,13 +75,10 @@ function auth() {
           userInfo: initState.userInfo
         };
       }
-
     case _actionTypes["default"].AUTH_SUCCESS:
       {
         var jwt = _.get(action, 'payload.data.jwt', '');
-
         var userInfo = _jwt["default"].decodePayload(jwt);
-
         return {
           accessToken: jwt,
           lastAction: {
@@ -100,7 +90,6 @@ function auth() {
           userInfo: userInfo
         };
       }
-
     default:
       {
         return state;

package/lib/reducers/index.js

@@ -4,13 +4,9 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
-
 var _redux = require("redux");
-
 var _auth = _interopRequireDefault(require("./auth"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
-
 var rootReducer = (0, _redux.combineReducers)({
   origins: function origins() {
     var state = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
@@ -18,5 +14,4 @@ var rootReducer = (0, _redux.combineReducers)({
   },
   auth: _auth["default"]
 });
-var _default = rootReducer;
-exports["default"] = _default;
+var _default = exports["default"] = rootReducer;