{"size": 2871, "ext": "js", "max_stars_repo_path": "src/components/GlobalHeader/index.js", "max_stars_repo_name": "Log-Loss/hinet-front", "max_stars_repo_stars_event_min_datetime": "2018-03-06T06:00:45.000Z", "max_stars_repo_stars_event_max_datetime": "2021-04-27T20:49:53.000Z", "max_issues_repo_path": "src/components/GlobalHeader/index.js", "max_issues_repo_name": "Log-Loss/hinet-front", "max_issues_repo_issues_event_min_datetime": null, "max_issues_repo_issues_event_max_datetime": null, "max_forks_repo_path": "src/components/GlobalHeader/index.js", "max_forks_repo_name": "Log-Loss/hinet-front", "max_forks_repo_forks_event_min_datetime": "2018-03-06T08:18:36.000Z", "max_forks_repo_forks_event_max_datetime": "2021-05-27T08:52:33.000Z"}
{"max_stars_count": 39, "max_issues_count": null, "max_forks_count": 3, "avg_line_length": 30.2210526316, "max_line_length": 109, "alphanum_fraction": 0.5363984674}
import React, {PureComponent} from 'react';
import {Layout, Menu, Icon, Spin, Tag, Dropdown, Avatar, Divider, Tooltip} from 'antd';

import Debounce from 'lodash-decorators/debounce';
import {Link, routerRedux} from 'dva/router';
import styles from './index.less';

const {Header} = Layout;

export default class GlobalHeader extends PureComponent {
  componentWillUnmount() {
    this.triggerResizeEvent.cancel();
  }

  toggle = () => {
    const {collapsed, onCollapse} = this.props;
    onCollapse(!collapsed);
    this.triggerResizeEvent();
  }

  @Debounce(600)
  triggerResizeEvent() { // eslint-disable-line
    const event = document.createEvent('HTMLEvents');
    event.initEvent('resize', true, false);
    window.dispatchEvent(event);
  }

  render() {
    const {
      currentUser, collapsed, isMobile, logo,
      onMenuClick, dispatch
    } = this.props;
    const menu = (
      <Menu className={styles.menu} selectedKeys={[]} onClick={onMenuClick}>
        <Menu.Item key="logout"><Icon type="logout"/>Logout</Menu.Item>
      </Menu>
    );

    return (
      <Header className={styles.header}>
        {isMobile && (
          [
            (
              <Link to="/" className={styles.logo} key="logo">
                <img src={logo} alt="logo" width="32"/>
              </Link>
            ),
            <Divider type="vertical" key="line"/>,
          ]
        )}
        <Icon
          className={styles.trigger}
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={this.toggle}
        />


        <div className={styles.right}>
          <Tooltip placement="bottom" title="home">
            <Icon
              onClick={()=>dispatch(routerRedux.push('/hello'))}
              className={styles.trigger}
              type="home"
            />
          </Tooltip>
          <Tooltip placement="bottom" title="community">
            <Icon
              onClick={()=>dispatch(routerRedux.push('community'))}
              className={styles.trigger}
              type="team"
            />
          </Tooltip>
          <Tooltip placement="bottom" title="console">
            <Icon
              onClick={()=>dispatch(routerRedux.push('/'))}
              className={styles.trigger}
              type="code-o"
            />
          </Tooltip>
          {currentUser.id ? (
            <Dropdown overlay={menu}>
              <span className={`${styles.action} ${styles.account}`}>
                <Avatar
              style={{color: '#e2e4f5', backgroundColor: '#1e75fd', verticalAlign: 'middle', marginRight: 8}}
                size="small">{currentUser.email.charAt(0)}</Avatar>
                <span className={styles.name}>{currentUser.email}</span>
              </span>
            </Dropdown>
          ) : <Spin size="small" style={{marginLeft: 8}}/>}
        </div>
      </Header>
    );
  }
}
