@6thquake/react-material/NavBar/FlatNavBar/FlatItemGroup.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 _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 _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

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

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

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

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

var styles = function styles(theme) {
  return {
    root: {
      float: 'left',
      marginRight: '20px',
      minWidth: '240px'
    },
    title: {
      fontSize: 14,
      fontWeight: 600,
      height: '24px',
      lineHeight: '24px',
      marginBottom: 12
    },
    group: {
      margin: 0,
      padding: 0,
      listStyle: 'none'
    }
  };
};

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

  function FlatItemGroup() {
    (0, _classCallCheck2.default)(this, FlatItemGroup);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(FlatItemGroup).apply(this, arguments));
  }

  (0, _createClass2.default)(FlatItemGroup, [{
    key: "renderNavItem",
    value: function renderNavItem(child, i) {
      var _this$props = this.props,
          eventKey = _this$props.eventKey,
          keyPath = _this$props.keyPath;
      var props = {
        index: i,
        eventKey: child.key || "".concat(eventKey, "-item-").concat(i),
        keyPath: [].concat((0, _toConsumableArray2.default)(keyPath), [eventKey])
      };
      return _react.default.cloneElement(child, props);
    }
  }, {
    key: "render",
    value: function render() {
      var _this = this;

      var _this$props2 = this.props,
          title = _this$props2.title,
          children = _this$props2.children,
          classes = _this$props2.classes,
          onClick = _this$props2.onClick;
      return _react.default.createElement("li", {
        className: classes.root
      }, title ? _react.default.createElement("div", {
        className: classes.title,
        onClick: onClick
      }, title) : null, _react.default.createElement("ul", {
        className: classes.group
      }, _react.default.Children.map(children, function (c, i) {
        return _this.renderNavItem(c, i);
      })));
    }
  }]);
  return FlatItemGroup;
}(_react.Component);

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

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

  /**
   * @ignore
   */
  selectedKeys: _propTypes.default.array,

  /**
   * 标题
   */
  title: _propTypes.default.node
};

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

exports.default = _default;