{"size": 2054, "ext": "js", "max_stars_repo_path": "src/component/dropdown/DropOption.js", "max_stars_repo_name": "zfengfei/react-app-engine", "max_stars_repo_stars_event_min_datetime": "2019-01-08T05:48:17.000Z", "max_stars_repo_stars_event_max_datetime": "2019-01-08T05:48:17.000Z", "max_issues_repo_path": "src/component/dropdown/DropOption.js", "max_issues_repo_name": "zfengfei/react-app-engine", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/component/dropdown/DropOption.js", "max_forks_repo_name": "zfengfei/react-app-engine", "max_forks_repo_forks_event_min_datetime": null, "max_forks_repo_forks_event_max_datetime": null}
{"max_stars_count": 1, "max_issues_count": null, "max_forks_count": null, "avg_line_length": 25.0487804878, "max_line_length": 80, "alphanum_fraction": 0.5384615385}
import React, { Component } from "react";
import PropTypes from "prop-types";
import { Dropdown, Icon, Menu } from "antd";
import DropOptionButton from './DropOptionButton';
import 'antd/dist/antd.css';

class DropOption extends Component {
  loopMenu = data =>
    data.map(item => {
      //let nav = null;
      if (item.items && item.items.length) {
        return (
          <Menu.SubMenu
            key={item.id}
            title={
              <span>
                <Icon type={item.icon} />{" "}
                <span style={item.labelStyle}> {item.label} </span>
              </span>
            }>
            {this.loopMenu(item.items)}
          </Menu.SubMenu>
        );
      } else {
        return <Menu.Item key={item.id}>{this.getMenuContent(item)}</Menu.Item>;
      }
      //return { nav };
    });
  getMenuContent = item => {
    if (item.link && item.icon) {
      return (
        <a href={item.link}>
          <Icon type={item.icon} />
          <span style={item.labelStyle}>{item.label}</span>
        </a>
      );
    } else if (item.link) {
      return (
        <a href={item.link}>
          <span style={item.labelStyle}>{item.label}</span>
        </a>
      );
    } else if (item.icon) {
      return (
        <span>
          <Icon type={item.icon} />
          <span style={item.labelStyle}>{item.label}</span>
        </span>
      );
    } else {
      return <span style={item.labelStyle}>{item.label}</span>;
    }
  };

  render() {
    const {
      onMenuClick,
      menuData,
      dropdownContent,
      style,
      ...dropdownProps
    } = this.props;
    return (
      <Dropdown
        {...dropdownProps}
        overlay={<Menu onClick={onMenuClick}>{this.loopMenu(menuData)}</Menu>}>
        {dropdownContent}
      </Dropdown>
    );
  }
}

DropOption.propTypes = {
  onMenuClick: PropTypes.func,
  menuData: PropTypes.array.isRequired,
  dropdownProps: PropTypes.object,
  dropdownContent: PropTypes.object.isRequired
};

DropOption.Button = DropOptionButton;
export default DropOption;
