import { Modal } from 'antd' ; import React , { Component } from 'react' ; import { RouteComponentProps , withRouter } from 'react-router' ; import { formatDate } from '../../utils/DateUtils' ; import { ExclamationCircleOutlined } from '@ant-design/icons' ; import './index.less' ; import LinkButton from '../link-button' ; import { connect } from 'react-redux' ; import { RootState } from 'typesafe-actions' ; import { logout } from '../../redux/actions' ; import { Affix } from "zent" ; const mapStateToProps = ( state ) => ( { headTitle : state . headTitle , user : state . user , } ) ; const mapDispatchToProps = { logout } ; const userSession = JSON . parse ( sessionStorage . getItem ( 'user' ) || '{}' ) ; interface HeaderState { currentTime : string ; dayPictureUrl : string ; weather : string ; } type HeaderProps = RouteComponentProps & ReturnType < typeof mapStateToProps > & typeof mapDispatchToProps ; class Header extends Component < HeaderProps , HeaderState > { timerId : NodeJS . Timeout | null = null ; user = this . props . user ; constructor ( props ) { super ( props ) ; this . state = { currentTime : formatDate ( Date . now ( ) ) , dayPictureUrl : '' , weather : '' , } ; } componentDidMount ( ) { this . getNowTime ( ) ; } private getNowTime ( ) { this . timerId = setInterval ( ( ) => { this . setState ( { currentTime : formatDate ( Date . now ( ) ) , } ) ; } , 1000 ) ; } componentWillUnmount ( ) { if ( this . timerId !== null ) { clearInterval ( this . timerId ) ; } } private logout ( ) { Modal . confirm ( { content : '是否退出' , icon : < ExclamationCircleOutlined />, okText : '确认' , cancelText : '取消' , onOk : ( ) => { sessionStorage . removeItem ( 'user' ) ; this . props . history . push ( '/' ) ; } , onCancel : ( ) => { console . log ( 'cancel' ) ; } , } ) ; } render ( ) { return ( < Affix offsetTop = { 0 } > < div className = "header" > < div className = "header-top" > < span > 欢迎 ， { userSession ? userSession . name : '' } < /span> < LinkButton onClick = { this . logout . bind ( this ) } > 退出 < /LinkButton> < /div> { } < /div> < /Affix>); } } export default connect ( mapStateToProps , mapDispatchToProps ) ( withRouter ( Header ) ) ;