@twreporter/universal-header 2.2.0-rc.7 → 2.2.0-rc.8

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.2.0-rc.8](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.7...@twreporter/universal-header@2.2.0-rc.8) (2021-10-05)
+
+
+### Bug Fixes
+
+* fix ui defect ([2ab85e2](https://github.com/twreporter/twreporter-npm-packages/commit/2ab85e2eabd9ae33b857353712358777b50a9f9a))
+* **universal-header:** fix ui defect ([c1be79f](https://github.com/twreporter/twreporter-npm-packages/commit/c1be79f6ab811b0c44d9a8753230f73486be57cc))
+
+
+
+
+
 # [2.2.0-rc.7](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.2.0-rc.6...@twreporter/universal-header@2.2.0-rc.7) (2021-09-29)
 
 

package/lib/components/action-button.js

@@ -105,7 +105,7 @@ var ActionsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "action-button__ActionContainer",
   componentId: "sc-4wc24t-1"
-})(["transition:opacity 0.3s;transition-delay:400ms;opacity:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
+})(["transition:opacity 0.1s;transition-delay:300ms;opacity:", ";margin:", ";width:100%;&:first-child{margin-top:0;margin-left:0;}a,a:link,a:visited{color:", ";font-size:", ";font-weight:", ";", " ", "}"], function (props) {
   return props.isActive ? 1 : 0;
 }, function (props) {
   return (0, _css.arrayToCssShorthand)(styles.itemMargin[props.direction]);

package/lib/components/channels.js

@@ -112,19 +112,17 @@ var styles = {
     column: 'relative'
   },
   dropdownTop: {
-    row: 35,
-    // px
-    column: 0 // px
-
+    row: "calc(100% + 1px)",
+    column: 0
   }
 };
 var dropDownMenuEffectCSS = /*#__PURE__*/(0, _styledComponents.css)([".effect-enter{max-height:0;}.effect-enter-active{max-height:400px;transition:max-height 400ms ease-in 100ms;}"]);
-var linkUnderline = /*#__PURE__*/(0, _styledComponents.css)(["animation:", " 0.5s linear;position:absolute;left:0;bottom:-1px;display:block;content:'';width:100%;height:4px;background-color:#A67A44;"], _animations["default"].changeOpacity('0', '1'));
+var linkUnderline = /*#__PURE__*/(0, _styledComponents.css)(["animation:", " 0.5s linear;position:absolute;left:0;bottom:-1px;display:block;content:'';width:100%;height:4px;background-color:#a67a44;"], _animations["default"].changeOpacity('0', '1'));
 
 var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__DropDownMenuWrapper",
   componentId: "nu2llv-0"
-})(["position:", ";z-index:999;width:100%;left:0;top:", "px;", ""], function (props) {
+})(["position:", ";z-index:999;width:100%;left:0;top:", ";", ""], function (props) {
   return styles.dropdownPosition[props.direction];
 }, function (props) {
   return styles.dropdownTop[props.direction];
@@ -133,12 +131,12 @@ var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConf
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "channels__Box",
   componentId: "nu2llv-1"
-})(["width:100%;"]);
+})(["width:100%;height:100%;"]);
 
 var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
   displayName: "channels__List",
   componentId: "nu2llv-2"
-})(["justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
+})(["height:100%;justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
   return props.bgColor || _colors["default"].white;
 }, function (props) {
   return props.direction;
@@ -151,7 +149,7 @@ var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
 var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
   displayName: "channels__ListItem",
   componentId: "nu2llv-3"
-})(["display:flex;flex-direction:", ";position:relative;width:", ";font-size:", ";letter-spacing:0.5px;cursor:pointer;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}&::after{", "}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}}"], function (props) {
+})(["display:flex;flex-direction:", ";position:relative;width:", ";height:100%;font-size:", ";letter-spacing:0.5px;cursor:pointer;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}&::after{", "}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}}"], function (props) {
   return props.direction;
 }, function (props) {
   return styles.itemWidth[props.direction];
@@ -198,18 +196,26 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
 
     _this = _super.call(this, props);
     _this.state = {
-      activeDataIndex: _this._checkWhichChannelActive(props.currentPathname)
+      activeDataIndex: _this._checkWhichChannelActive(props.currentPathname),
+      activeDropdownIndex: invalidDataIndex
     };
     _this.handleDropDownChannelClick = _this._handleDropDownChannelClick.bind(_assertThisInitialized(_this));
     _this.handleNormalChannelClick = _this._handleNormalChannelClick.bind(_assertThisInitialized(_this));
     _this.handleDropDownMenuClick = _this._handleDropDownMenuClick.bind(_assertThisInitialized(_this));
-    _this.setActiveData = _this._setActiveData.bind(_assertThisInitialized(_this));
-    _this.resetActiveData = _this._resetActiveDataIndex.bind(_assertThisInitialized(_this));
     _this.callback = _this._callback.bind(_assertThisInitialized(_this));
     return _this;
   }
 
   _createClass(Channels, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      if (this.context.hideHeader) {
+        this.setState({
+          activeDropdownIndex: invalidDataIndex
+        });
+      }
+    }
+  }, {
     key: "_checkWhichChannelActive",
     value: function _checkWhichChannelActive(currentPathname) {
       var data = this.props.data;
@@ -245,33 +251,29 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
     key: "_handleDropDownChannelClick",
     value: function _handleDropDownChannelClick(e, channelIndex) {
       e.preventDefault();
-      this.setActiveData(channelIndex, true);
+      var activeDropdownIndex = this.state.activeDropdownIndex;
+      var nextActiveDropdownIndex = channelIndex === activeDropdownIndex ? invalidDataIndex : channelIndex;
+      this.setState({
+        activeDropdownIndex: nextActiveDropdownIndex
+      });
     }
   }, {
     key: "_handleNormalChannelClick",
     value: function _handleNormalChannelClick(channelIndex) {
-      this.setActiveData(channelIndex, false);
+      this.setState({
+        activeDataIndex: channelIndex,
+        activeDropdownIndex: invalidDataIndex
+      });
       this.callback(channelIndex);
     }
   }, {
     key: "_handleDropDownMenuClick",
-    value: function _handleDropDownMenuClick() {
-      this.resetActiveData(invalidDataIndex);
-      this.callback(invalidDataIndex);
-    }
-  }, {
-    key: "_setActiveData",
-    value: function _setActiveData(dataIndex, clickTwiceInactive) {
-      var activeDataIndex = this.state.activeDataIndex;
-      var nextActiveIndex = clickTwiceInactive && activeDataIndex === dataIndex ? invalidDataIndex : dataIndex;
+    value: function _handleDropDownMenuClick(parentIndex) {
       this.setState({
-        activeDataIndex: nextActiveIndex
+        activeDataIndex: parentIndex,
+        activeDropdownIndex: invalidDataIndex
       });
-    }
-  }, {
-    key: "_resetActiveDataIndex",
-    value: function _resetActiveDataIndex() {
-      this.setActiveData(invalidDataIndex);
+      this.callback(parentIndex);
     }
   }, {
     key: "_callback",
@@ -292,8 +294,8 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
         var _this$props = this.props,
             data = _this$props.data,
             direction = _this$props.direction;
-        var activeDataIndex = this.state.activeDataIndex;
-        var toShowDropdownMenu = activeDataIndex === dataIndex;
+        var activeDropdownIndex = this.state.activeDropdownIndex;
+        var toShowDropdownMenu = activeDropdownIndex === dataIndex;
 
         var dropdownMenuData = _.get(data, [dataIndex, dropDownMenuKey], []);
 
@@ -308,11 +310,12 @@ var Channels = /*#__PURE__*/function (_React$PureComponent) {
           unmountOnExit: true
         }, /*#__PURE__*/_react["default"].createElement(_dropDownMenu["default"], {
           data: dropdownMenuData,
-          onClick: this.handleDropDownMenuClick
+          onClick: function onClick(e) {
+            return _this2.handleDropDownMenuClick(dataIndex);
+          }
         })));
 
-        var isActive = activeDataIndex === dataIndex;
-        var status = isActive ? 'collapse' : 'expand';
+        var status = toShowDropdownMenu ? 'collapse' : 'expand';
 
         var _themeUtils$selectIco = _slicedToArray(_theme["default"].selectIcons(theme)[status], 2),
             StatusIcon = _themeUtils$selectIco[0],
@@ -413,5 +416,7 @@ _defineProperty(Channels, "defaultProps", {
   callback: function callback() {}
 });
 
+_defineProperty(Channels, "contextType", _headerContext["default"]);
+
 var _default = Channels;
 exports["default"] = _default;

package/lib/components/header.js

@@ -33,8 +33,12 @@ var _customizedLink = _interopRequireDefault(require("./customized-link"));
 
 var _slogan = _interopRequireDefault(require("./slogan"));
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _css = require("@twreporter/core/lib/utils/css");
 
+var _templateObject;
+
 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); }
@@ -53,7 +57,9 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
-var CHANNEL_HEIGHT = 37; // px
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
+var CHANNEL_HEIGHT = 36; // px
 
 var styles = {
   headerHeight: {
@@ -75,26 +81,34 @@ var styles = {
     hd: 1320 // px
 
   },
-  channelBottomBorderWidth: [1, 0, 1, 0] // px
+  channelTopBorderWidth: [0, 1, 1, 0],
+  // px
+  channelBottomBorderWidth: [1, 0, 1, 0],
+  // px
+  iconBorderWidth: {
+    wide: [0, 0, 0, 0],
+    // px
+    narrow: [0, 0, 1, 0] // px
 
+  }
 };
 
 var headerWide = _animations["default"].changeHeight("".concat(styles.headerHeight.narrow, "px"), "".concat(styles.headerHeight.wide, "px"));
 
 var headerNarrow = _animations["default"].changeHeight("".concat(styles.headerHeight.wide, "px"), "".concat(styles.headerHeight.narrow, "px"));
 
-var HeaderEffect = /*#__PURE__*/(0, _styledComponents.css)([".header-effect-enter{height:", "px;}.header-effect-enter-active{animation:", " 0.3s linear;animation-delay:400ms;}.header-effect-exit-active{animation:", " 0.3s linear;animation-delay:400ms;}.header-effect-exit-done{height:", "px;}"], styles.headerHeight.narrow, headerWide, headerNarrow, styles.headerHeight.narrow);
-var ActionEffect = /*#__PURE__*/(0, _styledComponents.css)([".action-effect-enter{transform:translateX(-40px);}.action-effect-enter-active{animation:", " 0.3s;animation-delay:400ms;}.action-effect-exit-active{animation:", " 0.3s;animation-delay:400ms;}.action-effect-exit-done{transform:translateX(-40px);}"], _animations["default"].changeTranslateX('-40px', 0), _animations["default"].changeTranslateX(0, '-40px'));
-var SloganEffect = /*#__PURE__*/(0, _styledComponents.css)([".slogan-effect-enter{opacity:0;}.slogagn-effect-enter-active{animation:", " 0.3s;animation-delay:400ms;}.slogan-effect-exit-active{animation:", " 0.3s;animation-delay:400ms;}.slogan-effect-exit-done{opacity:0;}"], _animations["default"].changeOpacity('0', '1'), _animations["default"].changeOpacity('1', '0'));
+var HeaderEffect = /*#__PURE__*/(0, _styledComponents.css)([".header-effect-enter{height:", "px;}.header-effect-enter-active{animation:", " 0.2s linear;animation-delay:300ms;}.header-effect-exit-active{animation:", " 0.2s linear;animation-delay:300ms;}.header-effect-exit-done{height:", "px;}"], styles.headerHeight.narrow, headerWide, headerNarrow, styles.headerHeight.narrow);
+var ActionEffect = /*#__PURE__*/(0, _styledComponents.css)([".action-effect-enter{transform:translateX(-40px);}.action-effect-enter-active{animation:", " 0.2s;animation-delay:300ms;}.action-effect-exit-active{animation:", " 0.2s;animation-delay:300ms;}.action-effect-exit-done{transform:translateX(-40px);}"], _animations["default"].changeTranslateX('-40px', 0), _animations["default"].changeTranslateX(0, '-40px'));
+var SloganEffect = /*#__PURE__*/(0, _styledComponents.css)([".slogan-effect-enter{opacity:0;}.slogagn-effect-enter-active{animation:", " 0.2s;animation-delay:300ms;}.slogan-effect-exit-active{animation:", " 0.2s;animation-delay:300ms;}.slogan-effect-exit-done{opacity:0;}"], _animations["default"].changeOpacity('0', '1'), _animations["default"].changeOpacity('1', '0'));
 var channelSlideIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(", "px);opacity:0;}to{transform:translateY(0);opacity:1;}"], -CHANNEL_HEIGHT);
 var channelSlideOut = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(0);}to{transform:translateY(", "px);}"], -CHANNEL_HEIGHT);
-var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " 0.2s linear;animation-delay:500ms;}.channel-effect-exit-active{animation:", " 0.2s linear;animation-delay:100ms;}"], channelSlideIn, channelSlideOut);
-var LogoEffect = /*#__PURE__*/(0, _styledComponents.css)([".logo-effect-enter{width:80%;}.logo-effect-enter-active{animation:", " 0.3s linear;animation-delay:400ms;}.logo-effect-exit-active{animation:", " 0.3s linear;animation-delay:400ms;}.logo-effect-exit-done{width:80%;}"], _animations["default"].changeWidth('80%', '100%'), _animations["default"].changeWidth('100%', '80%'));
+var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " 0.2s linear;animation-delay:400ms;}.channel-effect-exit-active{animation:", " 0.1s linear;animation-delay:100ms;}"], channelSlideIn, channelSlideOut);
+var LogoEffect = /*#__PURE__*/(0, _styledComponents.css)([".logo-effect-enter{width:80%;}.logo-effect-enter-active{animation:", " 0.2s linear;animation-delay:300ms;}.logo-effect-exit-active{animation:", " 0.2s linear;animation-delay:300ms;}.logo-effect-exit-done{width:80%;}"], _animations["default"].changeWidth('80%', '100%'), _animations["default"].changeWidth('100%', '80%'));
 
 var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__Box",
   componentId: "sc-1krza7i-0"
-})(["transform:translateY(", ");transition:transform 0.3s linear;background-color:", ";box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;a:link,a:visited,a:hover,a:active{text-decoration:none;}", ""], function (props) {
+})(["transform:translateY( ", " );transition:transform 0.3s linear;background-color:", ";box-sizing:border-box;position:relative;width:100%;display:flex;flex-direction:column;align-items:center;a:link,a:visited,a:hover,a:active{text-decoration:none;}", ""], function (props) {
   return props.isHide ? "".concat(-styles.headerHeight.narrow, "px") : 0;
 }, function (props) {
   return props.bgColor;
@@ -132,10 +146,17 @@ var ActionContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   componentId: "sc-1krza7i-6"
 })(["", " ", ""], FlexItem, ActionEffect);
 
+var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "header__IconContainer",
+  componentId: "sc-1krza7i-7"
+})(["", " height:", "px;margin:0;padding-left:14px;border-color:#e2e2e2;border-style:solid;border-width:", ";transition:border-width 0.1s linear 0.2s;"], FlexItem, styles.headerHeight.narrow, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.iconBorderWidth[props.headerType]);
+});
+
 var ChannelTopContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__ChannelTopContainer",
-  componentId: "sc-1krza7i-7"
-})(["position:absolute;width:calc(100% - 530px);min-width:480px;max-width:910px;right:calc(50% - 540px);", " ", ""], FlexItem, ChannelEffect);
+  componentId: "sc-1krza7i-8"
+})(["position:absolute;width:calc(100% - 530px);min-width:480px;max-width:910px;height:", "px;right:186px;", " ", " ", ""], styles.headerHeight.narrow, FlexItem, ChannelEffect, _mediaQuery["default"].hdOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    right: calc(50% - 540px);\n  "]))));
 
 var Header = function Header(_ref) {
   var pathname = _ref.pathname,
@@ -168,24 +189,24 @@ var Header = function Header(_ref) {
       classNames: "header-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(TopRow, null, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _links["default"].getLogoLink(isLinkExternal, releaseBranch), /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": !toUseNarrow,
       classNames: "logo-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(Logo, null)))), /*#__PURE__*/_react["default"].createElement(ActionContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": !toUseNarrow,
       classNames: "action-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(_actionButton["default"], {
       actions: toUseNarrow ? narrowActions : actions
@@ -194,31 +215,34 @@ var Header = function Header(_ref) {
       classNames: "slogan-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 700
+        enter: 500,
+        exit: 500
       }
     }, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null)))), /*#__PURE__*/_react["default"].createElement(ChannelTopContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": toUseNarrow,
       classNames: "channel-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 300
+        enter: 600,
+        exit: 200
       },
       unmountOnExit: true
     }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
       currentPathname: currentPathname,
       data: channels,
+      borderWidth: styles.channelTopBorderWidth,
       callback: setPathname
-    }))), /*#__PURE__*/_react["default"].createElement(_icons["default"], {
+    }))), /*#__PURE__*/_react["default"].createElement(IconContainer, {
+      headerType: toUseNarrow ? 'narrow' : 'wide'
+    }, /*#__PURE__*/_react["default"].createElement(_icons["default"], {
       services: services
-    }))), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+    })))), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
       "in": !toUseNarrow,
       classNames: "channel-effect",
       timeout: {
         appear: 0,
-        enter: 700,
-        exit: 300
+        enter: 600,
+        exit: 200
       },
       unmountOnExit: true
     }, /*#__PURE__*/_react["default"].createElement(_channels["default"], {

package/lib/components/slogan.js

@@ -32,9 +32,9 @@ var style = {
 var SloganContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "slogan__SloganContainer",
   componentId: "sc-1eoofl8-0"
-})(["color:", ";font-size:", ";font-family:Noto Serif TC;display:flex;align-items:center;"], function (props) {
+})(["color:", ";font-size:", ";font-family:", ";display:flex;align-items:center;"], function (props) {
   return props.color || _colors["default"].grayDark;
-}, style.fontSize.desktop);
+}, style.fontSize.desktop, _fonts["default"].family.serif);
 
 var Slogan = function Slogan(_ref) {
   var themeFunction = _ref.themeFunction;

package/lib/constants/fonts.js

@@ -27,6 +27,9 @@ var _default = {
     normal: '300',
     medium: '500',
     bold: '700'
+  },
+  family: {
+    serif: 'source-han-serif-tc,serif'
   }
 };
 exports["default"] = _default;

package/lib/containers/header.js

@@ -91,9 +91,9 @@ var _ = {
   throttle: _throttle["default"]
 };
 var HIDE_HEADER_THRESHOLD = 46;
-var TRANSFORM_HEADER_THRESHOLD = 20;
+var TRANSFORM_HEADER_THRESHOLD = 40;
 var TRANSFORM_TIMEOUT = 800;
-var stickyTop = /*#__PURE__*/(0, _styledComponents.css)(["position:sticky;top:0;z-index:999;"]);
+var stickyTop = /*#__PURE__*/(0, _styledComponents.css)(["position:sticky;top:0;z-index:1000;"]);
 
 var MobileOnly = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__MobileOnly",
@@ -168,14 +168,13 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
       var _this2 = this;
 
       var isCurrentNarrow = this.state.toUseNarrow;
+      var nextToUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
       var scrollState = {};
 
       if (this.isTransforming) {
         return scrollState;
       }
 
-      scrollState.toUseNarrow = scrollTop > TRANSFORM_HEADER_THRESHOLD;
-
       if (scrollDirection === 'up') {
         this.readyY = scrollTop;
         scrollState.hideHeader = false;
@@ -186,6 +185,14 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
         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
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.2.0-rc.7",
+  "version": "2.2.0-rc.8",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -19,7 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@twreporter/core": "^1.2.1",
-    "@twreporter/react-components": "8.5.0-rc.0",
+    "@twreporter/react-components": "^8.5.0-rc.1",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -34,5 +34,5 @@
   "files": [
     "lib"
   ],
-  "gitHead": "f3fdc229621bd493f3d04013258b9f0e4f42893a"
+  "gitHead": "62a706e2369ff578eecd86c24aa5549516227c22"
 }