@twreporter/universal-header/lib/components/hamburger-footer.js

Universal header of TWReporter sites

"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 _styledComponents = _interopRequireDefault(require("styled-components"));
var _headerContext = _interopRequireWildcard(require("../contexts/header-context"));
var _links = require("../utils/links");
var _theme = require("../utils/theme");
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"));
var _paragraph = require("@twreporter/react-components/lib/text/paragraph");
var _button = require("@twreporter/react-components/lib/button");
var _icon = require("@twreporter/react-components/lib/icon");
var _theme2 = require("@twreporter/core/lib/constants/theme");
var _map = _interopRequireDefault(require("lodash/map"));
var _templateObject, _templateObject2; // context
// utils
// constants
// @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 _objectDestructuringEmpty(obj) { if (obj == null) throw new TypeError("Cannot destructure " + obj); }
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 _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
var _ = {
  map: _map["default"]
};
var FooterContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-footer__FooterContainer",
  componentId: "i02xyc-0"
})(["display:flex;flex-direction:column;"]);
var LinkItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-footer__LinkItem",
  componentId: "i02xyc-1"
})(["padding:8px 32px;display:flex;align-items:center;color:", ";svg{height:18px;width:18px;margin-right:4px;background-color:", ";}", " &:active{color:", ";background-color:", ";svg{background-color:", ";}}"], function (props) {
  return props.$color;
}, function (props) {
  return props.$color;
}, _mediaQuery["default"].desktopAndAbove(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    &:hover {\n      color: ", ";\n      background-color: ", ";\n      svg {\n        background-color: ", ";\n      }\n    }\n  "])), function (props) {
  return props.$hoverColor;
}, function (props) {
  return props.$hoverBgColor;
}, function (props) {
  return props.$hoverColor;
}), function (props) {
  return props.$activeColor;
}, function (props) {
  return props.$activeBgColor;
}, function (props) {
  return props.$activeColor;
});
var LinkSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-footer__LinkSection",
  componentId: "i02xyc-2"
})(["display:flex;flex-direction:column;a{text-decoration:none;}"]);
var IconItem = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-footer__IconItem",
  componentId: "i02xyc-3"
})(["margin-right:16px;&:last-child{margin-right:0;}", ""], _mediaQuery["default"].mobileOnly(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    svg {\n      height: 32px;\n      width: 32px;\n    }\n  "]))));
var SocialMediaSection = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-footer__SocialMediaSection",
  componentId: "i02xyc-4"
})(["display:flex;justify-content:center;"]);
var DividerContainer = /*#__PURE__*/_styledComponents["default"].div.withConfig({
  displayName: "hamburger-footer__DividerContainer",
  componentId: "i02xyc-5"
})(["margin:16px 32px;"]);
var Footer = function Footer(_ref) {
  var props = _extends({}, (_objectDestructuringEmpty(_ref), _ref));
  var _useContext = (0, _react.useContext)(_headerContext["default"]),
    theme = _useContext.theme,
    releaseBranch = _useContext.releaseBranch,
    isLinkExternal = _useContext.isLinkExternal;
  var _useContext2 = (0, _react.useContext)(_headerContext.HamburgerContext),
    closeHamburgerMenu = _useContext2.closeHamburgerMenu;
  var footerTheme = theme === _theme2.THEME.transparent ? _theme2.THEME.normal : theme;
  var _selectHamburgerFoote = (0, _theme.selectHamburgerFooterTheme)(footerTheme),
    color = _selectHamburgerFoote.color,
    hoverColor = _selectHamburgerFoote.hoverColor,
    hoverBgColor = _selectHamburgerFoote.hoverBgColor,
    activeColor = _selectHamburgerFoote.activeColor,
    activeBgColor = _selectHamburgerFoote.activeBgColor;
  var memberLinks = (0, _links.getMemberLinks)(isLinkExternal, releaseBranch);
  var memberJSX = memberLinks ? /*#__PURE__*/_react["default"].createElement(LinkSection, null, _.map(_footer.MEMBER_ORDER, function (key) {
    var link = memberLinks[key];
    var label = _footer.FOOTER_LABEL[key];
    if (!link || !label) {
      return;
    }
    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
      key: key,
      onClick: closeHamburgerMenu
    }), /*#__PURE__*/_react["default"].createElement(LinkItem, {
      $color: color,
      $hoverColor: hoverColor,
      $hoverBgColor: hoverBgColor,
      $activeColor: activeColor,
      $activeBgColor: activeBgColor
    }, /*#__PURE__*/_react["default"].createElement(_icon.Icon, {
      filename: _footer.FOOTER_ICON[key],
      releaseBranch: releaseBranch
    }), /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
      text: label
    })));
  })) : null;
  var footerLinks = (0, _links.getFooterLinks)(isLinkExternal, releaseBranch);
  var linkJSX = footerLinks ? /*#__PURE__*/_react["default"].createElement(LinkSection, null, _.map(_footer.FOOTER_ORDER, function (key) {
    var link = footerLinks[key];
    var label = _footer.FOOTER_LABEL[key];
    if (!link || !label) {
      return;
    }
    return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({}, link, {
      key: key,
      onClick: closeHamburgerMenu
    }), /*#__PURE__*/_react["default"].createElement(LinkItem, {
      $color: color,
      $hoverColor: hoverColor,
      $hoverBgColor: hoverBgColor,
      $activeColor: activeColor,
      $activeBgColor: activeBgColor
    }, /*#__PURE__*/_react["default"].createElement(_paragraph.P2, {
      text: label
    })));
  })) : null;
  var socialMediaLinks = (0, _links.getSocialMediaLinks)();
  var socialMediaJSX = socialMediaLinks ? /*#__PURE__*/_react["default"].createElement(SocialMediaSection, null, _.map(_socialMedia.SOCIAL_MEDIA_ORDER, function (key) {
    var link = socialMediaLinks[key];
    if (!link) {
      return;
    }
    var Icon = /*#__PURE__*/_react["default"].createElement(_icon.SocialMedia, {
      mediaType: key,
      releaseBranch: releaseBranch
    });
    return /*#__PURE__*/_react["default"].createElement(IconItem, {
      key: key
    }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], link, /*#__PURE__*/_react["default"].createElement(_button.IconButton, {
      iconComponent: Icon,
      theme: footerTheme
    })));
  })) : null;
  return /*#__PURE__*/_react["default"].createElement(FooterContainer, props, memberJSX, /*#__PURE__*/_react["default"].createElement(DividerContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), linkJSX, /*#__PURE__*/_react["default"].createElement(DividerContainer, null, /*#__PURE__*/_react["default"].createElement(_divider["default"], null)), socialMediaJSX);
};
var _default = exports["default"] = Footer;