@twreporter/universal-header
Version:
Universal header of TWReporter sites
163 lines (162 loc) • 10.1 kB
JavaScript
;
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 _styledComponents = _interopRequireWildcard(require("styled-components"));
var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
var _links = require("../utils/links");
var _theme = require("../utils/theme");
var _theme2 = _interopRequireDefault(require("../constants/theme"));
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
var _button = require("@twreporter/react-components/lib/button");
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); } // context
// utils
// constants
// @twreporter
// material symbol
var Home = function Home(props) {
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
d: "M220-180h150v-250h220v250h150v-390L480-765 220-570v390zm-60 60v-480l320-240 320 240v480H530v-250H430v250H160zm320-353z"
}));
};
Home.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
width: "48",
height: "48",
viewBox: "0 -960 960 960"
};
var Clock = function Clock(props) {
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
d: "M627-287l45-45-159-160v-201h-60v225l174 181zM480-80q-82 0-155-31.5t-127.5-86Q143-252 111.5-325T80-480q0-82 31.5-155t86-127.5Q252-817 325-848.5T480-880q82 0 155 31.5t127.5 86Q817-708 848.5-635T880-480q0 82-31.5 155t-86 127.5Q708-143 635-111.5T480-80zm0-400zm0 340q140 0 240-100t100-240q0-140-100-240T480-820q-140 0-240 100T140-480q0 140 100 240t240 100z"
}));
};
Clock.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
width: "48",
height: "48",
viewBox: "0 -960 960 960"
};
var Topic = function Topic(props) {
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
d: "M248-300q53.57 0 104.28 12.5Q403-275 452-250v-427q-45-30-97.62-46.5Q301.76-740 248-740q-38 0-74.5 9.5T100-707v434q31-14 70.5-20.5T248-300zm264 50q50-25 98-37.5T712-300q38 0 78.5 6t69.5 16v-429q-34-17-71.82-25-37.82-8-76.18-8-54 0-104.5 16.5T512-677v427zm-30 90q-51-38-111-58.5T248-239q-36.54 0-71.77 9T106-208q-23.1 11-44.55-3Q40-225 40-251v-463q0-15 7-27.5T68-761q42-20 87.39-29.5 45.4-9.5 92.61-9.5 63 0 122.5 17T482-731q51-35 109.5-52T712-800q46.87 0 91.93 9.5Q849-781 891-761q14 7 21.5 19.5T920-714v463q0 27.89-22.5 42.45Q875-194 853-208q-34-14-69.23-22.5Q748.54-239 712-239q-63 0-121 21t-109 58zM276-489z"
}));
};
Topic.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
width: "48",
height: "48",
viewBox: "0 -960 960 960"
};
var Star = function Star(props) {
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
d: "M306.84-700.82L424-853q11-14 25.59-21 14.58-7 30.5-7 15.91 0 30.41 7t25.5 21l117.16 152.18L831-641q23 8 36 27.11t13 42.22q0 10.67-3.03 21.3-3.04 10.63-9.97 20.37L753-367l4 173q0 31-21 52.5T685.82-120q-1.82 0-18.82-3l-187-52-186.78 51.92Q288-121 282.49-120.5q-5.51.5-10.1.5-29.39 0-49.89-21.69Q202-163.37 203-195l4-173.25L93-531q-6.93-9.83-9.97-20.55Q80-562.28 80-573q0-23 12.92-41.61Q105.84-633.21 129-641l177.84-59.82zM343-649l-209 70 134 194-5 207 217-60 217 61-5-208 134-192-209-72-137-178-137 178zm137 147z"
}));
};
Star.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
width: "48",
height: "48",
viewBox: "0 -960 960 960"
};
var Menu = function Menu(props) {
return /*#__PURE__*/_react["default"].createElement("svg", props, /*#__PURE__*/_react["default"].createElement("path", {
d: "M120-240v-60h720v60H120zm0-210v-60h720v60H120zm0-210v-60h720v60H120z"
}));
};
Menu.defaultProps = {
xmlns: "http://www.w3.org/2000/svg",
width: "48",
height: "48",
viewBox: "0 -960 960 960"
};
var TabBarContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "tab-bar__TabBarContainer",
componentId: "bdt7uj-0"
})(["display:flex;justify-content:space-between;padding:8px 16px;box-shadow:0px 0px 2px rgba(0,0,0,0.15);background-color:", ";padding-bottom:calc(8px + env(safe-area-inset-bottom,0));a{text-decoration:none;}a:visited,a:active{color:inherit;background-color:inherit;}svg{background-color:transparent;fill:currentColor;width:24px;height:24px;}"], function (props) {
return props.$bgColor;
});
var buttonContainerCss = /*#__PURE__*/(0, _styledComponents.css)(["display:flex;justify-content:center;margin-right:8px;flex:1;&:last-child{margin-right:0;}"]);
var ButtonLinkContainer = /*#__PURE__*/(0, _styledComponents["default"])(_customizedLink["default"]).withConfig({
displayName: "tab-bar__ButtonLinkContainer",
componentId: "bdt7uj-1"
})(["text-decoration:none;", ""], buttonContainerCss);
var ButtonContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "tab-bar__ButtonContainer",
componentId: "bdt7uj-2"
})(["", ""], buttonContainerCss);
var TabBar = function TabBar() {
var _useContext = (0, _react.useContext)(_headerContext["default"]),
theme = _useContext.theme,
releaseBranch = _useContext.releaseBranch,
isLinkExternal = _useContext.isLinkExternal,
pathname = _useContext.pathname;
var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
closeHamburgerMenu = _useContext2.closeHamburgerMenu,
toggleHamburger = _useContext2.toggleHamburger,
isHamburgerMenuOpen = _useContext2.isHamburgerMenuOpen;
var iconTheme = theme === _theme2["default"].photography ? theme : _theme2["default"].normal;
var _getTabBarLinks = (0, _links.getTabBarLinks)(isLinkExternal, releaseBranch),
home = _getTabBarLinks.home,
latest = _getTabBarLinks.latest,
topic = _getTabBarLinks.topic,
myreading = _getTabBarLinks.myreading;
var HomeIcon = /*#__PURE__*/_react["default"].createElement(Home, null);
var ClockIcon = /*#__PURE__*/_react["default"].createElement(Clock, null);
var TopicIcon = /*#__PURE__*/_react["default"].createElement(Topic, null);
var MyReadingIcon = /*#__PURE__*/_react["default"].createElement(Star, null);
var HamburgerIcon = /*#__PURE__*/_react["default"].createElement(Menu, null);
var _selectTabBarTheme = (0, _theme.selectTabBarTheme)(theme),
bgColor = _selectTabBarTheme.bgColor,
borderColor = _selectTabBarTheme.borderColor;
var isHomeActive = !isHamburgerMenuOpen && pathname === '/';
var isLatestActive = !isHamburgerMenuOpen && (0, _links.checkPathnameParent)(pathname, 'latest');
var isTopicActive = !isHamburgerMenuOpen && pathname === '/topics';
var isMyReadingActive = !isHamburgerMenuOpen && pathname === '/myreading';
var hamburgerIconText = isHamburgerMenuOpen ? '關閉選單' : '選單';
return /*#__PURE__*/_react["default"].createElement(TabBarContainer, {
$bgColor: bgColor,
$borderColor: borderColor
}, /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, home, {
onClick: closeHamburgerMenu
}), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
text: "\u9996\u9801",
iconComponent: HomeIcon,
theme: iconTheme,
active: isHomeActive
})), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, latest, {
onClick: closeHamburgerMenu
}), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
text: "\u6700\u65B0",
iconComponent: ClockIcon,
theme: iconTheme,
active: isLatestActive
})), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, topic, {
onClick: closeHamburgerMenu
}), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
text: "\u6DF1\u5EA6\u5C08\u984C",
iconComponent: TopicIcon,
theme: iconTheme,
active: isTopicActive
})), /*#__PURE__*/_react["default"].createElement(ButtonLinkContainer, _extends({}, myreading, {
onClick: closeHamburgerMenu
}), /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
text: "\u6211\u7684\u95B1\u8B80",
iconComponent: MyReadingIcon,
theme: iconTheme,
active: isMyReadingActive
})), /*#__PURE__*/_react["default"].createElement(ButtonContainer, {
onClick: toggleHamburger
}, /*#__PURE__*/_react["default"].createElement(_button.IconWithTextButton, {
text: hamburgerIconText,
iconComponent: HamburgerIcon,
theme: iconTheme,
active: isHamburgerMenuOpen
})));
};
var _default = exports["default"] = TabBar;