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

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);