@twreporter/universal-header
Version:
Universal header of TWReporter sites
327 lines (326 loc) • 21.7 kB
JavaScript
"use strict";
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 = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _styledComponents = _interopRequireWildcard(require("styled-components"));
var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
var _links = require("../utils/links");
var _theme = require("../utils/theme");
var _theme2 = _interopRequireDefault(require("../constants/theme"));
var _hamburgerMenu = require("../constants/hamburger-menu");
var _channels = _interopRequireDefault(require("./channels"));
var _actionButton = require("./action-button");
var _icons = _interopRequireWildcard(require("./icons"));
var _slogan = _interopRequireDefault(require("./slogan"));
var _hamburgerMenu2 = _interopRequireDefault(require("./hamburger-menu"));
var _tabBar = _interopRequireDefault(require("./tab-bar"));
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
var _divider = _interopRequireDefault(require("@twreporter/react-components/lib/divider"));
var _logo = require("@twreporter/react-components/lib/logo");
var _button = require("@twreporter/react-components/lib/button");
var _icon = require("@twreporter/react-components/lib/icon");
var _hook = require("@twreporter/react-components/lib/hook");
var _rwd = require("@twreporter/react-components/lib/rwd");
var _entityPath = _interopRequireDefault(require("@twreporter/core/lib/constants/entity-path"));
var _some = _interopRequireDefault(require("lodash/some"));
var _includes = _interopRequireDefault(require("lodash/includes"));
var _throttle = _interopRequireDefault(require("lodash/throttle"));
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6, _templateObject7, _templateObject8, _templateObject9, _templateObject10, _templateObject11; // context
// utils
// constants
// components
// @twreporter
// lodash
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _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; }
function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var _ = {
some: _some["default"],
includes: _includes["default"],
throttle: _throttle["default"]
};
var narrowHeaderHeight = 65;
var channelHeight = 50;
var animation = {
step1Duration: '200ms',
step2Delay: '150ms',
step2Duration: '50ms',
step3Delay: '150ms',
step3Duration: '200ms'
};
var zIndex = {
tabBarMobile: 10,
tabBarTablet: 3,
hamburger: 4,
header: 3,
topRow: 2,
channel: 1
};
var channelSlideIn = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(", "px);opacity:0;}to{transform:translateY(0);opacity:1;}"], -channelHeight);
var channelSlideOut = /*#__PURE__*/(0, _styledComponents.keyframes)(["from{transform:translateY(0);}to{transform:translateY(", "px);}"], -channelHeight);
var ChannelEffect = /*#__PURE__*/(0, _styledComponents.css)([".channel-effect-enter{opacity:0;}.channel-effect-enter-active{animation:", " ", " linear;animation-delay:150ms;}.channel-effect-exit-active{animation:", " ", " linear;animation-delay:0ms;}"], channelSlideIn, animation.step1Duration, channelSlideOut, animation.step1Duration);
var HeaderContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__HeaderContainer",
componentId: "sc-1krza7i-0"
})(["position:", ";top:0;width:100%;background-color:", ";transform:translateY( ", " );transition:transform 300ms ", ";", ""], function (props) {
return props.$theme === _theme2["default"].transparent ? 'fixed' : 'sticky';
}, function (props) {
return props.$bgColor;
}, function (props) {
return props.$hideHeader ? "".concat(-narrowHeaderHeight, "px") : '0';
}, function (props) {
return props.$hideHeader ? 'ease-in' : 'ease-out';
}, _mediaQuery["default"].mobileOnly(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n ", "\n "])), function (props) {
return props.$forceShowOnMobile ? 'transform: translateY(0);' : '';
}));
var HeaderSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__HeaderSection",
componentId: "sc-1krza7i-1"
})(["display:flex;flex-direction:column;margin:auto;z-index:", ";", " ", " ", " ", ""], zIndex.header, _mediaQuery["default"].hdOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n width: 1280px;\n "]))), _mediaQuery["default"].desktopOnly(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n padding: 0 48px;\n "]))), _mediaQuery["default"].tabletOnly(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n padding: 0 32px;\n "]))), _mediaQuery["default"].mobileOnly(_templateObject5 || (_templateObject5 = _taggedTemplateLiteral(["\n padding: 0 24px;\n "]))));
var LogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__LogoContainer",
componentId: "sc-1krza7i-2"
})(["display:flex;align-items:center;margin-right:16px;a{display:flex;}"]);
var MobileLogoContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__MobileLogoContainer",
componentId: "sc-1krza7i-3"
})(["display:flex;align-items:center;img{height:21px;}a{display:flex;}"]);
var HideWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__HideWhenNarrow",
componentId: "sc-1krza7i-4"
})([""]);
var ShowWhenNarrow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__ShowWhenNarrow",
componentId: "sc-1krza7i-5"
})([""]);
var TopRow = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__TopRow",
componentId: "sc-1krza7i-6"
})(["display:flex;align-items:center;justify-content:space-between;padding:", " 16px;z-index:", ";background-color:", ";", "{opacity:", ";transition:opacity ", ";transition-delay:", ";}", "{opacity:", ";transition:opacity ", ";transition-delay:", ";pointer-events:", ";}", "{margin-left:", ";transform:translateX(", ");transition:all ", ";transition-delay:", ";img,a{height:", ";transition:height ", ";transition-delay:", ";}}", ""], function (props) {
return props.$toUseNarrow ? '16px' : '24px';
}, zIndex.topRow, function (props) {
return props.$topRowBgColor;
}, ShowWhenNarrow, function (props) {
return props.$toUseNarrow ? '1' : '0';
}, animation.step3Duration, function (props) {
return props.$toUseNarrow ? '350ms' : 0;
}, HideWhenNarrow, function (props) {
return props.$toUseNarrow ? '0' : '1';
}, animation.step3Duration, function (props) {
return props.$toUseNarrow ? animation.step3Delay : 0;
}, function (props) {
return props.$toUseNarrow ? 'none' : 'all';
}, LogoContainer, function (props) {
return props.$toUseNarrow ? '24px' : '0';
}, function (props) {
return props.$toUseNarrow ? '0' : '-24px';
}, animation.step3Duration, function (props) {
return props.$toUseNarrow ? animation.step3Delay : 0;
}, function (props) {
return props.$toUseNarrow ? '24px' : '32px';
}, animation.step3Duration, function (props) {
return props.$toUseNarrow ? animation.step3Delay : 0;
}, _mediaQuery["default"].tabletAndBelow(_templateObject6 || (_templateObject6 = _taggedTemplateLiteral(["\n padding: 16px 0;\n "]))));
var StyledDivider = /*#__PURE__*/(0, _styledComponents["default"])(_divider["default"]).withConfig({
displayName: "header__StyledDivider",
componentId: "sc-1krza7i-7"
})(["opacity:", ";transition:opacity ", ";transition-delay:", ";"], function (props) {
return props.$toUseNarrow ? '0' : '1';
}, animation.step2Duration, function (props) {
return props.$toUseNarrow ? animation.step2Delay : 0;
});
var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__IconContainer",
componentId: "sc-1krza7i-8"
})(["margin-left:24px;", ""], _mediaQuery["default"].mobileOnly(_templateObject7 || (_templateObject7 = _taggedTemplateLiteral(["\n margin-left: 16px;\n "]))));
var FlexGroup = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__FlexGroup",
componentId: "sc-1krza7i-9"
})(["display:flex;align-items:center;"]);
var ChannelContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__ChannelContainer",
componentId: "sc-1krza7i-10"
})(["z-index:", ";", ""], zIndex.channel, ChannelEffect);
var HamburgerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__HamburgerContainer",
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(_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(_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: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",
componentId: "sc-1krza7i-13"
})(["", ""], function (props) {
return props.$isOnArticlePage ? 'display: none;' : '';
});
var PrevButton = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "header__PrevButton",
componentId: "sc-1krza7i-14"
})(["", " margin-right:8px;padding:4px;transform:translateX(-8px);"], function (props) {
return props.$isShow ? '' : 'display: none;';
});
var Header = function Header(_ref) {
var _ref$hamburgerContext = _ref.hamburgerContext,
hamburgerContext = _ref$hamburgerContext === void 0 ? {} : _ref$hamburgerContext;
var _useContext = (0, _react.useContext)(_headerContext["default"]),
releaseBranch = _useContext.releaseBranch,
isLinkExternal = _useContext.isLinkExternal,
theme = _useContext.theme,
toUseNarrow = _useContext.toUseNarrow,
hideHeader = _useContext.hideHeader,
pathname = _useContext.pathname,
referrerPath = _useContext.referrerPath;
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
defaultShowHamburger = _useState2[0],
setDefaultShowHamburger = _useState2[1];
var showHamburger = (hamburgerContext === null || hamburgerContext === void 0 ? void 0 : hamburgerContext.showHamburger) || defaultShowHamburger;
var setShowHamburger = (hamburgerContext === null || hamburgerContext === void 0 ? void 0 : hamburgerContext.setShowHamburger) || setDefaultShowHamburger;
var logoLink = (0, _links.getLogoLink)(isLinkExternal, releaseBranch);
var logoType = (0, _theme.selectLogoType)(theme);
var HamburgerIcon = /*#__PURE__*/_react["default"].createElement(_icon.Hamburger, {
releaseBranch: releaseBranch
});
var _selectHeaderTheme = (0, _theme.selectHeaderTheme)(theme),
bgColor = _selectHeaderTheme.bgColor,
topRowBgColor = _selectHeaderTheme.topRowBgColor;
var toggleHamburger = function toggleHamburger(e) {
e.stopPropagation();
setShowHamburger(!showHamburger);
};
var closeHamburger = function closeHamburger() {
return setShowHamburger(false);
};
var ref = (0, _hook.useOutsideClick)(closeHamburger);
var contextValue = {
toggleHamburger: toggleHamburger,
closeHamburgerMenu: closeHamburger,
isHamburgerMenuOpen: showHamburger
};
(0, _react.useEffect)(function () {
closeHamburger();
}, [pathname]);
var isOnArticlePage = _.includes(pathname, _entityPath["default"].article);
var needPrevIconRoute = ["".concat(_entityPath["default"].account, "/donation-history"), "".concat(_entityPath["default"].account, "/email-subscription"), "".concat(_entityPath["default"].myReading, "/saved"), "".concat(_entityPath["default"].myReading, "/history")];
var isOnNeedPrevIconPage = _.some(needPrevIconRoute, function (el) {
return _.includes(pathname, el);
});
var _useState3 = (0, _react.useState)(0),
_useState4 = _slicedToArray(_useState3, 2),
currentClientWidth = _useState4[0],
setCurrentClientWidth = _useState4[1];
(0, _react.useEffect)(function () {
var handleResize = _.throttle(function () {
setCurrentClientWidth(document.body.clientWidth);
});
handleResize();
window.addEventListener('resize', handleResize);
return function () {
window.removeEventListener('resize', handleResize);
};
}, []);
var showPrevIcon = isOnArticlePage || isOnNeedPrevIconPage && currentClientWidth < 768; // only show it on mobile
var BackToPrevIcon = /*#__PURE__*/_react["default"].createElement(_icon.Arrow, {
direction: "left",
releaseBranch: releaseBranch
});
var gotoPrev = function gotoPrev() {
if (referrerPath || (0, _links.checkReferrer)(document.referrer, releaseBranch)) {
// go to previous page when referer is twreporter site
window.history.back();
} else {
// go to home page when referer is not twreporter site
window.location.href = '/';
}
};
var DesktopHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
$toUseNarrow: toUseNarrow,
$topRowBgColor: topRowBgColor
}, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(ShowWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
iconComponent: HamburgerIcon,
theme: theme,
onClick: toggleHamburger,
"aria-label": "\u6253\u958B\u6F22\u5821\u9078\u55AE"
})), /*#__PURE__*/_react["default"].createElement(LogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, logoLink, {
"aria-label": "\u524D\u5F80\u9996\u9801"
}), /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
type: logoType,
releaseBranch: releaseBranch
}))), /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_slogan["default"], null))), /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(HideWhenNarrow, null, /*#__PURE__*/_react["default"].createElement(_actionButton.DesktopHeaderAction, null)), /*#__PURE__*/_react["default"].createElement(IconContainer, null, /*#__PURE__*/_react["default"].createElement(_icons["default"], null)))), /*#__PURE__*/_react["default"].createElement(StyledDivider, {
$toUseNarrow: toUseNarrow
}), /*#__PURE__*/_react["default"].createElement(ChannelContainer, null, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
"in": !toUseNarrow,
classNames: "channel-effect",
timeout: {
appear: 0,
enter: 350,
exit: 200
},
unmountOnExit: true
}, /*#__PURE__*/_react["default"].createElement(_channels["default"], {
onClickHambuger: toggleHamburger
}))));
var MobileHeaderJSX = /*#__PURE__*/_react["default"].createElement(HeaderSection, null, /*#__PURE__*/_react["default"].createElement(TopRow, {
$toUseNarrow: toUseNarrow,
$topRowBgColor: topRowBgColor
}, /*#__PURE__*/_react["default"].createElement(FlexGroup, null, /*#__PURE__*/_react["default"].createElement(PrevButton, {
$isShow: showPrevIcon,
onClick: gotoPrev
}, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
iconComponent: BackToPrevIcon,
theme: theme
})), /*#__PURE__*/_react["default"].createElement(MobileLogoContainer, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], logoLink, /*#__PURE__*/_react["default"].createElement(_logo.LogoHeader, {
type: logoType,
releaseBranch: releaseBranch
})))), /*#__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)))));
return /*#__PURE__*/_react["default"].createElement(_headerContext.HamburgerContext.Provider, {
value: contextValue
}, /*#__PURE__*/_react["default"].createElement(HeaderContainer, {
$bgColor: bgColor,
$hideHeader: hideHeader,
$forceShowOnMobile: showHamburger,
$theme: theme
}, /*#__PURE__*/_react["default"].createElement(_rwd.DesktopAndAbove, null, DesktopHeaderJSX), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, MobileHeaderJSX)), /*#__PURE__*/_react["default"].createElement(HamburgerContainer, {
ref: ref,
$showHamburger: showHamburger
}, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
"in": showHamburger,
classNames: "hamburger-effect",
timeout: {
appear: 0,
enter: 300,
exit: 300
},
unmountOnExit: true
}, /*#__PURE__*/_react["default"].createElement(_hamburgerMenu2["default"], null))), /*#__PURE__*/_react["default"].createElement(_rwd.TabletAndBelow, null, /*#__PURE__*/_react["default"].createElement(HideOnArticle, {
$isOnArticlePage: isOnArticlePage
}, /*#__PURE__*/_react["default"].createElement(TabBarContainer, null, /*#__PURE__*/_react["default"].createElement(_tabBar["default"], {
toggleHamburger: toggleHamburger
})))));
};
Header.propTypes = {
hamburgerContext: _propTypes["default"].object
};
var _default = exports["default"] = Header;