yapi/client/components/Header/Header.js

198 lines
5.1 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-23 18:24:46 +08:00
import { Icon, Layout, Menu, Dropdown, message } from 'antd'
import { checkLoginState, logoutActions, loginTypeAction} from '../../actions/login'
2017-07-20 21:30:35 +08:00
import { changeMenuItem } from '../../actions/menu'
import { withRouter } from 'react-router';
import Srch from './Search/Search'
2017-07-17 21:11:58 +08:00
const { Header } = Layout;
const MenuUser = (props) => (
2017-07-26 16:06:54 +08:00
<Menu
style={{
"boxShadow":"0 1px 6px rgba(0, 0, 0, 0.3)"
}}
>
<Menu.Item key="0" style={{"fontSize": ".14rem"}}>
<Link to={`/user/profile/${props.uid}`} onClick={props.relieveLink}><Icon type="user"/>个人中心</Link>
</Menu.Item>
2017-07-26 16:06:54 +08:00
<Menu.Item key="1" style={{"fontSize": ".14rem"}}>
<a onClick={props.logout}><Icon type="logout" />退出</a>
</Menu.Item>
</Menu>
);
MenuUser.propTypes={
user:PropTypes.string,
msg:PropTypes.string,
uid: PropTypes.number,
relieveLink:PropTypes.func,
logout:PropTypes.func
}
2017-07-12 16:27:06 +08:00
const ToolUser = (props)=> (
<ul>
<li className="toolbar-li">
<Srch groupList={props.groupList}/>
</li>
<li className="toolbar-li">
2017-07-26 16:06:54 +08:00
<Dropdown
placement = "bottomRight"
overlay={
<MenuUser
user={props.user}
msg={props.msg}
uid={props.uid}
relieveLink={props.relieveLink}
logout={props.logout}
/>
}>
<a className="dropdown-link">
2017-07-26 16:06:54 +08:00
<Icon type="solution" />
</a>
</Dropdown>
</li>
2017-07-12 16:27:06 +08:00
</ul>
);
ToolUser.propTypes={
user:PropTypes.string,
2017-07-18 18:25:53 +08:00
msg:PropTypes.string,
uid: PropTypes.number,
2017-07-19 10:38:29 +08:00
relieveLink:PropTypes.func,
logout:PropTypes.func,
groupList: PropTypes.array
2017-07-12 16:27:06 +08:00
};
@connect(
(state) => {
return{
user: state.login.userName,
uid: state.login.uid,
msg: null,
login:state.login.isLogin,
curKey: state.menu.curKey
}
},
{
loginTypeAction,
logoutActions,
checkLoginState,
changeMenuItem
}
)
2017-07-19 14:08:24 +08:00
@withRouter
export default class HeaderCom extends Component {
2017-07-07 17:26:31 +08:00
constructor(props) {
2017-07-12 16:27:06 +08:00
super(props);
2017-07-18 18:25:53 +08:00
}
2017-07-19 10:38:29 +08:00
static propTypes ={
router: PropTypes.object,
2017-07-19 10:38:29 +08:00
user: PropTypes.string,
msg: PropTypes.string,
uid: PropTypes.number,
2017-07-19 10:38:29 +08:00
login:PropTypes.bool,
2017-07-20 21:30:35 +08:00
curKey:PropTypes.string,
2017-07-19 10:38:29 +08:00
relieveLink:PropTypes.func,
logoutActions:PropTypes.func,
checkLoginState:PropTypes.func,
loginTypeAction:PropTypes.func,
2017-07-20 21:30:35 +08:00
changeMenuItem:PropTypes.func,
history: PropTypes.object,
location: PropTypes.object
2017-07-19 10:38:29 +08:00
}
2017-07-18 18:25:53 +08:00
linkTo = (e) =>{
2017-07-20 21:30:35 +08:00
this.props.changeMenuItem(e.key);
2017-07-26 17:22:09 +08:00
if(!this.props.login){
message.info('请先登录',1);
}
2017-07-18 18:25:53 +08:00
}
2017-07-19 10:38:29 +08:00
relieveLink = () => {
2017-07-20 21:30:35 +08:00
this.props.changeMenuItem("");
}
2017-07-19 10:38:29 +08:00
logout = (e) => {
e.preventDefault();
2017-07-23 18:24:46 +08:00
this.props.logoutActions().then((res) => {
if (res.payload.data.errcode == 0) {
this.props.history.push('/');
this.props.changeMenuItem("/");
message.success('退出成功! ');
} else {
message.error(res.payload.data.errmsg);
}
}).catch((err) => {
message.error(err);
});
2017-07-19 10:38:29 +08:00
}
handleLogin = (e) => {
e.preventDefault();
this.props.loginTypeAction("1");
}
handleReg = (e)=>{
e.preventDefault();
this.props.loginTypeAction("2");
2017-07-07 17:26:31 +08:00
}
checkLoginState = () => {
2017-07-23 18:24:46 +08:00
this.props.checkLoginState.then((res) => {
if (res.payload.data.errcode !== 0) {
this.props.history.push('/');
}
}).catch((err) => {
console.log(err);
})
}
2017-07-07 17:26:31 +08:00
render () {
2017-07-20 21:30:35 +08:00
const { login, user, msg, uid, curKey } = this.props;
2017-07-27 10:59:24 +08:00
const headerImgStyle = login?{}:{
'background': 'url(./image/header-bg-img.jpg) no-repeat',
'backgroundSize':'100% 100%'
2017-07-27 10:59:24 +08:00
};
const headerShadeStyle = login? {
'padding':'0'
}: {
'background': 'linear-gradient(to bottom,rgba(0,0,0,0.6),rgba(0,0,0,0.5))',
'padding':'0'
2017-07-27 10:59:24 +08:00
};
2017-07-07 17:26:31 +08:00
return (
2017-07-27 10:59:24 +08:00
<acticle className={`header-box`} style={headerImgStyle}>
<Header style={headerShadeStyle}>
2017-07-26 16:06:54 +08:00
<div className="content">
<div className="logo">
<Link to="/" onClick={this.relieveLink}>YAPI</Link>
</div>
<Menu
mode="horizontal"
className="nav-toolbar"
theme="dark"
style={{
lineHeight : '.64rem',
backgroundColor:"transparent",
borderColor:"transparent"
}}
onClick={this.linkTo}
selectedKeys={[curKey]}
>
<Menu.Item key="/group">
<Link to="/group">项目广场</Link>
</Menu.Item>
</Menu>
<div className="user-toolbar">
{login?
<ToolUser
user = { user }
msg = { msg }
uid = { uid }
relieveLink = { this.relieveLink }
logout = { this.logout }
/>
:""}
2017-07-17 21:11:58 +08:00
</div>
2017-07-26 16:06:54 +08:00
</div>
</Header>
2017-07-07 17:26:31 +08:00
</acticle>
)
}
}