@twreporter/universal-header
Version:
Universal header of TWReporter sites
196 lines (195 loc) • 10.5 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"] = exports.MobileIcons = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _querystring = _interopRequireDefault(require("querystring"));
var _styledComponents = _interopRequireDefault(require("styled-components"));
var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
var _links = require("../utils/links");
var _customizedLink = _interopRequireDefault(require("@twreporter/react-components/lib/customized-link"));
var _button = require("@twreporter/react-components/lib/button");
var _icon = require("@twreporter/react-components/lib/icon");
var _input = require("@twreporter/react-components/lib/input");
var _hook = require("@twreporter/react-components/lib/hook");
var _theme = require("@twreporter/core/lib/constants/theme");
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 _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; } // context
// utils
// @twreporter
var IconsContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "icons__IconsContainer",
componentId: "ay66zn-0"
})(["display:flex;"]);
var IconContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "icons__IconContainer",
componentId: "ay66zn-1"
})(["position:relative;margin-right:16px;&:last-child{margin-right:0;}a{display:flex;}"]);
var Container = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "icons__Container",
componentId: "ay66zn-2"
})(["opacity:", ";transition:opacity 300ms ease;"], function (props) {
return props.$isSearchOpened ? '0' : '1';
});
var LogContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "icons__LogContainer",
componentId: "ay66zn-3"
})(["display:flex;flex-direction:column;"]);
var SearchContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
displayName: "icons__SearchContainer",
componentId: "ay66zn-4"
})(["opacity:", ";transition:opacity 300ms ease;position:absolute;right:0;top:-8px;z-index:", ";"], function (props) {
return props.$isSearchOpened ? '1' : '0';
}, function (props) {
return props.$isSearchOpened ? 999 : -1;
});
var MemberButtonType = {
ICON: 'icon',
TEXT: 'text'
};
var MemberIcon = function MemberIcon(_ref) {
var _ref$memberButtonType = _ref.memberButtonType,
memberButtonType = _ref$memberButtonType === void 0 ? MemberButtonType.ICON : _ref$memberButtonType,
_ref$isForHambuger = _ref.isForHambuger,
isForHambuger = _ref$isForHambuger === void 0 ? false : _ref$isForHambuger;
var _useContext = (0, _react.useContext)(_headerContext["default"]),
releaseBranch = _useContext.releaseBranch,
theme = _useContext.theme,
isAuthed = _useContext.isAuthed,
isLinkExternal = _useContext.isLinkExternal;
var onClickIcon = function onClickIcon(e) {
e.preventDefault();
if (isAuthed) {
window.location = (0, _links.getMemberLink)(isLinkExternal, releaseBranch).to;
return;
}
var redirectURL = window.location.href;
var query = _querystring["default"].stringify({
destination: redirectURL
});
window.location = (0, _links.getLoginLink)(releaseBranch).to + '?' + query;
};
var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Member, {
releaseBranch: releaseBranch
});
var buttonTheme;
if (isForHambuger) {
if (theme === _theme.THEME.transparent) {
buttonTheme = _theme.THEME.normal;
} else {
buttonTheme = theme;
}
} else {
buttonTheme = theme;
}
var LoginButton = memberButtonType === MemberButtonType.ICON || isAuthed ? /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
iconComponent: Icon,
theme: buttonTheme
}) : /*#__PURE__*/_react["default"].createElement(_button.TextButton, {
text: "\u767B\u5165",
theme: buttonTheme,
style: _button.TextButton.Style.DARK
});
return /*#__PURE__*/_react["default"].createElement(IconContainer, {
key: "login"
}, /*#__PURE__*/_react["default"].createElement(LogContainer, {
onClick: onClickIcon
}, LoginButton));
};
MemberIcon.propTypes = {
memberButtonType: _propTypes["default"].oneOf(Object.values(MemberButtonType)),
isForHambuger: _propTypes["default"].bool
};
var SearchIcon = function SearchIcon() {
var _useState = (0, _react.useState)(false),
_useState2 = _slicedToArray(_useState, 2),
isSearchOpened = _useState2[0],
setSearchOpened = _useState2[1];
var _useContext2 = (0, _react.useContext)(_headerContext["default"]),
isLinkExternal = _useContext2.isLinkExternal,
releaseBranch = _useContext2.releaseBranch,
theme = _useContext2.theme;
var closeSearchBox = function closeSearchBox() {
setSearchOpened(false);
};
var handleClickSearch = function handleClickSearch(e) {
e.preventDefault();
setSearchOpened(true);
if (!ref.current) {
return;
}
var input = ref.current.getElementsByTagName('INPUT')[0];
if (input) {
input.focus();
}
};
var onSearch = function onSearch(keywords) {
setSearchOpened(false);
if (!window) {
return;
}
window.location = "".concat((0, _links.getSearchLink)(isLinkExternal, releaseBranch).to, "?q=").concat(keywords);
};
var Icon = /*#__PURE__*/_react["default"].createElement(_icon.Search, {
releaseBranch: releaseBranch
});
var ref = (0, _hook.useOutsideClick)(closeSearchBox);
return /*#__PURE__*/_react["default"].createElement(IconContainer, {
ref: ref,
key: "search"
}, /*#__PURE__*/_react["default"].createElement(Container, {
onClick: handleClickSearch,
$isSearchOpened: isSearchOpened
}, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
iconComponent: Icon,
theme: theme
})), /*#__PURE__*/_react["default"].createElement(SearchContainer, {
$isSearchOpened: isSearchOpened
}, /*#__PURE__*/_react["default"].createElement(_input.SearchBar, {
placeholder: "\u95DC\u9375\u5B57\u641C\u5C0B",
theme: theme,
onClose: closeSearchBox,
onSearch: onSearch
})));
};
var MyReadingIcon = function MyReadingIcon() {
var _useContext3 = (0, _react.useContext)(_headerContext["default"]),
releaseBranch = _useContext3.releaseBranch,
isLinkExternal = _useContext3.isLinkExternal,
theme = _useContext3.theme;
var link = (0, _links.getMyReadingLink)(isLinkExternal, releaseBranch);
var Icon = /*#__PURE__*/_react["default"].createElement(_icon.KidStar, {
releaseBranch: releaseBranch
});
return /*#__PURE__*/_react["default"].createElement(IconContainer, {
key: "bookmark"
}, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
iconComponent: Icon,
theme: theme
})));
};
var Icons = function Icons() {
return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(SearchIcon, null), /*#__PURE__*/_react["default"].createElement(MyReadingIcon, null), /*#__PURE__*/_react["default"].createElement(MemberIcon, null));
};
var MobileIcons = exports.MobileIcons = function MobileIcons(_ref2) {
var _ref2$isForHambuger = _ref2.isForHambuger,
isForHambuger = _ref2$isForHambuger === void 0 ? false : _ref2$isForHambuger;
return /*#__PURE__*/_react["default"].createElement(IconsContainer, null, /*#__PURE__*/_react["default"].createElement(MemberIcon, {
memberButtonType: MemberButtonType.TEXT,
isForHambuger: isForHambuger
}));
};
MobileIcons.propTypes = {
isForHambuger: _propTypes["default"].bool
};
var _default = exports["default"] = Icons;