You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
107 lines
3.1 KiB
107 lines
3.1 KiB
import React, { Component } from "react"; |
|
import MoreVertIcon from "@material-ui/icons/MoreVert"; |
|
import ArrowForwardIcon from "@material-ui/icons/ArrowForward"; |
|
import Menu from "@material-ui/core/Menu"; |
|
import MenuItem from "@material-ui/core/MenuItem"; |
|
import StatusAvatar from "./Avatar/index.js"; |
|
import { connect } from "react-redux"; |
|
|
|
import "./index.scss"; |
|
class Header extends Component { |
|
constructor(props) { |
|
super(props); |
|
this.state = { |
|
anchorEl: null, |
|
}; |
|
} |
|
|
|
handleClick = (event) => { |
|
this.setState({ |
|
anchorEl: event.currentTarget, |
|
}); |
|
}; |
|
|
|
handleClose = () => { |
|
this.setState({ |
|
anchorEl: null, |
|
}); |
|
}; |
|
|
|
back = () => { |
|
window.history.back(); |
|
}; |
|
render() { |
|
const { page, setPage, chatInfo, parent } = this.props; |
|
const { anchorEl } = this.state; |
|
return ( |
|
<div className="chat-header d-flex align-items-center"> |
|
<div className="d-flex align-items-center"> |
|
{window.innerWidth < 1000 ? ( |
|
<ArrowForwardIcon |
|
onClick={() => |
|
page === "chatroom" ? this.back() : setPage("chatroom") |
|
} |
|
style={{ color: "grey", width: 29, height: 29, marginTop: 4 }} |
|
/> |
|
) : null} |
|
|
|
<div |
|
onClick={() => |
|
window.innerWidth < 1000 |
|
? setPage("info") |
|
: parent.handleDrawerOpen() |
|
} |
|
className="chat-header__info d-flex mr-1" |
|
> |
|
<StatusAvatar /> |
|
<div className="d-flex flex-column mr-1"> |
|
<h1>{chatInfo ? chatInfo.title : null}</h1> |
|
<span>{chatInfo ? chatInfo.subTitle : null}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div> |
|
<div className="d-flex align-items-center"> |
|
<MoreVertIcon |
|
aria-controls="simple-menu" |
|
aria-haspopup="true" |
|
onClick={this.handleClick} |
|
style={{ color: "grey", width: 32, height: 32 }} |
|
/> |
|
{/* <VideocamIcon style={{ color: 'white', width: 30, height: 30, marginLeft: 8 }} /> |
|
<CallIcon style={{ color: 'white', width: 27, height: 27, marginLeft: 17 }} /> */} |
|
</div> |
|
<Menu |
|
id="simple-menu" |
|
anchorEl={anchorEl} |
|
keepMounted |
|
open={Boolean(anchorEl)} |
|
onClose={() => this.handleClose()} |
|
className="fontLight rtl" |
|
> |
|
<MenuItem |
|
className="fontLight menu" |
|
onClick={() => this.handleClose()} |
|
> |
|
پروفایل |
|
</MenuItem> |
|
<MenuItem |
|
className="fontLight menu" |
|
onClick={() => this.handleClose()} |
|
> |
|
حساب کاربری |
|
</MenuItem> |
|
<MenuItem |
|
className="fontLight menu" |
|
onClick={() => this.handleClose()} |
|
> |
|
خروج |
|
</MenuItem> |
|
</Menu> |
|
</div> |
|
</div> |
|
); |
|
} |
|
} |
|
|
|
export default connect((state) => ({ chatInfo: state.chat.info }), {})(Header);
|
|
|