header.js

import React from 'react';
import PropTypes from 'prop-types';
import { Menu, Breadcrumb, Icon } from 'antd';
import { connect } from 'dva';
import { Link } from 'dva/router';
import { fullPath } from '../../utils/helper';
import styles from './header.less';

const MenuItem = Menu.Item;
const SubMenu = Menu.SubMenu;

class HeaderPane extends React.Component {

  componentDidMount() {
    const { dispatch } = this.props;
    dispatch({ type: 'main/fetchUser' });
    dispatch({ type: 'main/fetchDomain' });
    dispatch({ type: 'main/fetchDomains' });
  }
  render() {
    const { dispatch, user, domain, domainList, routes, params } = this.props;
    const userTitle = (
      <span>
        <Icon type="user" />
        { user }
      </span>
    );
    const domainTitle = (
      <span>
        <Icon type="home" />
        { domain }
      </span>
    );
    const onClick = ({ keyPath }) => {
      if (keyPath[1] === 'user' && keyPath[0] === 'logout') {
        dispatch({ type: 'main/logout' });
      } else if (keyPath[1] === 'domain') {
        dispatch({ type: 'main/switchDomain', payload: keyPath[0] });
      }
    };
    const breadsProps = {
      className: styles.breads,
      routes,
      params,
      itemRender(route, _params, _routes, paths) {
        if (!paths || !paths.length) {
          return null;
        }
        if (paths.length === 1) {
          return <Icon type="home" />;
        }
        const bread = route.name ? route.name : route.path;
        return <Link to={fullPath(`/${paths.join('/')}`)}>{ bread }</Link>;
      },
    };
    const menuProps = {
      className: styles.menu,
      mode: 'horizontal',
      theme: 'light',
      selectable: false,
      onClick,
    };
    return (
      <div className={styles.board}>
        <Breadcrumb {...breadsProps} />
        <Menu {...menuProps}>
          <SubMenu title={userTitle} key="user" >
            <MenuItem key="logout">
              <span>
                <Icon type="logout" />
                登出
              </span>
            </MenuItem>
          </SubMenu>
          <SubMenu title={domainTitle} key="domain">
            {
              domainList.map(dm => (
                <MenuItem key={dm.path}>
                  { dm.name }
                </MenuItem>
              ))
            }
          </SubMenu>
        </Menu>
      </div>
    );
  }
}

HeaderPane.propTypes = {
  dispatch: PropTypes.func,
  user: PropTypes.string,
  domain: PropTypes.string,
  domainList: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number,
    name: PropTypes.string,
  })),
};

const mapStateToProps = ({ main }) => {
  return {
    user: main.user,
    domain: main.domain,
    domainList: main.domainList,
  };
};

export default connect(mapStateToProps)(HeaderPane);