yapi/client/components/Header/Header.js

101 lines
2.4 KiB
JavaScript
Raw Normal View History

2017-07-10 11:50:56 +08:00
import './Header.scss'
2017-07-07 17:26:31 +08:00
import React, { Component } from 'react'
2017-07-12 16:27:06 +08:00
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
2017-07-10 21:29:03 +08:00
import { Link } from 'react-router-dom'
2017-07-17 21:11:58 +08:00
import { Icon, Layout, Menu} from 'antd'
2017-07-13 15:53:25 +08:00
import loginTypeAction from '../../actions/login';
2017-07-12 16:27:06 +08:00
2017-07-17 21:11:58 +08:00
const { Header } = Layout;
2017-07-12 16:27:06 +08:00
const ToolUser = (props)=> (
<ul>
2017-07-17 21:11:58 +08:00
<li><Icon type="question-circle-o" />帮助</li>
2017-07-12 16:27:06 +08:00
<li><Icon type="user" />{ props.user }</li>
<li>退出</li>
</ul>
);
ToolUser.propTypes={
user:PropTypes.string,
msg:PropTypes.string
2017-07-12 16:27:06 +08:00
};
const ToolGuest = (props)=> (
<ul>
<li onClick={e => props.onLogin(e)}><Link to={`/Login`}>登录</Link></li>
<li onClick={e => props.onReg(e)}><Link to={`/Login`}>注册</Link></li>
</ul>
);
ToolGuest.propTypes={
onLogin:PropTypes.func,
onReg:PropTypes.func
}
2017-07-07 17:26:31 +08:00
2017-07-17 21:11:58 +08:00
class HeaderCom extends Component {
2017-07-07 17:26:31 +08:00
constructor(props) {
2017-07-12 16:27:06 +08:00
super(props);
}
handleLogin = (e) => {
e.preventDefault();
this.props.loginTypeAction("1");
}
handleReg = (e)=>{
e.preventDefault();
this.props.loginTypeAction("2");
2017-07-07 17:26:31 +08:00
}
render () {
2017-07-12 16:27:06 +08:00
const { login, user, msg } = this.props;
2017-07-07 17:26:31 +08:00
return (
<acticle className="header-box">
2017-07-17 21:11:58 +08:00
<Layout className="'layout">
<Header>
<div className="content">
<div className="logo">
YAPI
</div>
<Menu
mode="horizontal"
className="nav-toolbar"
theme="dark"
style={{ lineHeight : '.64rem'}}
defaultSelectedKeys={['1']}
>
<Menu.Item key="1">
<Link to={`/`}>首页</Link>
</Menu.Item>
<Menu.Item key="2">
<Link to={`/ProjectGroups`}>分组</Link>
</Menu.Item>
<Menu.Item key="3">
文档
</Menu.Item>
</Menu>
<div className="user-toolbar">
{login?<ToolUser user={user} msg={msg}/>:''}
</div>
</div>
</Header>
</Layout>
2017-07-07 17:26:31 +08:00
</acticle>
)
}
2017-07-06 01:09:33 +08:00
}
2017-07-07 17:26:31 +08:00
2017-07-17 21:11:58 +08:00
HeaderCom.propTypes={
user: PropTypes.string,
msg: PropTypes.string,
login:PropTypes.bool,
loginTypeAction:PropTypes.func
2017-07-12 16:27:06 +08:00
};
export default connect(
(state) => {
return{
user: state.login.userName,
msg: "暂无消息",
login:state.login.isLogin
}
},
{loginTypeAction}
2017-07-17 21:11:58 +08:00
)(HeaderCom)
2017-07-12 16:27:06 +08:00