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

package/CHANGELOG.md

@@ -3,6 +3,26 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.4.1-rc.4](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.1-rc.3...@twreporter/universal-header@2.4.1-rc.4) (2022-12-26)
+
+**Note:** Version bump only for package @twreporter/universal-header
+
+
+
+
+
+## [2.4.1-rc.3](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.1-rc.2...@twreporter/universal-header@2.4.1-rc.3) (2022-12-23)
+
+
+### Bug Fixes
+
+* add new contexgt props `referrerPath` ([e673c03](https://github.com/twreporter/twreporter-npm-packages/commit/e673c0360dbbd64ac33c1ddb9456032d7ffaeff0))
+* fix defects ([306fb41](https://github.com/twreporter/twreporter-npm-packages/commit/306fb41304f79e11cd21eb01405d5511467a39f8))
+
+
+
+
+
 ## [2.4.1-rc.2](https://github.com/twreporter/twreporter-npm-packages/compare/@twreporter/universal-header@2.4.1-rc.1...@twreporter/universal-header@2.4.1-rc.2) (2022-12-16)
 
 **Note:** Version bump only for package @twreporter/universal-header

package/lib/components/hamburger-footer.js

@@ -21,6 +21,8 @@ var _footer = require("../constants/footer");
 
 var _socialMedia = require("../constants/social-media");
 
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
 var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
 
 var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
@@ -35,6 +37,8 @@ var _theme2 = require("@twreporter/core/lib/constants/theme");
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
+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); }
@@ -43,6 +47,8 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+
 var _ = {
   map: _map["default"]
 };
@@ -75,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;}"]);
+})(["margin-right:16px;&:last-child{margin-right:0;}", ""], _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    svg {\n      height: 32px;\n      width: 32px;\n    }\n  "]))));
 
 var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-footer__SocialMediaSection",

package/lib/components/hamburger-menu.js

@@ -53,7 +53,7 @@ var _rwd = require("@twreporter/react-components/lib/rwd");
 
 var _map = _interopRequireDefault(require("lodash/map"));
 
-var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7;
 
 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); }
 
@@ -84,9 +84,9 @@ var _ = {
 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-scrollbar{background-color:transparent;width:4px;}&::-webkit-scrollbar-thumb{background-color:", ";border-radius:2px;}"], _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
+})(["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) {
   return props.bgColor;
-}, _mediaQuery["default"].tabletOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    width: ", ";\n  "])), _hamburgerMenu.MENU_WIDTH.tablet), _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    max-height: calc(100vh - 51px);\n    width: ", ";\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    padding-bottom: 48px;\n  "])), _hamburgerMenu.MENU_WIDTH.mobile), function (props) {
   return props.scrollBarColor;
 });
 
@@ -145,7 +145,7 @@ var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig(
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "hamburger-menu__IconContainer",
   componentId: "sc-15rzowt-11"
-})(["margin-left:24px;"]);
+})(["margin-left:24px;", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    z-index: 1;\n    margin-left: 16px;\n  "]))));
 
 var StyledMobileHamburgerAction = /*#__PURE__*/(0, _styledComponents["default"])(_actionButton.MobileHamburgerAction).withConfig({
   displayName: "hamburger-menu__StyledMobileHamburgerAction",
@@ -356,7 +356,8 @@ var HamburgerMenu = function HamburgerMenu(_ref2) {
   }))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(_actionButton.MobileHeaderAction, null), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons.MobileIcons, null))))), /*#__PURE__*/_react["default"].createElement(SearchSection, null, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
     onSearch: onSearch,
     autofocus: false,
-    widthType: "stretch"
+    widthType: "stretch",
+    placeholder: "\u95DC\u9375\u5B57\u641C\u5C0B"
   })), /*#__PURE__*/_react["default"].createElement(Content, null), /*#__PURE__*/_react["default"].createElement(_hamburgerFooter["default"], null), /*#__PURE__*/_react["default"].createElement(ActionSection, null, /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndAbove, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHamburgerAction, null)), /*#__PURE__*/_react["default"].createElement(_rwd.MobileOnly, null, /*#__PURE__*/_react["default"].createElement(StyledMobileHamburgerAction, null))));
 };
 

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;
+var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9;
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
 
@@ -86,6 +86,7 @@ var animation = {
   step3Duration: '200ms'
 };
 var zIndex = {
+  tabBar: 10,
   hamburger: 4,
   header: 3,
   topRow: 2,
@@ -172,7 +173,7 @@ var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["def
 var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__IconContainer",
   componentId: "sc-1krza7i-8"
-})(["margin-left:24px;"]);
+})(["margin-left:24px;", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    margin-left: 16px;\n  "]))));
 
 var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__FlexGroup",
@@ -189,16 +190,16 @@ var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfi
   componentId: "sc-1krza7i-11"
 })(["z-index:", ";position:absolute;top:0;left:-", ";transition:transform 300ms ease-in-out;transform:translateX( ", " );", " ", ""], zIndex.hamburger, _hamburgerMenu.MENU_WIDTH.desktop, function (props) {
   return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.desktop : 0;
-}, _mediaQuery["default"].tabletOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n    left: -", ";\n    transform: translateX(", ");\n  "])), _hamburgerMenu.MENU_WIDTH.tablet, function (props) {
+}, _mediaQuery["default"].tabletOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: -", ";\n    transform: translateX(", ");\n  "])), _hamburgerMenu.MENU_WIDTH.tablet, function (props) {
   return props.showHamburger ? _hamburgerMenu.MENU_WIDTH.tablet : 0;
-}), _mediaQuery["default"].mobileOnly(_templateObject8 || (_templateObject8 = _taggedTemplateLiteral(["\n    left: 0;\n    transform: none;\n    opacity: ", ";\n  "])), function (props) {
+}), _mediaQuery["default"].mobileOnly(_templateObject9 || (_templateObject9 = _taggedTemplateLiteral(["\n    left: 0;\n    transform: none;\n    opacity: ", ";\n  "])), function (props) {
   return props.showHamburger ? 1 : 0;
 }));
 
 var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__TabBarContainer",
   componentId: "sc-1krza7i-12"
-})(["position:fixed;bottom:env(safe-area-inset-bottom,0);left:0;width:100%;"]);
+})(["z-index:", ";position:fixed;bottom:0;left:0;width:100%;"], zIndex.tabBar);
 
 var HideOnArticle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "header__HideOnArticle",
@@ -221,7 +222,8 @@ var Header = function Header() {
       theme = _useContext.theme,
       toUseNarrow = _useContext.toUseNarrow,
       hideHeader = _useContext.hideHeader,
-      pathname = _useContext.pathname;
+      pathname = _useContext.pathname,
+      referrerPath = _useContext.referrerPath;
 
   var _useState = (0, _react.useState)(false),
       _useState2 = _slicedToArray(_useState, 2),
@@ -262,7 +264,7 @@ var Header = function Header() {
   });
 
   var gotoPrev = function gotoPrev() {
-    if ((0, _links.checkReferrer)(document.referrer, releaseBranch)) {
+    if (referrerPath || (0, _links.checkReferrer)(document.referrer, releaseBranch)) {
       // go to previous page when referer is twreporter site
       window.history.back();
     } else {

package/lib/components/icons.js

@@ -33,6 +33,8 @@ var _input = require("@twreporter/react-components/lib/input");
 
 var _hook = require("@twreporter/react-components/lib/hook");
 
+var _color = require("@twreporter/core/lib/constants/color");
+
 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); }
@@ -85,9 +87,9 @@ var SearchContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
 var StyledDialog = /*#__PURE__*/(0, _styledComponents["default"])(_card.Dialog).withConfig({
   displayName: "icons__StyledDialog",
   componentId: "ay66zn-5"
-})(["opacity:", ";transition:opacity 100ms;position:absolute;top:24px;right:-16px;width:max-content;cursor:pointer;"], function (props) {
+})(["opacity:", ";transition:opacity 100ms;position:absolute;top:24px;right:-16px;width:max-content;cursor:pointer;color:", ";"], function (props) {
   return props.showDialog ? '1' : '0';
-});
+}, _color.colorGrayscale.gray800);
 
 var LogInOutIcon = function LogInOutIcon(_ref) {
   var _ref$loginButtonType = _ref.loginButtonType,

package/lib/components/tab-bar.js

@@ -35,7 +35,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
   displayName: "tab-bar__TabBarContainer",
   componentId: "bdt7uj-0"
-})(["display:flex;justify-content:space-between;padding:4px 16px;border-top:1px solid ", ";background-color:", ";a{text-decoration:none;}"], function (props) {
+})(["display:flex;justify-content:space-between;padding:4px 16px;border-top:1px solid ", ";background-color:", ";padding-bottom:env(safe-area-inset-bottom,0);a{text-decoration:none;}"], function (props) {
   return props.borderColor;
 }, function (props) {
   return props.bgColor;
@@ -85,6 +85,7 @@ var TabBar = function TabBar() {
   var isHomeActive = !isHamburgerMenuOpen && pathname === '/';
   var isLatestActive = !isHamburgerMenuOpen && pathname === '/latest';
   var isBookmarkActive = !isHamburgerMenuOpen && pathname === '/bookmarks';
+  var hamburgerIconText = isHamburgerMenuOpen ? '關閉選單' : '選單';
   return /*#__PURE__*/_react["default"].createElement(TabBarContainer, {
     bgColor: bgColor,
     borderColor: borderColor
@@ -106,7 +107,7 @@ var TabBar = function TabBar() {
   }))), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
     onClick: toggleHamburger
   }, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
-    text: "\u9078\u55AE",
+    text: hamburgerIconText,
     iconComponent: HamburgerIcon,
     theme: theme,
     active: isHamburgerMenuOpen

package/lib/constants/prop-types.js

@@ -18,13 +18,17 @@ var contextPropTypes = {
   theme: _theme.THEME_PROP_TYPES,
   releaseBranch: _releaseBranch.BRANCH_PROP_TYPES,
   isLinkExternal: _propTypes["default"].bool,
-  isAuthed: _propTypes["default"].bool
+  isAuthed: _propTypes["default"].bool,
+  pathname: _propTypes["default"].string,
+  referrerPath: _propTypes["default"].string
 };
 var contextDefaultProps = {
   theme: _theme.THEME.normal,
   releaseBranch: _releaseBranch.BRANCH.master,
   isLinkExternal: false,
-  isAuthed: false
+  isAuthed: false,
+  pathname: '',
+  referrerPath: ''
 };
 var linkPropTypes = {
   to: _propTypes["default"].string.isRequired,

package/lib/containers/header.js

@@ -7,8 +7,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports["default"] = void 0;
 
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
 var _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
@@ -19,7 +17,7 @@ var _headerContext = _interopRequireDefault(require("../contexts/header-context"
 
 var _actions = require("../constants/actions");
 
-var _propTypes2 = require("../constants/prop-types");
+var _propTypes = require("../constants/prop-types");
 
 var _header = _interopRequireDefault(require("../components/header"));
 
@@ -29,7 +27,7 @@ var _map = _interopRequireDefault(require("lodash/map"));
 
 var _reduce = _interopRequireDefault(require("lodash/reduce"));
 
-var _excluded = ["releaseBranch", "isAuthed", "isLinkExternal", "theme", "pathname"];
+var _excluded = ["releaseBranch", "isAuthed", "isLinkExternal", "theme", "pathname", "referrerPath"];
 
 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); }
 
@@ -228,6 +226,7 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
           isLinkExternal = _this$props.isLinkExternal,
           theme = _this$props.theme,
           pathname = _this$props.pathname,
+          referrerPath = _this$props.referrerPath,
           passThrough = _objectWithoutProperties(_this$props, _excluded);
 
       var _this$state = this.state,
@@ -239,6 +238,7 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
         isLinkExternal: isLinkExternal,
         theme: theme,
         pathname: pathname,
+        referrerPath: referrerPath,
         toUseNarrow: toUseNarrow,
         hideHeader: hideHeader
       };
@@ -258,15 +258,9 @@ var Container = /*#__PURE__*/function (_React$PureComponent) {
   return Container;
 }(_react["default"].PureComponent);
 
-_defineProperty(Container, "defaultProps", _objectSpread(_objectSpread({}, _propTypes2.CONTEXT_PROP.defaultProps), {}, {
-  pathname: '',
-  location: {}
-}));
+_defineProperty(Container, "defaultProps", _objectSpread({}, _propTypes.CONTEXT_PROP.defaultProps));
 
-_defineProperty(Container, "propTypes", _objectSpread(_objectSpread({}, _propTypes2.CONTEXT_PROP.propTypes), {}, {
-  pathname: _propTypes["default"].string,
-  location: _propTypes["default"].object
-}));
+_defineProperty(Container, "propTypes", _objectSpread({}, _propTypes.CONTEXT_PROP.propTypes));
 
 function mapStateToProps(state) {
   return {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@twreporter/universal-header",
-  "version": "2.4.1-rc.2",
+  "version": "2.4.1-rc.4",
   "description": "Universal header of TWReporter sites",
   "main": "lib/index.js",
   "scripts": {
@@ -21,7 +21,7 @@
   "license": "MIT",
   "dependencies": {
     "@twreporter/core": "^1.8.1-rc.0",
-    "@twreporter/react-components": "^8.15.1-rc.2",
+    "@twreporter/react-components": "^8.15.1-rc.4",
     "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": "ee90f71041d8a30bf1c1fd62ffa7d9d57e0983d2"
+  "gitHead": "104876e39a98cf32a15a6ab6966c07a366ca6dbf"
 }