Reza_ashrafi
/
ChatPWA
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

reza added document uploading

Browse Source
front
Reza_ashrafi 4 years ago
parent 72ff8b2ba8
commit f10611c651
7 changed files with 168 additions and 30 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 70
      src/views/ChatRoom/Body/Body.js
  2. 42
      src/views/ChatRoom/Body/Body.scss
  3. 4
      src/views/ChatRoom/Body/ChatInputs/ChatInput.js
  4. 55
      src/views/ChatRoom/Body/Message/Message.js
  5. 23
      src/views/ChatRoom/Body/Message/Message.scss
  6. 2
      src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
  7. 2
      src/views/ChatRoom/Header/Header.scss

70
src/views/ChatRoom/Body/Body.js
Unescape View File

@ -158,7 +158,7 @@ export default class Body extends Component {
})
}
addFile = (e) => {
addFile = async (e) => {
if(e.target.files[0].type === 'image/apng' || e.target.files[0].type === 'image/avif' || e.target.files[0].type === 'image/gif' || e.target.files[0].type === 'image/jpeg' || e.target.files[0].type === 'image/png' || e.target.files[0].type === 'image/svg+xml' || e.target.files[0].type === 'image/webp'){
this.setState({
image : URL.createObjectURL(e.target.files[0]),
@ -187,8 +187,12 @@ export default class Body extends Component {
}
else{
this.setState({
file: e.target.files[0],
})
image : null,
file : 'fill',
video : null,
music : null,
document : { data : URL.createObjectURL(e.target.files[0]), name : e.target.files[0].name },
});
}
}
@ -324,6 +328,44 @@ export default class Body extends Component {
message : ''
})
}
else if(document !== null){
this.setState(prevState => ({
data : {...prevState.data,messages : [...prevState.data.messages,
{
id: 'm8',
text: prevState.message,
voice : null,
createdAt: now.toString(),
image : null,
video : null,
document : document,
music : null,
user: {
id: 'u1',
name: 'Vadim',
}
}
]}
,
}));
this.setState({
file:null,
document : null,
message : ''
})
}
}
cancelSendFile = () => {
this.setState({
file:null,
document : null,
message : '',
image : null,
video : null,
voice: null,
music : null,
})
}
componentDidMount(){
@ -340,10 +382,14 @@ export default class Body extends Component {
render(){
return (
<div className="chat-body d-flex flex-column">
<div className="chat-body__content d-flex flex-column" id="chatroom" style={{overflowY : this.state.file !== null ? 'hidden' : 'scroll'}}>
<div className="chat-body__content d-flex flex-column" id="chatroom"
style={{
overflowY : this.state.file !== null ? 'hidden' : 'scroll',
}}
>
{
this.state.data.messages.map(item => this.state.file === null ? (
<Message key={item.id} file={this.state.image} message={item} user1={this.state.data.users[0]} user2={this.state.data.users[1]} />
this.state.data.messages.map(item => this.state.image === null && this.state.music === null && this.state.video === null ? (
<Message key={item.id} file={this.state.image} document={this.state.document} message={item} user1={this.state.data.users[0]} user2={this.state.data.users[1]} />
) : null)
}
{
@ -367,6 +413,18 @@ export default class Body extends Component {
/>
</div> : null
}
{
this.state.document !== null ?
<div className="chat-body__content--confirm d-flex">
<div className="chat-body__content--confirm___box d-flex flex-column">
<p>{`ارسال (${this.state.document.name}) به ${this.state.data.users[1].name}؟`}</p>
<div className="chat-body__content--confirm___box---options d-flex">
<button style={{color: "#00ff00"}} onClick={() => this.sendFile()}>ارسال</button>
<button style={{color: "#ffffff"}} onClick={() => this.cancelSendFile()}>کنسل</button>
</div>
</div>
</div> : null
}
</div>
<div className="chat-body__footer d-flex">

42
src/views/ChatRoom/Body/Body.scss
Unescape View File

@ -3,7 +3,7 @@
background-color: rgb(210, 196, 214);
justify-content:flex-start;
flex : 1;
max-height: calc(100vh - 160px);
max-height: calc(100vh - 150px);
border-top-left-radius: 40px;
border-top-right-radius: 40px;
&__content{
@ -26,6 +26,46 @@
object-fit:scale-down;
}
}
&--confirm{
width: 100vw;
height: 100vh;
position: fixed;
top: 0px;
left: 0px;
justify-content:center;
align-items:center;
z-index: 300;
&___box{
position: relative;
bottom: 50px;
width: 100%;
max-width: 250px;
padding: 10px;
background: rgb(139, 73, 186);
background: linear-gradient(180deg, rgb(144, 73, 186) 0%, rgb(111,108,255) 95%);
text-align: right;
direction: rtl;
color: white;
border-radius: 5px;
box-shadow: 0px 0px 20px rgba(0, 0, 0, 1);
font-size: 16px;
&---options{
justify-self: flex-end;
align-self: flex-start;
width: 110px;
height : 40px;
justify-content:space-between;
& button{
background-color: inherit;
border : none;
font-size: 14px;
&:focus{
outline : none;
}
}
}
}
}
}
&__footer{
width: 100%;

4
src/views/ChatRoom/Body/ChatInputs/ChatInput.js
Unescape View File

@ -3,7 +3,7 @@ import AudioReactRecorder from 'audio-react-recorder';
import MicIcon from '@material-ui/icons/Mic';
import CheckIcon from '@material-ui/icons/Check';
import CloseIcon from '@material-ui/icons/Close';
import PermMediaIcon from '@material-ui/icons/PermMedia';
import AttachmentIcon from '@material-ui/icons/Attachment';
import TextField from '@material-ui/core/TextField';
import SendIcon from '@material-ui/icons/Send';
@ -27,7 +27,7 @@ export default class ChatInputs extends Component {
<div className="chat-inputs__box d-flex">
<div className="chat-inputs__box--file">
<input type="file" onChange={(e) => addFile(e)}/>
<PermMediaIcon style={{color : "white",marginRight : 10, width : 30, height: 30,zIndex : 10,position : "absolute", top: 0, left: 0}} />
<AttachmentIcon style={{color : "white", marginRight : 10, width : 30, height: 30, zIndex : 10,position : "absolute", top: 0, left: 0}} />
</div>
{/* <input type="text" placeholder="یک پیام بنویسید..." multiline /> */}
<TextField id="standard-textarea" label="" value={message} placeholder="یک پیام بنویسید..." rowsMax={4} onChange={(e) => typeText(e)} multiline />

55
src/views/ChatRoom/Body/Message/Message.js
Unescape View File

@ -1,20 +1,21 @@
import React, { Component } from 'react';
import ReactAudioPlayer from 'react-audio-player';
import ReactPlayer from 'react-player';
import CloudDownloadIcon from '@material-ui/icons/CloudDownload';
import './Message.scss';
export default class Message extends Component {
render(){
const {message, user1, user2,file} = this.props;
const {message, user1, user2,file,document} = this.props;
return (
<div
className="message d-flex flex-column d-flex"
style={{
marginRight: message.user.id === user1.id ? 0 : 40,
marginLeft: message.user.id === user1.id ? 40 : 0,
filter: file !== null ? 'blur(16px)': 'blur(0px)',
filter: document !== null ? 'blur(16px)': 'blur(0px)',
}}
>
<img
@ -23,24 +24,28 @@ export default class Message extends Component {
alt={message.id}
/>
<div
className="message__box d-flex"
className={message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ? `message__box d-flex` : `message__box d-flex message__box--file`}
style={{backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white" }}
>
<div
className="message__box--detail"
style={{
right : message.user.id === user1.id ? "auto" : 20 ,
left : message.user.id === user1.id ? 20 : "auto"
}}
>
<span
style={{color: message.user.id === user1.id ? "white" : "black" }}
>
{message.user.name}
</span>
</div>
{
message.text !== null && message.video === null && message.image === null && message.music === null ?
message.voice === null && message.video === null && message.image === null && message.music === null && message.document === null ?
<div
className="message__box--detail"
style={{
right : message.user.id === user1.id ? "auto" : 20 ,
left : message.user.id === user1.id ? 20 : "auto"
}}
>
<span
style={{color: message.user.id === user1.id ? "white" : "black" }}
>
{message.user.name}
</span>
</div> : null
}
{
message.text !== null && message.video === null && message.image === null && message.music === null && message.document === null ?
<p id="3" style={{color: message.user.id === user1.id ? "white" : "black" }}>{message.text}</p> : null
}
{
@ -74,7 +79,21 @@ export default class Message extends Component {
src={message.music}
controls
/> : null
}
{
message.document !== null ?
<a
href={message.document.data}
download
className="message__box--document d-flex"
style={{
backgroundColor: message.user.id === user1.id ? "rgb(15, 93, 190)" : "white",
color: message.user.id === user1.id ? "white" : "black"
}}
>
<CloudDownloadIcon style={{color : message.user.id === user1.id ? "white" : "black" , width : 32, height : 32, marginRight: 10}} />
<div>{message.document.name}</div>
</a> : null
}
</div>

23
src/views/ChatRoom/Body/Message/Message.scss
Unescape View File

@ -13,6 +13,7 @@
z-index: 50;
}
&__box{
justify-content:flex-end;
width: 100%;
padding : 35px 15px 5px;
background-color:white;
@ -41,7 +42,6 @@
max-height: 250px;
width: 100%;
max-width: 250px;
object-fit: scale-down;
border-radius: 0px;
border : 0px;
position: static;
@ -57,11 +57,32 @@
// min-width: 100% !important;
// }
}
&--file{
background-color: rgb(210, 196, 214) !important;
}
&--document{
width: 100%;
max-width: 300px;
align-items:center;
justify-content: space-between;
height: 50px;
padding : 10px;
border-radius: 10px;
div{
font-size: 14px;
}
}
}
}
}
a:focus{
text-decoration: none;
}
.react-audio-player{
width: 100% !important;
color: red;
fill: red;
}

2
src/views/ChatRoom/ChatInfo/FileTabs/FileTabs.scss
Unescape View File

@ -20,7 +20,7 @@
width: 100%;
&--item{
width : calc(100% / 3);
height: 150px;
height: calc(100vw / 3);
border : 2px solid rgb(200, 183, 232);
background-color : red;
}

2
src/views/ChatRoom/Header/Header.scss
Unescape View File

@ -2,7 +2,7 @@
.header{
border-top-right-radius: 40px;
border-top-left-radius: 40px;
height: 90px;
height: 80px;
width: 100%;
justify-content : space-between;
align-items: flex-start;

Write Preview
Loading…
Cancel
Save