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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/CHANGELOG.md +38 -0
  2. package/lib/components/hamburger-footer.js +6 -6
  3. package/lib/components/hamburger-menu-item.js +9 -3
  4. package/lib/components/hamburger-menu.js +20 -5
  5. package/lib/components/header.js +4 -3
  6. package/lib/utils/links.js +7 -2
  7. package/package.json +4 -4
package/CHANGELOG.md CHANGED
@@ -3,6 +3,44 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [2.4.2-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.2-rc.2...@twreporter/universal-header@2.4.2-rc.3) (2023-02-13)
7
+
8
+ **Note:** Version bump only for package @twreporter/universal-header
9
+
10
+
11
+
12
+
13
+
14
+ ## [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)
15
+
16
+ **Note:** Version bump only for package @twreporter/universal-header
17
+
18
+
19
+
20
+
21
+
22
+ ## [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)
23
+
24
+
25
+ ### Bug Fixes
26
+
27
+ * fix defects for mobile/tablet header ([bb3f7e5](https://github.com/twreporter/twreporter-npm-packages/commit/bb3f7e523b3173712d9f308e76d781326a276c64))
28
+ * fix hamburger menu style ([917f603](https://github.com/twreporter/twreporter-npm-packages/commit/917f6037231ab8f13df56b95b2efc6bb5548064a))
29
+ * ios15.1 url bar would hide when scroll hambuger menu ([eba130d](https://github.com/twreporter/twreporter-npm-packages/commit/eba130d0d670462ac25f40f25106a364d65fb160))
30
+ * mobile hamburger cannot scroll to bottom when url bar show ([b85a2fd](https://github.com/twreporter/twreporter-npm-packages/commit/b85a2fd57174528bfc3876d6f934664f03981ffc))
31
+
32
+
33
+
34
+
35
+
36
+ ## [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)
37
+
38
+ **Note:** Version bump only for package @twreporter/universal-header
39
+
40
+
41
+
42
+
43
+
6
44
  ## [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)
7
45
 
8
46
  **Note:** Version bump only for package @twreporter/universal-header
package/lib/components/hamburger-footer.js CHANGED
@@ -37,7 +37,7 @@ var _theme2 = require("@twreporter/core/lib/constants/theme");
37
37
 
38
38
  var _map = _interopRequireDefault(require("lodash/map"));
39
39
 
40
- var _templateObject;
40
+ var _templateObject, _templateObject2;
41
41
 
42
42
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
43
43
 
@@ -61,13 +61,13 @@ var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
61
61
  var LinkItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
62
62
  displayName: "hamburger-footer__LinkItem",
63
63
  componentId: "i02xyc-1"
64
- })(["padding:8px 32px;color:", ";&:hover{color:", ";background-color:", ";}&:active{color:", ";background-color:", ";}"], function (props) {
64
+ })(["padding:8px 32px;color:", ";", " &:active{color:", ";background-color:", ";}"], function (props) {
65
65
  return props.color;
66
- }, function (props) {
66
+ }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &:hover {\n color: ", ";\n background-color: ", ";\n }\n "])), function (props) {
67
67
  return props.hoverColor;
68
68
  }, function (props) {
69
69
  return props.hoverBgColor;
70
- }, function (props) {
70
+ }), function (props) {
71
71
  return props.activeColor;
72
72
  }, function (props) {
73
73
  return props.activeBgColor;
@@ -81,7 +81,7 @@ var LinkSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
81
81
  var IconItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
82
82
  displayName: "hamburger-footer__IconItem",
83
83
  componentId: "i02xyc-3"
84
- })(["margin-right:16px;&:last-child{margin-right:0;}", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n svg {\n height: 32px;\n width: 32px;\n }\n "]))));
84
+ })(["margin-right:16px;&:last-child{margin-right:0;}", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n svg {\n height: 32px;\n width: 32px;\n }\n "]))));
85
85
 
86
86
  var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
87
87
  displayName: "hamburger-footer__SocialMediaSection",
@@ -91,7 +91,7 @@ var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfi
91
91
  var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
92
92
  displayName: "hamburger-footer__DividerContainer",
93
93
  componentId: "i02xyc-5"
94
- })(["margin:8px 32px 16px 32px;"]);
94
+ })(["margin:16px 32px;"]);
95
95
 
96
96
  var Footer = function Footer(_ref) {
97
97
  var props = _extends({}, _ref);
package/lib/components/hamburger-menu-item.js CHANGED
@@ -17,6 +17,8 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
17
17
 
18
18
  var _theme = require("../utils/theme");
19
19
 
20
+ var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
21
+
20
22
  var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
21
23
 
22
24
  var _icon = require("@twreporter/react-components/lib/icon");
@@ -27,6 +29,8 @@ var _excluded = ["text", "link"],
27
29
  _excluded2 = ["text", "link"],
28
30
  _excluded3 = ["text", "isActive"];
29
31
 
32
+ var _templateObject;
33
+
30
34
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
31
35
 
32
36
  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
39
43
 
40
44
  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; }
41
45
 
46
+ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
47
+
42
48
  var StyledP1 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P1).withConfig({
43
49
  displayName: "hamburger-menu-item__StyledP1",
44
50
  componentId: "t1lhbb-0"
@@ -51,15 +57,15 @@ var StyledP2 = /*#__PURE__*/(0, _styledComponents["default"])(_paragraph.P2).wit
51
57
  var ItemContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
52
58
  displayName: "hamburger-menu-item__ItemContainer",
53
59
  componentId: "t1lhbb-2"
54
- })(["", "{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) {
60
+ })(["", "{padding:8px 32px;}cursor:pointer;color:", ";a,a:visited,a:link{text-decoration:none;color:", ";}svg{background-color:", ";}", " &:active{background-color:", ";}"], StyledP1, function (props) {
55
61
  return props.color;
56
62
  }, function (props) {
57
63
  return props.color;
58
64
  }, function (props) {
59
65
  return props.color;
60
- }, function (props) {
66
+ }, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n &:hover {\n background-color: ", ";\n }\n "])), function (props) {
61
67
  return props.hoverBgColor;
62
- }, function (props) {
68
+ }), function (props) {
63
69
  return props.activeBgColor;
64
70
  });
65
71
 
package/lib/components/hamburger-menu.js CHANGED
@@ -79,14 +79,20 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
79
79
 
80
80
  var _ = {
81
81
  map: _map["default"]
82
- };
82
+ }; // global var
83
+
84
+ var reserveHeightForIos15 = 48;
83
85
 
84
86
  var MenuContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
85
87
  displayName: "hamburger-menu__MenuContainer",
86
88
  componentId: "sc-15rzowt-0"
87
- })(["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) {
89
+ })(["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) {
88
90
  return props.bgColor;
89
- }, _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) {
91
+ }, _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) {
92
+ return props.mobileHeight;
93
+ }, function (props) {
94
+ return props.mobileHeight;
95
+ }, reserveHeightForIos15 + 48), function (props) {
90
96
  return props.scrollBarColor;
91
97
  });
92
98
 
@@ -103,7 +109,7 @@ var LogoSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
103
109
  var SearchSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
104
110
  displayName: "hamburger-menu__SearchSection",
105
111
  componentId: "sc-15rzowt-3"
106
- })(["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 "]))));
112
+ })(["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 "]))));
107
113
 
108
114
  var ContentSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
109
115
  displayName: "hamburger-menu__ContentSection",
@@ -314,6 +320,11 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
314
320
  var _useContext6 = (0, _react.useContext)(_headerContext.HamburgerContext),
315
321
  closeHamburgerMenu = _useContext6.closeHamburgerMenu;
316
322
 
323
+ var _useState3 = (0, _react.useState)('100vh'),
324
+ _useState4 = _slicedToArray(_useState3, 2),
325
+ mobileHeight = _useState4[0],
326
+ setMobileHeight = _useState4[1];
327
+
317
328
  var menuTheme = theme === _theme2.THEME.photography ? theme : _theme2.THEME.noraml;
318
329
 
319
330
  var _selectHamburgerMenuT = (0, _theme.selectHamburgerMenuTheme)(menuTheme),
@@ -336,9 +347,13 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
336
347
  window.location = "".concat((0, _links.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
337
348
  };
338
349
 
350
+ (0, _react.useEffect)(function () {
351
+ setMobileHeight("".concat(window.innerHeight + reserveHeightForIos15, "px"));
352
+ }, []);
339
353
  return /*#__PURE__*/_react["default"].createElement(MenuContainer, _extends({
340
354
  bgColor: bgColor,
341
- scrollBarColor: scrollBarColor
355
+ scrollBarColor: scrollBarColor,
356
+ mobileHeight: mobileHeight
342
357
  }, props), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(CloseSection, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
343
358
  iconComponent: CloseIcon,
344
359
  theme: menuTheme,
package/lib/components/header.js CHANGED
@@ -51,7 +51,7 @@ var _rwd = require("@twreporter/react-components/lib/rwd");
51
51
 
52
52
  var _split = _interopRequireDefault(require("lodash/split"));
53
53
 
54
- var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
54
+ var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11;
55
55
 
56
56
  function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
57
57
 
@@ -86,7 +86,8 @@ var animation = {
86
86
  step3Duration: '200ms'
87
87
  };
88
88
  var zIndex = {
89
- tabBar: 10,
89
+ tabBarMobile: 10,
90
+ tabBarTablet: 3,
90
91
  hamburger: 4,
91
92
  header: 3,
92
93
  topRow: 2,
@@ -199,7 +200,7 @@ var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
199
200
  var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
200
201
  displayName: "header__TabBarContainer",
201
202
  componentId: "sc-1krza7i-12"
202
- })(["z-index:", ";position:fixed;bottom:0;left:0;width:100%;"], zIndex.tabBar);
203
+ })(["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));
203
204
 
204
205
  var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
205
206
  displayName: "header__HideOnArticle",
package/lib/utils/links.js CHANGED
@@ -104,8 +104,13 @@ var __composeExternalLink = function __composeExternalLink(link) {
104
104
  var checkReferrer = function checkReferrer() {
105
105
  var referrer = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
106
106
  var releaseBranch = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : defaultReleaseBranch;
107
- var url = new URL(referrer);
108
- return url.origin === mainBaseURL[releaseBranch];
107
+
108
+ try {
109
+ var url = new URL(referrer);
110
+ return url.origin === mainBaseURL[releaseBranch];
111
+ } catch (err) {
112
+ return false;
113
+ }
109
114
  };
110
115
 
111
116
  exports.checkReferrer = checkReferrer;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@twreporter/universal-header",
3
- "version": "2.4.1",
3
+ "version": "2.4.2-rc.3",
4
4
  "description": "Universal header of TWReporter sites",
5
5
  "main": "lib/index.js",
6
6
  "scripts": {
@@ -20,8 +20,8 @@
20
20
  ],
21
21
  "license": "MIT",
22
22
  "dependencies": {
23
- "@twreporter/core": "^1.8.1",
24
- "@twreporter/react-components": "^8.15.1",
23
+ "@twreporter/core": "^1.8.2-rc.1",
24
+ "@twreporter/react-components": "^8.16.0-rc.0",
25
25
  "lodash": "^4.17.11",
26
26
  "prop-types": "^15.6.2",
27
27
  "querystring": "^0.2.0",
@@ -48,5 +48,5 @@
48
48
  "@storybook/testing-library": "^0.0.13",
49
49
  "babel-loader": "^8.2.5"
50
50
  },
51
- "gitHead": "6743e0935126f9ed7cabb7be5a9a4dfa6742a3f7"
51
+ "gitHead": "1ebf9eeda3976aad554b576bf974c2718752ef4e"
52
52
  }