1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
|
import React from 'react';
import PropTypes from 'prop-types';
import { withStyles } from '@material-ui/core/styles';
import classNames from 'classnames';
import Send from '@material-ui/icons/Send';
import dummyContents from 'ba-api/dummyContents';
import Type from 'ba-styles/Typography.scss';
import { Avatar, Typography, Paper, Tooltip, IconButton } from '@material-ui/core';
import MessageField from './MessageField';
import styles from './chatStyle-jss';
class ChatRoom extends React.Component {
constructor() {
super();
this.state = { message: '' };
this.handleWrite = this.handleWrite.bind(this);
}
handleWrite = (e, value) => {
this.setState({ message: value });
};
resetInput = () => {
const ctn = document.getElementById('roomContainer');
this.setState({ message: '' });
this._field.setState({ value: '' });
setTimeout(() => {
ctn.scrollTo(0, ctn.scrollHeight);
}, 300);
}
sendMessageByEnter = (event, message) => {
if (event.key === 'Enter' && event.target.value !== '') {
this.props.sendMessage(message.__html);
this.resetInput();
}
}
sendMessage = message => {
this.props.sendMessage(message.__html);
this.resetInput();
}
render() {
const html = { __html: this.state.message };
const {
classes,
dataChat,
chatSelected,
dataContact,
showMobileDetail,
} = this.props;
const { message } = this.state;
const getChat = dataArray => dataArray.map(data => {
const renderHTML = { __html: data.get('message') };
return (
<li className={data.get('from') === 'contact' ? classes.from : classes.to} key={data.get('id')}>
<time dateTime={data.get('date') + ' ' + data.get('time')}>{data.get('date') + ' ' + data.get('time')}</time>
{data.get('from') === 'contact'
? <Avatar alt="avatar" src={dataContact.getIn([chatSelected, 'avatar'])} className={classes.avatar} />
: <Avatar alt="avatar" src={dummyContents.user.avatar} className={classes.avatar} />
}
<div className={classes.talk}>
<p><span dangerouslySetInnerHTML={renderHTML} /></p>
</div>
</li>
);
});
return (
<div className={classNames(classes.root, showMobileDetail ? classes.detailPopup : '')}>
<ul className={classes.chatList} id="roomContainer">
{dataChat.size > 0 ? getChat(dataChat) : (<Typography variant="caption" component="p" className={Type.textCenter}>{'You haven\'t made any conversation yet'}</Typography>)}
</ul>
<Paper className={classes.writeMessage}>
<MessageField
onChange={this.handleWrite}
ref={(_field) => { this._field = _field; return this._field; }}
placeholder="Type a message"
fieldType="input"
value={message}
onKeyPress={(event) => this.sendMessageByEnter(event, html)}
/>
<Tooltip id="tooltip-send" title="Send">
<div>
<IconButton size="small" color="secondary" disabled={message === ''} onClick={() => this.sendMessage(html)} aria-label="send" className={classes.sendBtn}>
<Send />
</IconButton>
</div>
</Tooltip>
</Paper>
</div>
);
}
}
ChatRoom.propTypes = {
classes: PropTypes.object.isRequired,
dataChat: PropTypes.object.isRequired,
showMobileDetail: PropTypes.bool.isRequired,
chatSelected: PropTypes.number.isRequired,
dataContact: PropTypes.object.isRequired,
sendMessage: PropTypes.func.isRequired,
};
export default withStyles(styles)(ChatRoom);
|
