@twreporter/universal-header 2.4.1 → 2.4.2-rc.2

package/CHANGELOG.md

@@ -3,6 +3,36 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.2-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.2-rc.1...@twreporter/universal-header@2.4.2-rc.2) (2023-01-17)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.4.2-rc.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.2-rc.0...@twreporter/universal-header@2.4.2-rc.1) (2023-01-16)
+
+
+### Bug Fixes
+
+* fix defects for mobile/tablet header ([bb3f7e5](https://github.com/twreporter/twreporter-npm-packages/commit/bb3f7e523b3173712d9f308e76d781326a276c64))
+* fix hamburger menu style ([917f603](https://github.com/twreporter/twreporter-npm-packages/commit/917f6037231ab8f13df56b95b2efc6bb5548064a))
+* ios15.1 url bar would hide when scroll hambuger menu ([eba130d](https://github.com/twreporter/twreporter-npm-packages/commit/eba130d0d670462ac25f40f25106a364d65fb160))
+* mobile hamburger cannot scroll to bottom when url bar show ([b85a2fd](https://github.com/twreporter/twreporter-npm-packages/commit/b85a2fd57174528bfc3876d6f934664f03981ffc))
+
+
+
+
+
+## [2.4.2-rc.0](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.1...@twreporter/universal-header@2.4.2-rc.0) (2023-01-12)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
 ## [2.4.1](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.1-rc.7...@twreporter/universal-header@2.4.1) (2023-01-06)
 
 **Note:** Version bump only for package @twreporter/universal-header

package/lib/components/hamburger-footer.js

@@ -37,7 +37,7 @@ var _theme2 = require("@twreporter/core/lib/constants/theme");
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -61,13 +61,13 @@ var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var LinkItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__LinkItem",
   componentId: "i02xyc-1"
-})(["padding:8px 32px;color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}"], function (props) {
+})(["padding:8px 32px;color:", ";", " &:active{color:", ";background-color:", ";}"], function (props) {
   return props.color;
-}, function (props) {
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n    }\n  "])), function (props) {
   return props.hoverColor;
 }, function (props) {
   return props.hoverBgColor;
-}, function (props) {
+}), function (props) {
   return props.activeColor;
 }, function (props) {
   return props.activeBgColor;
@@ -81,7 +81,7 @@ var LinkSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var IconItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__IconItem",
   componentId: "i02xyc-3"
-})(["margin-right:16px;&:last-child{margin-right:0;}", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    svg {\n      height: 32px;\n      width: 32px;\n    }\n  "]))));
+})(["margin-right:16px;&:last-child{margin-right:0;}", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    svg {\n      height: 32px;\n      width: 32px;\n    }\n  "]))));
 
 var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__SocialMediaSection",
@@ -91,7 +91,7 @@ var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfi
 var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__DividerContainer",
   componentId: "i02xyc-5"
-})(["margin:8px 32px 16px 32px;"]);
+})(["margin:16px 32px;"]);
 
 var Footer = function Footer(_ref) {
   var props = _extends({}, _ref);

package/lib/components/hamburger-menu-item.js

@@ -17,6 +17,8 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _theme = require("../utils/theme");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
 
 var _icon = require("@twreporter/react-components/lib/icon");
@@ -27,6 +29,8 @@ var _excluded = ["text", "link"],
     _excluded2 = ["text", "link"],
     _excluded3 = ["text", "isActive"];
 
+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); }
@@ -39,6 +43,8 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
   displayName: "hamburger-menu-item__StyledP1",
   componentId: "t1lhbb-0"
@@ -51,15 +57,15 @@ var StyledP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).wit
 var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu-item__ItemContainer",
   componentId: "t1lhbb-2"
-})(["", "{padding:8px 32px;}cursor:pointer;color:", ";a,a:visited,a:link{text-decoration:none;color:", ";}svg{background-color:", ";}&:hover{background-color:", ";}&:active{background-color:", ";}"], StyledP1, function (props) {
+})(["", "{padding:8px 32px;}cursor:pointer;color:", ";a,a:visited,a:link{text-decoration:none;color:", ";}svg{background-color:", ";}", " &:active{background-color:", ";}"], StyledP1, function (props) {
   return props.color;
 }, function (props) {
   return props.color;
 }, function (props) {
   return props.color;
-}, function (props) {
+}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      background-color: ", ";\n    }\n  "])), function (props) {
   return props.hoverBgColor;
-}, function (props) {
+}), function (props) {
   return props.activeBgColor;
 });
 

package/lib/components/hamburger-menu.js

@@ -79,14 +79,20 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 var _ = {
   map: _map["default"]
-};
+}; // global var
+
+var reserveHeightForIos15 = 48;
 
 var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__MenuContainer",
   componentId: "sc-15rzowt-0"
-})(["width:", ";max-height:100vh;overflow-y:scroll;overscroll-behavior:none;background-color:", ";-webkit-overflow-scrolling:touch;", " ", " &::-webkit-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
+})(["width:", ";height:100vh;max-height:100vh;overflow-y:scroll;overscroll-behavior:contain;background-color:", ";-webkit-overflow-scrolling:touch;", " ", " &::-webkit-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
   return props.bgColor;
-}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.tablet), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", ";\n    padding-bottom: 48px;\n  "])), _hamburgerMenu.MENU_WIDTH.mobile), function (props) {
+}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.tablet), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    width: ", ";\n    height: ", ";\n    max-height: ", ";\n    padding-bottom: ", "px;\n  "])), _hamburgerMenu.MENU_WIDTH.mobile, function (props) {
+  return props.mobileHeight;
+}, function (props) {
+  return props.mobileHeight;
+}, reserveHeightForIos15 + 48), function (props) {
   return props.scrollBarColor;
 });
 
@@ -103,7 +109,7 @@ var LogoSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var SearchSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__SearchSection",
   componentId: "sc-15rzowt-3"
-})(["display:flex;justify-content:center;align-items:center;padding:16px 32px 0 32px;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 24px 32px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
+})(["display:flex;justify-content:center;align-items:center;padding:24px 32px 0 32px;", " ", ""], _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n    padding: 24px 32px 8px 32px;\n  "]))), _mediaQuery["default"].desktopAndAbove(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n    display: none;\n  "]))));
 
 var ContentSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__ContentSection",
@@ -314,6 +320,11 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
   var _useContext6 = (0, _react.useContext)(_headerContext.HamburgerContext),
       closeHamburgerMenu = _useContext6.closeHamburgerMenu;
 
+  var _useState3 = (0, _react.useState)('100vh'),
+      _useState4 = _slicedToArray(_useState3, 2),
+      mobileHeight = _useState4[0],
+      setMobileHeight = _useState4[1];
+
   var menuTheme = theme === _theme2.THEME.photography ? theme : _theme2.THEME.noraml;
 
   var _selectHamburgerMenuT = (0, _theme.selectHamburgerMenuTheme)(menuTheme),
@@ -336,9 +347,13 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
     window.location = "".concat((0, _links.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
   };
 
+  (0, _react.useEffect)(function () {
+    setMobileHeight("".concat(window.innerHeight + reserveHeightForIos15, "px"));
+  }, []);
   return /*#__PURE__*/_react["default"].createElement(MenuContainer, _extends({
     bgColor: bgColor,
-    scrollBarColor: scrollBarColor
+    scrollBarColor: scrollBarColor,
+    mobileHeight: mobileHeight
   }, props), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(CloseSection, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
     iconComponent: CloseIcon,
     theme: menuTheme,

package/lib/components/header.js

@@ -51,7 +51,7 @@ var _rwd = require("@twreporter/react-components/lib/rwd");
 
 var _split = _interopRequireDefault(require("lodash/split"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -86,7 +86,8 @@ var animation = {
   step3Duration: '200ms'
 };
 var zIndex = {
-  tabBar: 10,
+  tabBarMobile: 10,
+  tabBarTablet: 3,
   hamburger: 4,
   header: 3,
   topRow: 2,
@@ -199,7 +200,7 @@ var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
 var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__TabBarContainer",
   componentId: "sc-1krza7i-12"
-})(["z-index:", ";position:fixed;bottom:0;left:0;width:100%;"], zIndex.tabBar);
+})(["position:fixed;bottom:0;left:0;width:100%;", " ", ""], _mediaQuery["default"].tabletOnly(_templateObject10 || (_templateObject10 = _taggedTemplateLiteral(["\n    z-index: ", ";\n  "])), zIndex.tabBarTablet), _mediaQuery["default"].mobileOnly(_templateObject11 || (_templateObject11 = _taggedTemplateLiteral(["\n    z-index: ", ";\n  "])), zIndex.tabBarMobile));
 
 var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HideOnArticle",

package/lib/utils/links.js

@@ -104,8 +104,13 @@ var __composeExternalLink = function __composeExternalLink(link) {
 var checkReferrer = function checkReferrer() {
   var referrer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
   var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
-  var url = new URL(referrer);
-  return url.origin === mainBaseURL[releaseBranch];
+
+  try {
+    var url = new URL(referrer);
+    return url.origin === mainBaseURL[releaseBranch];
+  } catch (err) {
+    return false;
+  }
 };
 
 exports.checkReferrer = checkReferrer;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.4.1",
+  "version": "2.4.2-rc.2",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -20,8 +20,8 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@twreporter/core": "^1.8.1",
-    "@twreporter/react-components": "^8.15.1",
+    "@twreporter/core": "^1.8.2-rc.0",
+    "@twreporter/react-components": "^8.15.2-rc.2",
     "lodash": "^4.17.11",
     "prop-types": "^15.6.2",
     "querystring": "^0.2.0",
@@ -48,5 +48,5 @@
     "@storybook/testing-library": "^0.0.13",
     "babel-loader": "^8.2.5"
   },
-  "gitHead": "6743e0935126f9ed7cabb7be5a9a4dfa6742a3f7"
+  "gitHead": "285af5658b099520a579245ea542ab629b070c12"
 }