99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import PropTypes from 'prop-types'
|
|
import React from 'react'
|
|
|
|
export default class Input extends React.PureComponent {
|
|
static propTypes = {
|
|
sendMessage: PropTypes.func.isRequired
|
|
}
|
|
constructor () {
|
|
super()
|
|
this.state = {
|
|
message: ''
|
|
}
|
|
}
|
|
handleChange = e => {
|
|
this.setState({
|
|
message: e.target.value
|
|
})
|
|
}
|
|
handleSubmit = e => {
|
|
e.preventDefault()
|
|
this.submit()
|
|
}
|
|
handleKeyPress = e => {
|
|
if (e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault()
|
|
this.submit()
|
|
}
|
|
}
|
|
handleSmileClick = e => {
|
|
this.setState({
|
|
message: this.textArea.value + e.currentTarget.innerHTML
|
|
})
|
|
}
|
|
submit = () => {
|
|
const { sendMessage } = this.props
|
|
const { message } = this.state
|
|
if (message) {
|
|
sendMessage({
|
|
payload: message,
|
|
type: 'text'
|
|
})
|
|
// let image = null
|
|
|
|
// // take snapshoot
|
|
// try {
|
|
// const video = videos[userId]
|
|
// if (video) {
|
|
// const canvas = document.createElement('canvas')
|
|
// canvas.height = video.videoHeight
|
|
// canvas.width = video.videoWidth
|
|
// const avatar = canvas.getContext('2d')
|
|
// avatar.drawImage(video, 0, 0, canvas.width, canvas.height)
|
|
// image = canvas.toDataURL()
|
|
// }
|
|
// } catch (e) {}
|
|
}
|
|
this.setState({ message: '' })
|
|
}
|
|
render () {
|
|
const { message } = this.state
|
|
return (
|
|
<form className="chat-controls" onSubmit={this.handleSubmit}>
|
|
<textarea
|
|
className="chat-controls-textarea"
|
|
onChange={this.handleChange}
|
|
onKeyPress={this.handleKeyPress}
|
|
placeholder="Type a message"
|
|
value={message}
|
|
ref={node => { this.textArea = node }}
|
|
/>
|
|
<div className="chat-controls-buttons">
|
|
<input type="submit" value="Send"
|
|
className="chat-controls-buttons-send" />
|
|
|
|
<div className="chat-controls-buttons-wrapper">
|
|
<div className="emoji">
|
|
<div className="chat-controls-buttons-smiles">
|
|
<span className="icon icon-sentiment_satisfied" />
|
|
<div className="chat-controls-buttons-smiles-menu">
|
|
<div className="chat-controls-buttons-smile"
|
|
onClick={this.handleSmileClick}>😑</div>
|
|
<div className="chat-controls-buttons-smile"
|
|
onClick={this.handleSmileClick}>😕</div>
|
|
<div className="chat-controls-buttons-smile"
|
|
onClick={this.handleSmileClick}>😊</div>
|
|
<div className="chat-controls-buttons-smile"
|
|
onClick={this.handleSmileClick}>😎</div>
|
|
<div className="chat-controls-buttons-smile"
|
|
onClick={this.handleSmileClick}>💪</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
)
|
|
}
|
|
}
|