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.
 
 
 

65 lines
3.0 KiB

import React, { Component } from 'react';
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 AttachmentIcon from '@material-ui/icons/Attachment';
import TextField from '@material-ui/core/TextField';
import SendIcon from '@material-ui/icons/Send';
import './ChatInputs.scss';
export default class ChatInputs extends Component {
render(){
const {onStop,stop,start,recordState,cancel,typeText,message,sendMessage,addFile,file} = this.props;
return (
<div className="chat-inputs d-flex">
<AudioReactRecorder state={recordState} onStop={onStop} />
{/* <button onClick={start}>Start</button>
<button onClick={stop}>Stop</button>
{
recordState ?
<ReactAudioPlayer
src={recordState.url}
autoPlay
controls
/> : null
} */}
<div className="chat-inputs__box d-flex">
<div className="chat-inputs__box--file">
<input type="file" onChange={(e) => addFile(e)}/>
<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 />
</div>
<div className="chat-inputs__voice d-flex">
<div className="chat-inputs__voice d-flex">
{
(recordState === null && message === '' && file === null) || (recordState && recordState.url && message === '' && file === null) ?
<div className="chat-inputs__voice--icon d-flex" onClick={start}>
<MicIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 30, height: 30,borderRadius : 30}} />
</div> : null
}
{
message !== '' || file !== null?
<div className="chat-inputs__voice--icon d-flex" onClick={() => sendMessage()}>
<SendIcon style={{color : "rgb(15, 93, 209)",backgroundColor : "white", width : 25, height: 25,borderRadius : 30}} />
</div> : null
}
{
recordState === 'start' ?
<>
<div className="chat-inputs__voice--icon d-flex mr-2" onClick={cancel}>
<CloseIcon style={{color : "red", backgroundColor : "white", width : 30, height: 30}} />
</div>
<div className="chat-inputs__voice--icon d-flex" onClick={stop}>
<CheckIcon style={{color : "green", backgroundColor : "white", width : 30, height: 30}} />
</div>
</> : null
}
</div>
</div>
</div>
);
}
}