import React, {Component} from 'react'
|
import PropTypes from 'prop-types'
|
import { is, fromJS } from 'immutable'
|
import { connect } from 'react-redux'
|
import { withRouter } from 'react-router-dom'
|
import {Dropdown, Menu, Icon, Modal, Tooltip, Button } from 'antd'
|
|
import { logout } from '@/store/action'
|
import zhCN from '@/locales/zh-CN/mob.js'
|
import enUS from '@/locales/en-US/mob.js'
|
import avatar from '@/assets/img/avatar.jpg'
|
import './index.scss'
|
|
const { confirm } = Modal
|
|
class MobHeader extends Component {
|
static propTpyes = {
|
saveIng: PropTypes.any,
|
triggerSave: PropTypes.func,
|
closeView: PropTypes.func
|
}
|
|
state = {
|
dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS,
|
logourl: window.GLOB.mainlogo,
|
avatar: sessionStorage.getItem('CloudAvatar') || avatar,
|
userName: sessionStorage.getItem('CloudUserName')
|
}
|
|
logout = () => {
|
// 退出登录
|
let _this = this
|
confirm({
|
title: this.state.dict['mob.logout.hint'],
|
content: '',
|
okText: this.state.dict['mob.confirm'],
|
cancelText: this.state.dict['mob.cancel'],
|
onOk() {
|
sessionStorage.clear()
|
_this.props.logout()
|
_this.props.history.replace('/login')
|
},
|
onCancel() {}
|
})
|
}
|
|
shouldComponentUpdate (nextProps, nextState) {
|
return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
}
|
|
// componentDidMount () {
|
// this.getImage()
|
// }
|
|
// getImage = () => {
|
// const { logourl } = this.state
|
// const _this = this
|
|
// let xhr = new XMLHttpRequest()
|
// xhr.open('get', logourl, true)
|
// xhr.responseType = 'blob'
|
// xhr.onload = function () {
|
// if (this.status === 200) {
|
// // document.getElementById(imgId).src = URL.createObjectURL(this.response)
|
// _this.setState({
|
// logourl: URL.createObjectURL(this.response)
|
// })
|
// }
|
// }
|
// xhr.send(null)
|
// }
|
|
render () {
|
|
return (
|
<header className="mob-header-container">
|
<div className="header-logo"><img src={this.state.logourl} alt=""/></div>
|
<Menu
|
mode="inline"
|
theme="dark"
|
inlineCollapsed={this.state.collapsed}
|
>
|
<Menu.Item key="1">
|
<Tooltip placement="bottom" title="关闭">
|
<Icon type="close" onClick={this.props.closeView} />
|
</Tooltip>
|
</Menu.Item>
|
<Menu.Item key="2">
|
<Tooltip placement="bottom" title="保存">
|
<Button icon="save" loading={this.props.saveIng} onClick={this.props.triggerSave}></Button>
|
</Tooltip>
|
</Menu.Item>
|
</Menu>
|
<Dropdown className="header-setting" overlay={
|
<Menu>
|
<Menu.Item key="2" onClick={this.logout}>{this.state.dict['mob.logout']}</Menu.Item>
|
</Menu>
|
}>
|
<div>
|
<img src={this.state.avatar} alt=""/>
|
<span>
|
<span className="username">{this.state.userName}</span> <Icon type="down" />
|
</span>
|
</div>
|
</Dropdown>
|
</header>
|
)
|
}
|
}
|
|
const mapStateToProps = () => {
|
return {}
|
}
|
|
const mapDispatchToProps = (dispatch) => {
|
return {
|
logout: () => dispatch(logout())
|
}
|
}
|
|
export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobHeader))
|
