@twreporter/universal-header 2.2.0-rc.5

package/lib/components/channels.js

@@ -0,0 +1,420 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _CSSTransition = _interopRequireDefault(require("react-transition-group/CSSTransition"));
+
+var _styledComponents = _interopRequireWildcard(require("styled-components"));
+
+var _headerContext = _interopRequireDefault(require("../contexts/header-context"));
+
+var _theme = _interopRequireDefault(require("../utils/theme"));
+
+var _animations = _interopRequireDefault(require("../utils/animations"));
+
+var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
+
+var _channels = _interopRequireDefault(require("../constants/channels"));
+
+var _colors = _interopRequireDefault(require("../constants/colors"));
+
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+var _dropDownMenu = _interopRequireDefault(require("./drop-down-menu"));
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+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); }
+
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _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(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _ = {
+  get: _get["default"],
+  map: _map["default"]
+};
+var styles = {
+  itemMargin: {
+    desktop: 0
+  },
+  itemPadding: {
+    row: [8, 16],
+    // px
+    column: [20, 32] // px
+
+  },
+  itemWidth: {
+    row: 'initial',
+    column: '100%'
+  },
+  itemBorderWidth: {
+    row: [0, 0, 0, 1],
+    column: [0, 0, 1, 0]
+  },
+  itemBorderWidthFirstChild: {
+    row: [0, 0, 0, 0],
+    column: [1, 0, 1, 0]
+  },
+  dropdownPosition: {
+    row: 'absolute',
+    column: 'relative'
+  },
+  dropdownTop: {
+    row: 35,
+    // px
+    column: 0 //px
+
+  }
+};
+var dropDownMenuEffectCSS = /*#__PURE__*/(0, _styledComponents.css)([".effect-enter{max-height:0;}.effect-enter-active{max-height:400px;transition:max-height 400ms ease-in 100ms;}"]);
+var linkUnderline = /*#__PURE__*/(0, _styledComponents.css)(["animation:", " 0.5s linear;position:absolute;left:0;bottom:-1px;display:block;content:'';width:100%;height:4px;background-color:#A67A44;"], _animations["default"].changeOpacity('0', '1'));
+
+var DropDownMenuWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__DropDownMenuWrapper",
+  componentId: "nu2llv-0"
+})(["position:", ";z-index:999;width:100%;left:0;top:", "px;", ""], function (props) {
+  return styles.dropdownPosition[props.direction];
+}, function (props) {
+  return styles.dropdownTop[props.direction];
+}, dropDownMenuEffectCSS);
+
+var Box = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__Box",
+  componentId: "nu2llv-1"
+})(["width:100%;"]);
+
+var List = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  displayName: "channels__List",
+  componentId: "nu2llv-2"
+})(["justify-content:space-between;background-color:", ";user-select:none;box-sizing:border-box;display:flex;flex-direction:", ";flex-wrap:nowrap;align-items:center;list-style-type:none;margin:auto;padding-inline-start:0;border-color:", ";border-width:", ";border-style:solid;"], function (props) {
+  return props.bgColor || _colors["default"].white;
+}, function (props) {
+  return props.direction;
+}, function (props) {
+  return props.borderColor || _colors["default"].gray;
+}, function (props) {
+  return (0, _css.arrayToCssShorthand)(props.borderWidth);
+});
+
+var ListItem = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  displayName: "channels__ListItem",
+  componentId: "nu2llv-3"
+})(["display:flex;flex-direction:", ";position:relative;width:", ";font-size:", ";letter-spacing:0.5px;cursor:pointer;margin:", ";flex:1;text-shadow:", ";border-style:solid;border-color:inherit;border-width:", ";&:first-child{border-width:", ";}&::after{", "}a,a:link,a:visited{display:flex;justify-content:space-between;align-items:center;font-size:", ";font-weight:", ";padding:", ";width:100%;color:", ";border:0;line-height:18px;&:hover{background-color:", ";color:", ";}}"], function (props) {
+  return props.direction;
+}, function (props) {
+  return styles.itemWidth[props.direction];
+}, _fonts["default"].size.base, (0, _css.arrayToCssShorthand)(styles.itemMargin.desktop), function (props) {
+  return props.textShadow;
+}, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.itemBorderWidth[props.direction]);
+}, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.itemBorderWidthFirstChild[props.direction]);
+}, function (props) {
+  return props.isActive && props.direction === 'row' ? linkUnderline : '';
+}, _fonts["default"].size.base, _fonts["default"].weight.bold, function (props) {
+  return (0, _css.arrayToCssShorthand)(styles.itemPadding[props.direction]);
+}, function (props) {
+  return props.fontColor;
+}, function (props) {
+  return props.hoverBgColor;
+}, function (props) {
+  return props.hoverFontColor;
+});
+
+var ShowOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__ShowOnHover",
+  componentId: "nu2llv-4"
+})(["display:none;", ":hover &{display:flex;}"], ListItem);
+
+var HideOnHover = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "channels__HideOnHover",
+  componentId: "nu2llv-5"
+})(["display:flex;", ":hover &{display:none;}"], ListItem);
+
+var invalidDataIndex = -1;
+var dropDownMenuKey = 'dropDownMenu';
+
+var Channels = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(Channels, _React$PureComponent);
+
+  var _super = _createSuper(Channels);
+
+  function Channels(props) {
+    var _this;
+
+    _classCallCheck(this, Channels);
+
+    _this = _super.call(this, props);
+    _this.state = {
+      activeDataIndex: _this._checkWhichChannelActive(props.currentPathname)
+    };
+    _this.handleDropDownChannelClick = _this._handleDropDownChannelClick.bind(_assertThisInitialized(_this));
+    _this.handleNormalChannelClick = _this._handleNormalChannelClick.bind(_assertThisInitialized(_this));
+    _this.handleDropDownMenuClick = _this._handleDropDownMenuClick.bind(_assertThisInitialized(_this));
+    _this.setActiveData = _this._setActiveData.bind(_assertThisInitialized(_this));
+    _this.resetActiveData = _this._resetActiveDataIndex.bind(_assertThisInitialized(_this));
+    _this.callback = _this._callback.bind(_assertThisInitialized(_this));
+    return _this;
+  }
+
+  _createClass(Channels, [{
+    key: "_checkWhichChannelActive",
+    value: function _checkWhichChannelActive(currentPathname) {
+      var data = this.props.data;
+      var activeChannelIndex = invalidDataIndex;
+
+      for (var channelIndex = 0; channelIndex < data.length; channelIndex += 1) {
+        var channelItem = data[channelIndex];
+
+        if (currentPathname === channelItem.pathname) {
+          activeChannelIndex = channelIndex;
+          break;
+        }
+
+        if (channelItem.hasOwnProperty(dropDownMenuKey)) {
+          var dropDownMenuArr = channelItem[dropDownMenuKey];
+
+          for (var dropDownIndex = 0; dropDownIndex < dropDownMenuArr.length; dropDownIndex += 1) {
+            if (dropDownMenuArr[dropDownIndex].pathname === currentPathname) {
+              activeChannelIndex = channelIndex;
+              break;
+            }
+          }
+
+          if (activeChannelIndex !== invalidDataIndex) {
+            break;
+          }
+        }
+      }
+
+      return activeChannelIndex;
+    }
+  }, {
+    key: "_handleDropDownChannelClick",
+    value: function _handleDropDownChannelClick(e, channelIndex) {
+      e.preventDefault();
+      this.setActiveData(channelIndex, true);
+    }
+  }, {
+    key: "_handleNormalChannelClick",
+    value: function _handleNormalChannelClick(channelIndex) {
+      this.setActiveData(channelIndex, false);
+      this.callback();
+    }
+  }, {
+    key: "_handleDropDownMenuClick",
+    value: function _handleDropDownMenuClick() {
+      this.resetActiveData(invalidDataIndex);
+      this.callback();
+    }
+  }, {
+    key: "_setActiveData",
+    value: function _setActiveData(dataIndex, clickTwiceInactive) {
+      var activeDataIndex = this.state.activeDataIndex;
+      var nextActiveIndex = clickTwiceInactive && activeDataIndex === dataIndex ? invalidDataIndex : dataIndex;
+      this.setState({
+        activeDataIndex: nextActiveIndex
+      });
+    }
+  }, {
+    key: "_resetActiveDataIndex",
+    value: function _resetActiveDataIndex() {
+      this.setActiveData(invalidDataIndex);
+    }
+  }, {
+    key: "_callback",
+    value: function _callback() {
+      this.props.callback();
+    }
+  }, {
+    key: "_prepareChannelItemJSX",
+    value: function _prepareChannelItemJSX(channelItem, dataIndex, theme) {
+      var _this2 = this;
+
+      var channelLabel = channelItem.label;
+      var channelType = channelItem.type;
+      var channelLink = channelItem.link;
+
+      if (channelType === _channels["default"].channelDropDownType) {
+        var _this$props = this.props,
+            data = _this$props.data,
+            direction = _this$props.direction;
+        var activeDataIndex = this.state.activeDataIndex;
+        var toShowDropdownMenu = activeDataIndex === dataIndex;
+
+        var dropdownMenuData = _.get(data, [dataIndex, dropDownMenuKey], []);
+
+        var dropdownMenuJSX = /*#__PURE__*/_react["default"].createElement(DropDownMenuWrapper, {
+          direction: direction
+        }, /*#__PURE__*/_react["default"].createElement(_CSSTransition["default"], {
+          "in": toShowDropdownMenu,
+          classNames: "effect",
+          timeout: 400,
+          exit: false,
+          mountOnEnter: true,
+          unmountOnExit: true
+        }, /*#__PURE__*/_react["default"].createElement(_dropDownMenu["default"], {
+          data: dropdownMenuData,
+          onClick: this.handleDropDownMenuClick
+        })));
+
+        var isActive = activeDataIndex === dataIndex;
+        var status = isActive ? 'collapse' : 'expand';
+
+        var _themeUtils$selectIco = _slicedToArray(_theme["default"].selectIcons(theme)[status], 2),
+            StatusIcon = _themeUtils$selectIco[0],
+            StatusHoverIcon = _themeUtils$selectIco[1];
+
+        var statusIconJSX = /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(HideOnHover, null, /*#__PURE__*/_react["default"].createElement(StatusIcon, null)), /*#__PURE__*/_react["default"].createElement(ShowOnHover, null, /*#__PURE__*/_react["default"].createElement(StatusHoverIcon, null)));
+
+        return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
+          onClick: function onClick(e) {
+            return _this2.handleDropDownChannelClick(e, dataIndex);
+          }
+        }, channelLink), channelLabel, statusIconJSX), dropdownMenuJSX);
+      } else {
+        return /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
+          onClick: function onClick() {
+            return _this2.handleNormalChannelClick(dataIndex);
+          }
+        }, channelLink), channelLabel);
+      }
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this3 = this;
+
+      var _this$props2 = this.props,
+          currentPathname = _this$props2.currentPathname,
+          data = _this$props2.data,
+          direction = _this$props2.direction,
+          borderWidth = _this$props2.borderWidth,
+          themeFunction = _this$props2.themeFunction;
+      var activeDataIndex = this.state.activeDataIndex;
+
+      var channelsJSX = _.map(data, function (channelItem, dataIndex) {
+        var isActive = activeDataIndex === dataIndex;
+        return /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, {
+          key: channelItem.key
+        }, function (_ref) {
+          var theme = _ref.theme;
+
+          var _themeFunction = themeFunction(theme),
+              fontColor = _themeFunction.fontColor,
+              hoverFontColor = _themeFunction.hoverFontColor,
+              hoverBgColor = _themeFunction.hoverBgColor,
+              borderColor = _themeFunction.borderColor;
+
+          var channelItemJSX = _this3._prepareChannelItemJSX(channelItem, dataIndex, theme);
+
+          return /*#__PURE__*/_react["default"].createElement(ListItem, {
+            direction: direction,
+            isActive: isActive,
+            onClick: _this3.handleClickChannel,
+            fontColor: fontColor,
+            hoverFontColor: hoverFontColor,
+            hoverBgColor: hoverBgColor
+          }, channelItemJSX);
+        });
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(Box, null, /*#__PURE__*/_react["default"].createElement(_headerContext["default"].Consumer, null, function (_ref2) {
+        var theme = _ref2.theme;
+
+        var _themeFunction2 = themeFunction(theme),
+            bgColor = _themeFunction2.bgColor,
+            borderColor = _themeFunction2.borderColor;
+
+        return /*#__PURE__*/_react["default"].createElement(List, {
+          bgColor: bgColor,
+          direction: direction,
+          borderColor: borderColor,
+          borderWidth: borderWidth
+        }, channelsJSX);
+      }));
+    }
+  }]);
+
+  return Channels;
+}(_react["default"].PureComponent);
+
+_defineProperty(Channels, "propTypes", {
+  currentPathname: _propTypes["default"].string.isRequired,
+  data: _propTypes["default"].arrayOf(_propTypes["default"].shape(_defineProperty({
+    key: _propTypes["default"].string,
+    label: _propTypes["default"].string,
+    link: _propTypes["default"].shape(_propTypes2["default"].link.propTypes),
+    pathname: _propTypes["default"].string,
+    type: _propTypes["default"].oneOf([_channels["default"].channelDropDownType, _channels["default"].channelLinkType])
+  }, dropDownMenuKey, _dropDownMenu["default"].propTypes.data))),
+  direction: _propTypes["default"].string,
+  borderWidth: _propTypes["default"].array,
+  themeFunction: _propTypes["default"].func,
+  callback: _propTypes["default"].func
+});
+
+_defineProperty(Channels, "defaultProps", {
+  data: [],
+  direction: 'row',
+  borderWidth: [0, 0, 0, 0],
+  themeFunction: _theme["default"].selectChannelTheme,
+  callback: function callback() {}
+});
+
+var _default = Channels;
+exports["default"] = _default;

package/lib/components/customized-link.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _reactRouterDom = require("react-router-dom");
+
+var _excluded = ["isExternal", "to"];
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
+
+function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
+
+var CustomizedLink = function CustomizedLink(_ref) {
+  var isExternal = _ref.isExternal,
+      to = _ref.to,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  if (isExternal) {
+    return /*#__PURE__*/_react["default"].createElement("a", _extends({
+      href: to
+    }, rest));
+  }
+
+  return /*#__PURE__*/_react["default"].createElement(_reactRouterDom.Link, _extends({
+    to: to
+  }, rest));
+};
+
+CustomizedLink.propTypes = {
+  isExternal: _propTypes["default"].bool,
+  to: _propTypes["default"].string
+};
+CustomizedLink.defaultProps = {
+  isExternal: true,
+  to: ''
+};
+var _default = CustomizedLink;
+exports["default"] = _default;

package/lib/components/drop-down-menu.js

@@ -0,0 +1,138 @@
+"use strict";
+
+function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+
+var _customizedLink = _interopRequireDefault(require("./customized-link"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _colors = _interopRequireDefault(require("../constants/colors"));
+
+var _fonts = _interopRequireDefault(require("../constants/fonts"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _propTypes2 = _interopRequireDefault(require("../constants/prop-types"));
+
+var _css = require("@twreporter/core/lib/utils/css");
+
+var _mediaQuery = _interopRequireDefault(require("@twreporter/core/lib/utils/media-query"));
+
+var _get = _interopRequireDefault(require("lodash/get"));
+
+var _map = _interopRequireDefault(require("lodash/map"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": 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 _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } }
+
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); return Constructor; }
+
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); if (superClass) _setPrototypeOf(subClass, superClass); }
+
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+var _ = {
+  get: _get["default"],
+  map: _map["default"]
+};
+
+var ViewPort = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "drop-down-menu__ViewPort",
+  componentId: "sc-8es5ea-0"
+})(["width:100%;height:100%;overflow:hidden;box-sizing:border-box;margin:0;padding:0;max-height:400px;"]);
+
+var MenuBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
+  displayName: "drop-down-menu__MenuBox",
+  componentId: "sc-8es5ea-1"
+})(["width:100%;height:100%;box-sizing:border-box;background-color:", ";user-select:none;"], _colors["default"].white);
+
+var MenuContent = /*#__PURE__*/_styledComponents["default"].ul.withConfig({
+  displayName: "drop-down-menu__MenuContent",
+  componentId: "sc-8es5ea-2"
+})(["margin:0 auto;padding:0;width:100%;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;align-items:center;list-style-type:none;"]);
+
+var SubMenuBox = /*#__PURE__*/_styledComponents["default"].li.withConfig({
+  displayName: "drop-down-menu__SubMenuBox",
+  componentId: "sc-8es5ea-3"
+})(["display:flex;box-sizing:border-box;white-space:nowrap;position:relative;margin:0;border-bottom:1px solid #e2e2e2;width:100%;a,a:link,a:visited{width:100%;border:0;color:#808080;&:hover{color:", ";background-color:rgba(0,0,0,0.1);}}"], _colors["default"].grayDark);
+
+var SubMenuContent = /*#__PURE__*/_styledComponents["default"].span.withConfig({
+  displayName: "drop-down-menu__SubMenuContent",
+  componentId: "sc-8es5ea-4"
+})(["font-size:", ";font-weight:", ";cursor:pointer;"], _fonts["default"].size.base, _fonts["default"].weight.normal);
+
+var DropDownMenu = /*#__PURE__*/function (_React$PureComponent) {
+  _inherits(DropDownMenu, _React$PureComponent);
+
+  var _super = _createSuper(DropDownMenu);
+
+  function DropDownMenu() {
+    _classCallCheck(this, DropDownMenu);
+
+    return _super.apply(this, arguments);
+  }
+
+  _createClass(DropDownMenu, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          data = _this$props.data,
+          onClick = _this$props.onClick;
+      var subMenuCount = data.length;
+
+      var menuJSX = _.map(data, function (subMenuItem, index) {
+        return /*#__PURE__*/_react["default"].createElement(SubMenuBox, {
+          key: subMenuItem.key
+        }, /*#__PURE__*/_react["default"].createElement(_customizedLink["default"], _extends({
+          onClick: onClick
+        }, subMenuItem.link), /*#__PURE__*/_react["default"].createElement(SubMenuContent, null, subMenuItem.label)));
+      });
+
+      return /*#__PURE__*/_react["default"].createElement(ViewPort, null, /*#__PURE__*/_react["default"].createElement(MenuBox, null, /*#__PURE__*/_react["default"].createElement(MenuContent, null, menuJSX)));
+    }
+  }]);
+
+  return DropDownMenu;
+}(_react["default"].PureComponent);
+
+_defineProperty(DropDownMenu, "propTypes", {
+  onClick: _propTypes["default"].func,
+  data: _propTypes["default"].arrayOf(_propTypes["default"].shape({
+    key: _propTypes["default"].string,
+    label: _propTypes["default"].string,
+    link: _propTypes["default"].shape(_propTypes2["default"].link.propTypes),
+    pathname: _propTypes["default"].string
+  }))
+});
+
+_defineProperty(DropDownMenu, "defaultProps", {
+  onClick: function onClick() {},
+  data: []
+});
+
+var _default = DropDownMenu;
+exports["default"] = _default;