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.
 
 
 

270 lines
11 KiB

import React, { Component } from "react";
import ChatIcon from "@material-ui/icons/Chat";
import FileTabs from "./FileTabs";
import Gallery from "./Gallery";
import VideocamOutlinedIcon from "@material-ui/icons/VideocamOutlined";
import CallOutlinedIcon from "@material-ui/icons/CallOutlined";
import MoreHorizOutlinedIcon from "@material-ui/icons/MoreHorizOutlined";
import Switch from "@material-ui/core/Switch";
import { withStyles } from "@material-ui/core/styles";
import BlockIcon from '@material-ui/icons/Block';
import KeyboardArrowLeftIcon from '@material-ui/icons/KeyboardArrowLeft';
import KeyboardBackspaceIcon from '@material-ui/icons/KeyboardBackspace';
import CloseIcon from '@material-ui/icons/Close';
import user2 from "../../../assets/images/user2.png";
import "./index.scss";
const maxDesktopSize = 1250;
const maxMobileSize = 650;
const fontSize = {
desktop: {
h1: window.innerWidth > maxDesktopSize ? 20 : window.innerWidth / 70,
h2: window.innerWidth > maxDesktopSize ? 18 : window.innerWidth / 80,
p: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
h3: window.innerWidth > maxDesktopSize ? 16 : window.innerWidth / 85,
span: window.innerWidth > maxDesktopSize ? 14 : window.innerWidth / 85,
},
mobile: {
h1: window.innerWidth > maxMobileSize ? 20 : window.innerWidth / 20,
h2: window.innerWidth > maxMobileSize ? 18 : window.innerWidth / 23,
p: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 30,
h3: window.innerWidth > maxMobileSize ? 16 : window.innerWidth / 25,
span: window.innerWidth > maxMobileSize ? 14 : window.innerWidth / 28,
},
};
export default class ChatInfo extends Component {
constructor(props) {
super(props);
this.state = {
gallery : false,
alarms: false,
buttons: [
{
icon: (
<CallOutlinedIcon
style={{ color: "white", width: 40, height: 40 }}
/>
),
backgroundColor: "#00CC69",
},
{
icon: (
<VideocamOutlinedIcon
style={{ color: "white", width: 40, height: 40 }}
/>
),
backgroundColor: "blue",
},
{
icon: (
<MoreHorizOutlinedIcon
style={{ color: "black", width: 40, height: 40 }}
/>
),
backgroundColor: "grey",
},
],
user: {
profileImages: [
{ id: 0, src: user2 },
{ id: 1, src: user2 },
{ id: 2, src: user2 },
{ id: 3, src: user2 },
],
username: "MohammadReza",
educationalInfo: [
"استاد علوم طبیعی پایه دوازدهم",
"کارشناس ارشد علوم و فنون از دانشگاه تهران",
],
name: "محسن محمدی",
lastAct: "2 دقیقه پیش آنلاین بوده",
bio: "لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ و با استفاده از طراحان گرافیک است. چاپگرها و متون بلکه روزنام",
},
};
}
setGallery = (val) => {
this.setState({
gallery: val,
});
};
handleChange = () => {
this.setState((prevState) => ({
alarms: !prevState.alarms,
}));
};
render() {
const { user, gallery, buttons, alarms } = this.state;
return (
<>
{window.innerWidth > 1000 ? (
<section className="desktop-contact-info d-flex flex-column">
<header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{
this.state.gallery ?
<KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> :
<CloseIcon onClick={ () => this.props.parent.handleDrawerClose()} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
}
</header>
{
!this.state.gallery ?
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img
className="desktop-contact-info__body--profileImage"
src={user.profileImages[0].src}
alt="عکس کاربر"
/>
<h1 style={{ fontSize: fontSize.desktop.h1 }}>{user.name}</h1>
<div className="desktop-contact-info__body--bio d-flex flex-column">
<h2 style={{ fontSize: fontSize.desktop.h2 }}>اطلاعات</h2>
<p style={{ fontSize: fontSize.desktop.p }}>{user.bio}</p>
<h2 style={{ fontSize: fontSize.desktop.h2 }}>مشخصات تحصیلی</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i} style={{ fontSize: fontSize.desktop.p}}>{item}</li>
))}
</ul>
</div>
<div className="desktop-contact-info__body--buttons d-flex justify-content-around mt-3">
{buttons.map((item, i) => (
<li style={{ backgroundColor: item.backgroundColor }} key={i}>
{item.icon}
</li>
))}
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between">
<h3 style={{ fontSize: fontSize.desktop.h3 }}>نام کاربری</h3>
<span style={{ fontSize: fontSize.desktop.span }}>
{user.username}@
</span>
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<div>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>اعلانات</h3>
<span style={{ fontSize: fontSize.desktop.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div>
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
<h3 style={{ fontSize: fontSize.desktop.h3 }}>رسانه,فیلم,عکس</h3>
<KeyboardArrowLeftIcon style={{width : 30, height : 30, color : 'grey'}} />
</div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color : 'red',fontSize: fontSize.desktop.h3 }}>مسدود سازی مخاطب</h3>
<BlockIcon style={{width : 30, height : 30, color : 'red'}} />
</div>
</div> : <FileTabs />
}
</section>
) : null}
{window.innerWidth < 1000 ? (
<section className="desktop-contact-info d-flex flex-column">
<header className="desktop-contact-info__header d-flex align-items-center justify-content-center">
{
this.state.gallery ?
<KeyboardBackspaceIcon onClick={() => this.setState({ gallery: false})} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} /> :
<CloseIcon onClick={ () => window.innerWidth > 1000 ? this.props.parent.handleDrawerClose() : this.props.parent.setState({ page : 'chatroom' })} style={{ cursor: 'pointer', width: 35, height: 35, position: 'absolute', left: 10, top: 10}} />
}
</header>
{
!this.state.gallery ?
<div className="desktop-contact-info__body d-flex flex-column align-items-center">
<img
className="desktop-contact-info__body--profileImage"
src={user.profileImages[0].src}
alt="عکس کاربر"
/>
<h1 style={{ fontSize: fontSize.mobile.h1 }}>{user.name}</h1>
<div className="desktop-contact-info__body--bio d-flex flex-column">
<h2 style={{ fontSize: fontSize.mobile.h2 }}>اطلاعات</h2>
<p style={{ fontSize: fontSize.mobile.p }}>{user.bio}</p>
<h2 style={{ fontSize: fontSize.mobile.h2 }}>مشخصات تحصیلی</h2>
<ul>
{user.educationalInfo.map((item, i) => (
<li key={i} style={{ fontSize: fontSize.mobile.p}}>{item}</li>
))}
</ul>
</div>
<div className="desktop-contact-info__body--buttons d-flex justify-content-around">
{buttons.map((item, i) => (
<li style={{ backgroundColor: item.backgroundColor }} key={i}>
{item.icon}
</li>
))}
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between">
<h3 style={{ fontSize: fontSize.mobile.h3 }}>نام کاربری</h3>
<span style={{ fontSize: fontSize.mobile.span }}>
{user.username}@
</span>
</div>
<div className="desktop-contact-info__body--options d-flex justify-content-between align-items-center">
<div>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>اعلانات</h3>
<span style={{ fontSize: fontSize.mobile.span }}>{alarms ? 'روشن ': 'خاموش'}</span>
</div>
<AntSwitch
checked={alarms}
onChange={() => this.handleChange()}
/>
</div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center" onClick={() => this.setState({ gallery: true })}>
<h3 style={{ fontSize: fontSize.mobile.h3 }}>رسانه,فیلم,عکس</h3>
<KeyboardArrowLeftIcon style={{width : 30, height : 30, color : 'grey'}} />
</div>
<div className="desktop-contact-info__body--options desktop-contact-info__body--options__click d-flex justify-content-between align-items-center">
<h3 style={{ color : 'red',fontSize: fontSize.mobile.h3 }}>مسدود سازی مخاطب</h3>
<BlockIcon style={{width : 30, height : 30, color : 'red'}} />
</div>
</div> : <FileTabs />
}
</section>
) : null}
</>
);
}
}
const AntSwitch = withStyles((theme) => ({
root: {
width: 28,
height: 16,
padding: 0,
display: "flex",
},
switchBase: {
padding: 2,
color: "",
"&$checked": {
transform: "translateX(12px)",
color: theme.palette.common.white,
"& + $track": {
opacity: 1,
backgroundColor: "#00CC69",
borderColor: "#00CC69",
},
},
},
thumb: {
width: 12,
height: 12,
boxShadow: "none",
},
track: {
border: `1px solid ${theme.palette.grey[500]}`,
borderRadius: 16 / 2,
opacity: 1,
backgroundColor: theme.palette.common.white,
},
checked: {},
}))(Switch);