@codementor/ui-kit/HeaderNavigation/Menu.js

'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _extends2 = require('babel-runtime/helpers/extends');

var _extends3 = _interopRequireDefault(_extends2);

var _getPrototypeOf = require('babel-runtime/core-js/object/get-prototype-of');

var _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf);

var _classCallCheck2 = require('babel-runtime/helpers/classCallCheck');

var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);

var _createClass2 = require('babel-runtime/helpers/createClass');

var _createClass3 = _interopRequireDefault(_createClass2);

var _possibleConstructorReturn2 = require('babel-runtime/helpers/possibleConstructorReturn');

var _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2);

var _inherits2 = require('babel-runtime/helpers/inherits');

var _inherits3 = _interopRequireDefault(_inherits2);

var _style = require('styled-jsx/style');

var _style2 = _interopRequireDefault(_style);

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _classnames = require('classnames');

var _classnames2 = _interopRequireDefault(_classnames);

var _ChevronDown = require('../Icons/ChevronDown');

var _ChevronDown2 = _interopRequireDefault(_ChevronDown);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var Menu = function (_PureComponent) {
  (0, _inherits3.default)(Menu, _PureComponent);

  function Menu(props) {
    (0, _classCallCheck3.default)(this, Menu);

    var _this = (0, _possibleConstructorReturn3.default)(this, (Menu.__proto__ || (0, _getPrototypeOf2.default)(Menu)).call(this, props));

    _this.state = {
      isOpen: false
    };
    _this._onMouseEnter = _this._onMouseEnter.bind(_this);
    _this._onMouseLeave = _this._onMouseLeave.bind(_this);
    return _this;
  }

  (0, _createClass3.default)(Menu, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          children = _props.children,
          title = _props.title,
          href = _props.href,
          active = _props.active,
          darkMode = _props.darkMode,
          titleId = _props.titleId;
      var isOpen = this.state.isOpen;


      var color = darkMode ? '#ffffff' : '#333333';

      var aProps = {
        href: href,
        id: titleId || ''
      };

      return _react2.default.createElement(
        'li',
        {
          onMouseEnter: this._onMouseEnter,
          onMouseLeave: this._onMouseLeave, className: _style2.default.dynamic([['1456267596', [color, active ? 'bold' : 'normal']]]) + ' ' + 'menu'
        },
        _react2.default.createElement(
          'a',
          (0, _extends3.default)({}, aProps, {
            className: _style2.default.dynamic([['1456267596', [color, active ? 'bold' : 'normal']]]) + ' ' + (aProps.className != null && aProps.className || '')
          }),
          title,
          children && _react2.default.createElement(_ChevronDown2.default, {
            size: 'xsmall',
            color: color })
        ),
        _react2.default.createElement(
          'div',
          {
            className: _style2.default.dynamic([['1456267596', [color, active ? 'bold' : 'normal']]]) + ' ' + ((0, _classnames2.default)('menu__dropdown', {
              'menu__dropdown--opened': isOpen
            }) || '')
          },
          children || null
        ),
        _react2.default.createElement(_style2.default, {
          styleId: '1456267596',
          css: '.menu.__jsx-style-dynamic-selector{position:relative;height:100%;font-size:14px;}.menu.__jsx-style-dynamic-selector:hover{background-color:rgba(51,51,51,0.04);}.menu__dropdown.__jsx-style-dynamic-selector{display:none;border-radius:3px;background:#fff;left:0;-webkit-transform:translateY(0%);-ms-transform:translateY(0%);transform:translateY(0%);box-shadow:0 8px 12px 0 rgba(0,0,0,0.12),0 4px 8px 0 rgba(0,0,0,0.24),inset 0 1px 0 0 #e6e6e6;}.menu__dropdown--opened.__jsx-style-dynamic-selector{position:absolute;display:inline-block;}.menu.__jsx-style-dynamic-selector>a.__jsx-style-dynamic-selector{height:100%;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;padding:23px 16px 22px;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;color:' + color + ';font-weight:' + (active ? 'bold' : 'normal') + ';}.menu.__jsx-style-dynamic-selector>a.__jsx-style-dynamic-selector:hover,.menu.__jsx-style-dynamic-selector>a.__jsx-style-dynamic-selector:focus{-webkit-text-decoration:none;text-decoration:none;}.menu.__jsx-style-dynamic-selector>a.__jsx-style-dynamic-selector span{margin-left:4px;}',
          dynamic: [color, active ? 'bold' : 'normal']
        })
      );
    }
  }, {
    key: '_onMouseEnter',
    value: function _onMouseEnter() {
      var _this2 = this;

      if (this.timeoutOpen) {
        clearTimeout(this.timeoutOpen);
      }
      this.timeoutOpen = setTimeout(function () {
        _this2.setState({
          isOpen: true
        });
      }, 200);
    }
  }, {
    key: '_onMouseLeave',
    value: function _onMouseLeave() {
      if (this.timeoutOpen) {
        clearTimeout(this.timeoutOpen);
      }
      this.setState({
        isOpen: false
      });
    }
  }]);
  return Menu;
}(_react.PureComponent);

Menu.propTypes = {
  title: _propTypes2.default.string.isRequired,
  href: _propTypes2.default.string.isRequired,
  children: _propTypes2.default.node,
  titleId: _propTypes2.default.string,
  darkMode: _propTypes2.default.bool
};

exports.default = Menu;