| | |
| | | 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 MainLogo from '@/assets/img/main-logo.png' |
| | | import './index.scss' |
| | | |
| | | const { confirm } = Modal |
| | | |
| | | class MobHeader extends Component { |
| | | static propTpyes = { |
| | | view: PropTypes.string, |
| | | saveIng: PropTypes.any, |
| | | triggerSave: PropTypes.func, |
| | | jumpToManage: PropTypes.func |
| | | } |
| | | |
| | | state = { |
| | | dict: localStorage.getItem('lang') !== 'en-US' ? zhCN : enUS, |
| | | avatar: sessionStorage.getItem('CloudAvatar') || avatar, |
| | | userName: sessionStorage.getItem('CloudUserName') |
| | | } |
| | | |
| | | logout = () => { |
| | | // 退出登录 |
| | | let _this = this |
| | | confirm({ |
| | | title: this.state.dict['mob.logout.hint'], |
| | | content: '', |
| | | 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)) |
| | | } |
| | | |
| | | render () { |
| | | const { view } = this.props |
| | | |
| | | return ( |
| | | <header className="mob-header-container"> |
| | | <div className="header-logo"><img src={MainLogo} alt=""/></div> |
| | | {view === 'manage' ? |
| | | <div className="mob-manage-title"> |
| | | 应用管理 |
| | | </div> :null |
| | | } |
| | | {view === 'design' ? |
| | | <Menu |
| | | mode="inline" |
| | | theme="dark" |
| | | inlineCollapsed={this.state.collapsed} |
| | | > |
| | | <Menu.Item key="1"> |
| | | <Tooltip placement="bottom" title="返回应用管理"> |
| | | <Icon type="arrow-left" onClick={this.props.jumpToManage} /> |
| | | </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> : null |
| | | } |
| | | <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> |
| | | <div className="header-user"> |
| | | <img src={this.state.avatar} alt=""/> |
| | | <span> |
| | | <span className="username">{this.state.userName}</span> |
| | | </span> |
| | | </div> |
| | | </header> |
| | | ) |
| | | } |
| | | } |
| | | |
| | | const mapStateToProps = () => { |
| | | return {} |
| | | } |
| | | |
| | | const mapDispatchToProps = (dispatch) => { |
| | | return { |
| | | logout: () => dispatch(logout()) |
| | | } |
| | | } |
| | | |
| | | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(MobHeader)) |
| | | export default MobHeader |