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