hc-components-test/src/components/header/index.jsx

基于react的通用组件库

import React from 'react';
import PropTypes from 'prop-types';

import Layout from 'antd/lib/layout';
import Menu from 'antd/lib/menu';
import Icon from 'antd/lib/icon';
import Dropdown from 'antd/lib/dropdown';
import Spin from 'antd/lib/spin';
import Avatar from 'antd/lib/avatar';

import {HeaderSearch} from '../headerSearch';

import './index.less';

import localeContext from '../../localeContext';

@localeContext('DataSet', {
  searchPlaceholder: '站内搜索',
  profile: '个人中心',
  setting: '设置',
  logout: '退出登录'
})
export class Header extends React.PureComponent {
  static propTypes = {
    collapsed: PropTypes.bool,
    onCollapse: PropTypes.func,
    avatar: PropTypes.string,
    nick: PropTypes.string,
    noSider: PropTypes.bool,
    loading: PropTypes.element,
    theme: PropTypes.string
  }

  constructor(props) {
    super(props);
  }

  toggleClick() {
    this
      .props
      .onCollapse(!this.props.collapsed);

    this._resizeTimer = setTimeout(() => {
      const event = document.createEvent('HTMLEvents');
      event.initEvent('resize', true, false);
      window.dispatchEvent(event);
    }, 600);
  }

  componentWillUnmount() {
    clearTimeout(this._resizeTimer);
  }

  handleSearch() {}

  render() {
    const {loading, collapsed, nick, noSider, avatar, theme} = this.props;
    const IMenu = this.props.Menu;
    const {route, routes, subMenus, menu, brand, Link, orderKeys, getResolvePath} = this.props;
    return (
      <Layout.Header className={'j-com-header ' + (theme ? 'j-com-header-' + theme : '')}>
        {loading}
        {noSider ? null : (<Icon
          className='j-header-trigger'
          type={collapsed ? 'menu-unfold' : 'menu-fold'}
          onClick={this.toggleClick.bind(this)} />)}
        <div className='j-header-right' style={{display: nick === false ? 'none' : ''}}>
          <HeaderSearch
            className='j-header-action j-header-search'
            placeholder={this.getLocale('searchPlaceholder')}
            dataSource={[]}
            onSearch={this.handleSearch.bind(this)}
            onPressEnter={this.handleSearch.bind(this)} /> {nick ? (
            <Dropdown
              overlay={(
                <Menu className='j-header-menu' selectedKeys={[]}>
                  <Menu.Item disabled><Icon type="user" />{this.getLocale('profile')}</Menu.Item>
                  <Menu.Item disabled><Icon type="setting" />{this.getLocale('setting')}</Menu.Item>
                  <Menu.Divider />
                  <Menu.Item key="logout"><Icon type="logout" />{this.getLocale('logout')}</Menu.Item>
                </Menu>
              )}>
              <span className='j-header-action j-header-account'>
                <Avatar size="small" className='j-header-avatar' src={avatar} /> {nick}
              </span>
            </Dropdown>
          ) : (<Spin size="small" style={{marginLeft: 8}} />)}
        </div>
        {IMenu ? (<IMenu style={{marginLeft: noSider ? 70 : 0}} route={route} routes={routes} subMenus={subMenus} menu={menu} orderKeys={orderKeys} Link={Link} getResolvePath={getResolvePath} brand={brand} />) : null}
      </Layout.Header>
    );
  }
}