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