@6thquake/react-material/NavBar/FlatNavBar/FlatNavItem.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _styles = require("../../styles");

var _propTypes = _interopRequireDefault(require("prop-types"));

var _classnames = _interopRequireDefault(require("classnames"));

var styles = function styles(theme) {
  return {
    root: {
      fontSize: 12,
      lineHeight: '24px',
      marginBottom: '4px',
      color: '#c3c5c6',
      cursor: 'pointer',
      '&:hover': {
        color: theme.palette.primary.main
      }
    },
    lightRoot: {
      color: '#333'
    },
    active: {
      color: theme.palette.primary.main
    }
  };
};

var NavBarItem =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(NavBarItem, _Component);

  function NavBarItem() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, NavBarItem);

    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
      args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(NavBarItem)).call.apply(_getPrototypeOf2, [this].concat(args)));

    _this.onClick = function (e) {
      var _this$context = _this.context,
          onClick = _this$context.onClick,
          hiddenSubContainer = _this$context.hiddenSubContainer;
      var _this$props = _this.props,
          eventKey = _this$props.eventKey,
          keyPath = _this$props.keyPath;

      if (onClick) {
        onClick({
          key: eventKey,
          keyPath: [].concat((0, _toConsumableArray2.default)(keyPath), [eventKey])
        }, (0, _assertThisInitialized2.default)(_this), e);
      }

      hiddenSubContainer();

      _this.props.onClick(e);
    };

    return _this;
  }

  (0, _createClass2.default)(NavBarItem, [{
    key: "render",
    value: function render() {
      var _classNames,
          _this2 = this;

      var _this$props2 = this.props,
          children = _this$props2.children,
          eventKey = _this$props2.eventKey,
          classes = _this$props2.classes,
          keyPath = _this$props2.keyPath;
      var theme = this.context.theme;
      var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.lightRoot, theme === 'light'), (0, _defineProperty2.default)(_classNames, classes.active, this.context.selectedKeys.indexOf(eventKey) !== -1), _classNames), classes.root);
      return _react.default.createElement("li", {
        key: eventKey,
        className: className,
        onClick: function onClick(e) {
          return _this2.onClick(e);
        }
      }, children);
    }
  }]);
  return NavBarItem;
}(_react.Component);

NavBarItem.propTypes = {
  /**
   * 唯一标志
   */
  key: _propTypes.default.string,

  /**
   * 点击 NavBarItem的回掉函数
   */
  onClick: _propTypes.default.func,

  /**
   * @ignore
   */
  selectedKeys: _propTypes.default.array
};
NavBarItem.defaultProps = {
  onClick: function onClick(e) {}
};
NavBarItem.contextTypes = {
  onClick: _propTypes.default.func,
  hiddenSubContainer: _propTypes.default.func,
  theme: _propTypes.default.string,
  selectedKeys: _propTypes.default.array
};

var _default = (0, _styles.withStyles)(styles)(NavBarItem);

exports.default = _default;